layout changes, apply fonts
This commit is contained in:
parent
aad36ee953
commit
b552aa4312
|
@ -0,0 +1,7 @@
|
|||
toy-shelf ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
toy-shelf li {
|
||||
display: block;
|
||||
}
|
|
@ -4,6 +4,7 @@
|
|||
display: inline-block;
|
||||
background-color: chartreuse;
|
||||
} */
|
||||
@import url(https://fonts.bunny.net/css?family=georama:400|bangers:400);
|
||||
|
||||
body {
|
||||
background: url(../images/d7YslGq.gif);
|
||||
|
@ -11,19 +12,23 @@ body {
|
|||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Georama', sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-family: 'Bangers', display;
|
||||
}
|
||||
|
||||
h1,h2,h3 {
|
||||
line-height: 1.2;
|
||||
font-family: 'Bangers', display;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding: 20px 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
@ -31,17 +36,23 @@ h1,h2,h3 {
|
|||
.content {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
padding: 20px 50px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex: 3 1 20%;
|
||||
border: 1px solid black;
|
||||
padding: 20px 40px;
|
||||
padding: 20px 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.storefront {
|
||||
flex: 1 3 fit-content;
|
||||
margin: 0 auto;
|
||||
min-height: 720px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.shelf-group {
|
||||
|
@ -78,3 +89,8 @@ toy-shelf li {
|
|||
left: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
|
19
index.html
19
index.html
|
@ -4,24 +4,26 @@
|
|||
<meta charset="utf-8">
|
||||
<script src="js/elements.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/noscript.css" />
|
||||
</noscript>
|
||||
<title>yeet</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>yequari's emporium of excellent toys</h1>
|
||||
<h3><em>Odd that we only have Transformers though</em></h3>
|
||||
</header>
|
||||
<div class="content">
|
||||
<main class="content">
|
||||
<div class="storefront">
|
||||
|
||||
<div class="shelf-group">
|
||||
<h2>Featured</h2>
|
||||
<toy-shelf>
|
||||
<ul slot="toy-list">
|
||||
<li slot="toy-item">Armada Megatron</li>
|
||||
<li slot="toy-item">Leo Prime</li>
|
||||
<li slot="toy-item">Coronation Starscream</li>
|
||||
<li>Armada Megatron</li>
|
||||
<li>Leo Prime</li>
|
||||
<li>Coronation Starscream</li>
|
||||
</ul>
|
||||
</toy-shelf>
|
||||
<toy-shelf>
|
||||
|
@ -74,7 +76,12 @@
|
|||
Don't see what you're looking for at the front desk? We might have it in the <a href="#">back</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<em>This site is best viewed with JavaScript enabled, but should be perfectly usable without. Please report any issues on the <a href="https://git.32bit.cafe/yequari/yeet.marigold.town/issues">git repository</a>.</em>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue