paoda/scratch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: limpopo update

Browse Source
This commit is contained in:
Rekai Nyangadzayi Musuka
2021-03-29 19:25:46 -05:00
parent 7eda2d71ff
commit e9770053dd
18 changed files with 2728 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
2021-03-11/nichol-assignment/img/.gitkeep Normal file
View File

90
2021-03-11/nichol-assignment/index.css Normal file
View File

@@ -0,0 +1,90 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
body {
margin: 0;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
div.container {
padding: 10px;
display: flex;
background-color: #e5e5e5;
width: 100vw;
height: 100vh;
flex-wrap: wrap;
}
div.card-container {
flex: 1 0 calc(100vw / 6);
margin-bottom: 10px;
display: flex;
justify-content: center;
}
div.card {
background-color: white;
height: 500px;
width: 300px;
max-width: 350px;
border-radius: 5px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
div.card-content {
display: flex;
flex-direction: column;
height: calc(500px / 2);
}
div.card-content > p {
flex-grow: 1;
margin: 0;
}
div.card-content > footer {
height: 2em;
letter-spacing: 3px;
color: #858585
}
div.card-content > footer > hr {
margin: 0;
color: #f5f5f5;
}
div.card > img {
border-radius: inherit;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: inherit;
height: calc(500px / 2);
object-fit: cover;
}
div#card-content {
padding: 5px;
}
div#card-content > h2 {
margin: 0;
font-weight: 500;
}
div#card-content > p {
font-weight: 400;
}
@media (max-width: 1000px) {
div.card-container {
flex: 1 0 calc(100vw / 3);
}
}
@media (max-width: 600px) {
div.card-container {
flex: 1 0 100vw;
}
}

197
2021-03-11/nichol-assignment/index.html Normal file
View File

@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Nichol Assignment</title>
</head>
<body>
<div class="container">
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="./img/Zimbabwe-Harare.jpg" alt="A View of Harare from a nearby hill">
<div class="card-content">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna al</p>
<footer>
<hr />
<span>TWITTER</span>
</footer>
</div>
</div>
</div>
</div>
</body>
</html>