Add footer and advert.
This commit is contained in:
Jakub Koralewski
parent
83b49cd93c
commit
06eed282a4
BIN
img/thumbnails/ad.gif
Normal file
BIN
img/thumbnails/ad.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 MiB |
BIN
img/thumbnails/agriculture.jpg
Normal file
BIN
img/thumbnails/agriculture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
img/thumbnails/alpaca.jpg
Normal file
BIN
img/thumbnails/alpaca.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
BIN
img/thumbnails/cat.webp
Normal file
BIN
img/thumbnails/cat.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
img/thumbnails/dont2.gif
Normal file
BIN
img/thumbnails/dont2.gif
Normal file
Binary file not shown.
BIN
img/thumbnails/religion.jpg
Normal file
BIN
img/thumbnails/religion.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
129
src/index.html
129
src/index.html
@ -200,35 +200,124 @@
|
||||
<i class="fas fa-hand-point-right"></i>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sports">
|
||||
<header>
|
||||
<h3>Sports</h3>
|
||||
</header>
|
||||
<article>
|
||||
<figure>
|
||||
<img src="../img/thumbnails/sports01.jpg" alt="Free kick">
|
||||
<figcaption>Free kick at second half.</figcaption>
|
||||
</figure>
|
||||
<h4>We won versus some other team.</h4>
|
||||
</article>
|
||||
<section id="current">
|
||||
<section id="left-current">
|
||||
<article>
|
||||
<main>
|
||||
<header>We won versus some other team.</header>
|
||||
<p>Senator Mitch McConnell, the majority leader, has earned the nickname “the grim reaper”
|
||||
for his iron-fisted grip on the chamber.
|
||||
<br>
|
||||
|
||||
Now his latest test will be making short work of President Trump’s impeachment trial
|
||||
while keeping his own party unified.
|
||||
</p>
|
||||
</main>
|
||||
<figure>
|
||||
<img src="../img/thumbnails/sports01.jpg" alt="Free kick">
|
||||
<figcaption>Free kick at second half.
|
||||
<div class="author">
|
||||
Eric Shaff/THE TAJMS
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</article>
|
||||
<article>
|
||||
<main>
|
||||
<header>The time has come.</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
. Amet aperiam beatae consequatur consequuntur, doloribus exercitationem
|
||||
illo itaque magnam nam optio perspiciatis possimus praesentium quia sequi
|
||||
tempora? Dolorem eius porro sequi?
|
||||
<br>
|
||||
Aspernatur consequatur eligendi iure modi, provident quae soluta unde.
|
||||
Aliquam blanditiis ea eveniet explicabo in libero, nemo nihil numquam odio
|
||||
omnis, perferendis provident quaerat qui quo reiciendis rerum, sed
|
||||
voluptatum.
|
||||
</p>
|
||||
</main>
|
||||
<figure>
|
||||
<img src="../img/thumbnails/religion.jpg" alt="Free kick">
|
||||
<figcaption>Free kick at second half.
|
||||
<div class="author">
|
||||
Eric Shaff/THE TAJMS
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</article>
|
||||
<article>
|
||||
<main>
|
||||
<header>Crops ripe!</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
. Amet aperiam beatae consequatur consequuntur, doloribus exercitationem
|
||||
illo itaque magnam nam optio perspiciatis possimus praesentium quia sequi
|
||||
tempora? Dolorem eius porro sequi?
|
||||
<br>
|
||||
Aspernatur consequatur eligendi iure modi, provident quae soluta unde.
|
||||
Aliquam blanditiis ea eveniet explicabo in libero, nemo nihil numquam odio
|
||||
omnis, perferendis provident quaerat qui quo reiciendis rerum, sed
|
||||
voluptatum.
|
||||
</p>
|
||||
</main>
|
||||
<figure>
|
||||
<img src="../img/thumbnails/agriculture.jpg" alt="Free kick">
|
||||
<figcaption>Crops ripe this year.
|
||||
<div class="author">
|
||||
Mr. Photographer/THE TAJMS
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</article>
|
||||
</section>
|
||||
<section id="right-current">
|
||||
<section>
|
||||
<header>
|
||||
Editor's Picks
|
||||
</header>
|
||||
<article>
|
||||
<header>
|
||||
Lorem ipsum
|
||||
</header>
|
||||
<img
|
||||
src="../img/thumbnails/alpaca.jpg">
|
||||
</article>
|
||||
<article>
|
||||
<header>
|
||||
Dolor sit amet
|
||||
</header>
|
||||
<img
|
||||
src="../img/thumbnails/cat.webp">
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section id="not-an-ad">
|
||||
<header>
|
||||
<h3>Stuff</h3>
|
||||
Help us pay our bills.
|
||||
</header>
|
||||
<article>
|
||||
|
||||
</article>
|
||||
<main>
|
||||
<article>
|
||||
<img
|
||||
src="../img/thumbnails/ad.gif"
|
||||
alt="This meme was made by the counter-clockwise gang."
|
||||
>
|
||||
</article>
|
||||
<article>
|
||||
<video
|
||||
autoplay
|
||||
loop
|
||||
src="../img/thumbnails/dont2.gif"
|
||||
></video>
|
||||
</article>
|
||||
</main>
|
||||
</section>
|
||||
</main>
|
||||
<aside>
|
||||
Advertisement
|
||||
</aside>
|
||||
<footer>
|
||||
Made by Jakub Koralewski.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
<script src="index.ts" type="text/javascript"></script>
|
||||
</html>
|
||||
@ -31,7 +31,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@import './styles/nav.scss';
|
||||
@import './styles/header.scss';
|
||||
@import './styles/main.scss';
|
||||
|
||||
@import './styles/nav';
|
||||
@import './styles/header';
|
||||
@import './styles/main/main';
|
||||
@import './styles/footer';
|
||||
|
||||
@ -28,11 +28,11 @@ let nav = {
|
||||
if (nav.isActive) {
|
||||
[nav.nav, nav.clickCatcher]
|
||||
.forEach(
|
||||
(x) => x.classList.remove("active"));
|
||||
(x) => x.classList.add("active"));
|
||||
} else {
|
||||
[nav.nav, nav.clickCatcher]
|
||||
.forEach(
|
||||
(x) => x.classList.add("active"));
|
||||
(x) => x.classList.remove("active"));
|
||||
}
|
||||
},
|
||||
onClickCatcherClick: (e: Event) => {
|
||||
|
||||
3
src/styles/footer.scss
Normal file
3
src/styles/footer.scss
Normal file
@ -0,0 +1,3 @@
|
||||
footer {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
131
src/styles/main/current.scss
Normal file
131
src/styles/main/current.scss
Normal file
@ -0,0 +1,131 @@
|
||||
section#current {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
$lightblack: transparentize(black, 0.9);
|
||||
padding: 3rem 0 4rem 0;
|
||||
border-bottom: 2px solid black;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section#left-current {
|
||||
flex-basis: 70%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
//grid-template-rows: auto 1fr 1fr;
|
||||
grid-gap: 1rem;
|
||||
|
||||
article {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:nth-child(2n - 1) {
|
||||
grid-column: span 2;
|
||||
border-bottom: 1px solid $lightblack;
|
||||
|
||||
main {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
border-left: 1px solid $lightblack;
|
||||
border-right: 4px double $lightblack;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
figure {
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
$size: 2rem;
|
||||
font-size: 2rem;
|
||||
line-height: $size;
|
||||
font-family: "Bungee Inline", serif;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
opacity: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
height: min-content;
|
||||
flex-basis: 40%;
|
||||
flex-grow: 1;
|
||||
margin: 1rem;
|
||||
|
||||
img {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-style: italic;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
.author {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section#right-current {
|
||||
flex-basis: 30%;
|
||||
padding: 0 1rem;
|
||||
|
||||
section {
|
||||
& > header {
|
||||
font-family: 'Bungee Inline', serif;
|
||||
}
|
||||
article {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section#not-an-ad {
|
||||
padding-bottom: 1rem;
|
||||
header {
|
||||
font-family: 'Comic Sans MS', 'Bungee Inline', serif;
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
display: flex;
|
||||
|
||||
article {
|
||||
padding: 1rem;
|
||||
height: 50vh;
|
||||
|
||||
img, video {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,22 @@
|
||||
@import './_vars.scss';
|
||||
@import '../vars';
|
||||
|
||||
body > main {
|
||||
@import './current';
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 3px double black;
|
||||
|
||||
section#slideshow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 3px double black;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.controls {
|
||||
font-size: 5rem;
|
||||
Loading…
Reference in New Issue
Block a user