132 lines
4.8 KiB
HTML
132 lines
4.8 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="viewport" content="initial-scale=.75, maximum-scale=.75, width=device-width">
|
||
|
|
<!-- Primary Meta Tags -->
|
||
|
|
<title>the state vs. the virus</title>
|
||
|
|
<meta name="title" content="Elizabeth Warren Meme Generator">
|
||
|
|
<meta name="description" content="Pander to everyone with the click of a button!">
|
||
|
|
|
||
|
|
<!-- Open Graph / Facebook -->
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:url" content="https://warren.wearvol.com/">
|
||
|
|
<meta property="og:title" content="Elizabeth Warren Meme Generator">
|
||
|
|
<meta property="og:description" content="Pander to everyone with the click of a button!">
|
||
|
|
<meta property="og:image" content="https://warren.wearvol.com/social.png">
|
||
|
|
|
||
|
|
<!-- Twitter -->
|
||
|
|
<meta property="twitter:card" content="summary_large_image">
|
||
|
|
<meta property="twitter:url" content="https://warren.wearvol.com/">
|
||
|
|
<meta property="twitter:title" content="Elizabeth Warren Meme Generator">
|
||
|
|
<meta property="twitter:description" content="Pander to everyone with the click of a button!">
|
||
|
|
<meta property="twitter:image" content="https://warren.wearvol.com/social.png">
|
||
|
|
<style>
|
||
|
|
/* @font-face{
|
||
|
|
font-family: 'Bebas';
|
||
|
|
src: url('Bebas.woff') format('woff');
|
||
|
|
} */
|
||
|
|
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:800&display=swap');
|
||
|
|
body{
|
||
|
|
margin:0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
display:grid;
|
||
|
|
grid-template-rows: 50px auto;
|
||
|
|
grid-template-columns: auto 33vw;
|
||
|
|
grid-template-areas:
|
||
|
|
"header nav"
|
||
|
|
"list nav";
|
||
|
|
}
|
||
|
|
header{
|
||
|
|
grid-area: header;
|
||
|
|
background-color: black;
|
||
|
|
color:white;
|
||
|
|
|
||
|
|
}
|
||
|
|
main{
|
||
|
|
grid-area: list;
|
||
|
|
background-color: #eee;
|
||
|
|
}
|
||
|
|
aside{
|
||
|
|
grid-area:nav;
|
||
|
|
background-color: rgb(122, 255, 244);
|
||
|
|
}
|
||
|
|
#meta{
|
||
|
|
/* padding:50px;
|
||
|
|
outline: 10px dotted orange;
|
||
|
|
margin: 30px; */
|
||
|
|
}
|
||
|
|
#db{
|
||
|
|
/* padding:50px;
|
||
|
|
outline: 10px dotted yellowgreen;
|
||
|
|
margin: 30px; */
|
||
|
|
}
|
||
|
|
#db ul{
|
||
|
|
margin:0;
|
||
|
|
padding: 0;
|
||
|
|
display:flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
#db li{
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
#db li a {
|
||
|
|
outline:1px solid silver;
|
||
|
|
transition: all .3s;
|
||
|
|
display:block;
|
||
|
|
text-decoration: none;
|
||
|
|
color: black;
|
||
|
|
display:grid;
|
||
|
|
grid-template-rows: auto;
|
||
|
|
grid-template-columns: auto 25vw;
|
||
|
|
grid-template-areas:
|
||
|
|
"title image"
|
||
|
|
"desc image";
|
||
|
|
}
|
||
|
|
#db a:hover{
|
||
|
|
background-color: silver;
|
||
|
|
}
|
||
|
|
#db li a h1{
|
||
|
|
font-family: 'Playfair Display', serif !important;
|
||
|
|
font-size: 50px;
|
||
|
|
grid-area:title;
|
||
|
|
}
|
||
|
|
#db li a p{
|
||
|
|
grid-area:desc;
|
||
|
|
}
|
||
|
|
#db li a #img{
|
||
|
|
grid-area:image;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<!-- Load React. -->
|
||
|
|
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||
|
|
<!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
|
||
|
|
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> -->
|
||
|
|
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
|
||
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<pre></pre>
|
||
|
|
<header>the state vs. the virus</header>
|
||
|
|
<main>
|
||
|
|
<section>
|
||
|
|
<div id='meta'></div>
|
||
|
|
<div id='db'></div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<aside>
|
||
|
|
<form>
|
||
|
|
<label>URL</label>
|
||
|
|
<input id="addUrl" type='text' value="https://wearvol.com">
|
||
|
|
<label>COMMENT</label>
|
||
|
|
<textarea id="addComment">this is a comment</textarea>
|
||
|
|
<label>TAGS</label>
|
||
|
|
<textarea id="addTags">#tag #tag2 #tag3</textarea>
|
||
|
|
<button id="addButton" type="button">add</button>
|
||
|
|
</form>
|
||
|
|
</aside>
|
||
|
|
<script src="main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|