Arcron-ArchLinux/100-Days-Of-Code
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a Motivation Meme website

Browse Source
This commit is contained in:
Muhammad Ibrahim 2024-11-20 14:04:49 +05:30
parent 532cdea27e
commit 5935ffaf2f
7 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Web Development Python Projects/6.4 Motivation Meme Project/assets/images/daenerys.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
Web Development Python Projects/6.4 Motivation Meme Project/goal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

37
Web Development Python Projects/6.4 Motivation Meme Project/index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Motivation Meme</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<div class="poster">
<img class="motivation-img" src="assets/images/daenerys.jpeg" alt="daenerys holding a black egg">
<h1>That Special Moment</h1>
<p>When you find the perfect avocado at the supermarket</p>
</div>
</body>
</html>
<!--
TODO: Create a motivational post website.
Style it how ever you like.
Look at the goal image for inspiration.
But it must have the following features:
1. The main h1 text should be using the Regular Libre Baskerville Font from Google Fonts:
https://fonts.google.com/specimen/Libre+Baskerville
2. The text should be white and background black.
3. Add your own image into the images folder inside assets. It should have a 5px white border.
4. The text should be center aligned.
5. Create a div to contain the h1, p and img elements. Adjust the margins so that the image and text are centered on the page.
Hint: You horizontally center a div by giving it a width of 50% and a margin-left of 25%.
Hint: Set the image to have a width of 100% so it fills the div.
6. Read about the text-transform property on MDN docs to make the h1 uppercase with CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
-->

BIN
Web Development Python Projects/6.4 Motivation Meme Project/solution/assets/images/daenerys.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

21
Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.css Normal file
View File

@ -0,0 +1,21 @@
body {
background-color: black;
}
h1 {
text-transform: uppercase;
font-size: 3rem;
}
.poster {
width: 50%;
margin-left: 25%;
margin-top: 100px;
color: white;
font-family: "Libre Baskerville", serif;
text-align: center;
}
.motivation-img {
border: 5px solid white;
width: 100%;
}

22
Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Motivation Meme</title>
<link rel="stylesheet" href="./solution.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
</head>
<body>
<div class="poster">
<img class="motivation-img" src="./assets/images/daenerys.jpeg" src="daenerys with egg" />
<h1>That Special Moment</h1>
<p>When you find the perfect avocado at the supermarket</p>
</div>
</body>
</html>

23
Web Development Python Projects/6.4 Motivation Meme Project/style.css Normal file
View File

@ -0,0 +1,23 @@
body {
background: black;
}
h1 {
text-transform: 100%;
color: white;
font-size: 3rem;
}
.poster {
width: 50%;
margin-left: 25%;
margin-top: 100px;
color: white;
font-family: "Libre Baskerville", serif;
text-align: center;
}
.motivation-img {
border: 5px, solid white;
width: 100%;
}