Skip to content

Commit db52418

Browse files
a092devsa092devs
committed
Day 44
- Intermediate CSS
1 parent 50963bb commit db52418

File tree

13 files changed

+281
-0
lines changed

13 files changed

+281
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
- [Day 41](https://github.com/a092devs/100-days-of-python/tree/master/day041) - Introduction to HTML
5050
- [Day 42](https://github.com/a092devs/100-days-of-python/tree/master/day042) - Intermediate HTML
5151
- [Day 43](https://github.com/a092devs/100-days-of-python/tree/master/day043) - Introduction to CSS
52+
- [Day 44](https://github.com/a092devs/100-days-of-python/tree/master/day044) - Intermediate CSS
5253

5354
## ⚙ Tools and Technologies Covered
5455
- Python 3

‎day044/CSS Box Model/goal.png

955 KB
Loading

‎day044/CSS Box Model/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>CSS Box Model</title>
7+
<style>
8+
div {
9+
height: 200px;
10+
width: 200px;
11+
}
12+
13+
p {
14+
margin: 0;
15+
}
16+
17+
#first {
18+
background-color: cadetblue;
19+
padding: 20px;
20+
border: 10px solid black;
21+
}
22+
23+
#second {
24+
background-color: gold;
25+
border: solid black;
26+
border-width: 20px 10px;
27+
margin-left: 260px;
28+
}
29+
30+
#third {
31+
background-color: indianred;
32+
border: 10px solid black;
33+
margin-left: 40px;
34+
}
35+
</style>
36+
</head>
37+
38+
<body>
39+
<div id="first">
40+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien porttitor urna elementum lacinia. In
41+
id magna pulvinar, ultricies lorem id, vehicula elit. Aliquam eu luctus nisl, vitae pellentesque magna. Phasellus
42+
dolor metus, laoreet ac convallis sit amet, efficitur sed dolor.</p>
43+
</div>
44+
<div id="second">
45+
46+
</div>
47+
<div id="third">
48+
49+
</div>
50+
<!-- TODOs:
51+
8. Set the 3rd div to have a 10px border
52+
9. Set the margins for the divs so that each box corner touches the other. (See the goal image)
53+
-->
54+
55+
</body>
56+
57+
</html>

‎day044/CSS Colors/goal.png

47.1 KB
Loading

‎day044/CSS Colors/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Colors</title>
7+
<style>
8+
body {
9+
background-color: antiquewhite;
10+
}
11+
12+
h1 {
13+
color: whitesmoke;
14+
background-color: darkseagreen;
15+
}
16+
17+
h2 {
18+
color: #FAF8F1;
19+
background-color: #C58940;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<h1>Hello</h1>
26+
<h2>World</h2>
27+
</body>
28+
29+
</html>

‎day044/Font Properties/font-family.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Font Family</title>
7+
<style>
8+
h1 {
9+
font-family: 'Architects Daughter', cursive;
10+
}
11+
12+
#helvetica {
13+
font-family: Helvetica, sans-serif;
14+
}
15+
16+
#arial {
17+
font-family: Arial, sans-serif;
18+
}
19+
20+
#serif {
21+
font-family: serif;
22+
}
23+
24+
#sans-serif {
25+
font-family: sans-serif;
26+
}
27+
28+
#cursive {
29+
font-family: cursive;
30+
}
31+
32+
#monospace {
33+
font-family: monospace;
34+
}
35+
36+
#fantasy {
37+
font-family: fantasy;
38+
}
39+
</style>
40+
<link rel="preconnect" href="https://fonts.googleapis.com">
41+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
42+
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
43+
</head>
44+
45+
<body>
46+
<h1>Font Family</h1>
47+
<p id="helvetica">Helvetica</p>
48+
<p id="arial">Arial</p>
49+
<p id="serif">Serif</p>
50+
<p id="sans-serif">Sans Serif</p>
51+
<p id="cursive">Cursive</p>
52+
<p id="monospace">Monospace</p>
53+
<p id="fantasy">Fantasy</p>
54+
55+
</body>
56+
57+
</html>

‎day044/Font Properties/font-size.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Font-Size</title>
6+
<style>
7+
#pixel {
8+
font-size: 20px;
9+
}
10+
11+
#point {
12+
font-size: 20pt;
13+
}
14+
15+
#em {
16+
font-size: 1em;
17+
}
18+
19+
#rem {
20+
font-size: 1rem;
21+
}
22+
23+
footer {
24+
font-size: 12pt;
25+
}
26+
27+
html {
28+
font-size: xx-large;
29+
}
30+
</style>
31+
</head>
32+
<html lang="en">
33+
34+
<body>
35+
<p id="pixel">1 Pixel is 1/96 of an Inch</p>
36+
<p id="point">1 Point is 1/72 of an Inch</p>
37+
<footer>
38+
<p id="em">1em is 100% the size of the parent element</p>
39+
<p id="rem">1rem is 100% the size of the root element</p>
40+
</footer>
41+
</body>
42+
43+
</html>

‎day044/Font Properties/goal.png

376 KB
Loading

‎day044/Font Properties/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>CSS Properties</title>
7+
<style>
8+
html {
9+
font-size: 30px;
10+
}
11+
12+
body {
13+
background-color: cornflowerblue;
14+
color: white;
15+
font-size: 18px;
16+
}
17+
18+
#color {
19+
color: coral;
20+
}
21+
22+
#size {
23+
font-size: 2rem;
24+
}
25+
26+
#weight {
27+
font-weight: 900;
28+
}
29+
30+
#family {
31+
font-family: "Caveat", cursive;
32+
}
33+
34+
#align {
35+
text-align: right;
36+
}
37+
</style>
38+
<link rel="preconnect" href="https://fonts.googleapis.com" />
39+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40+
<link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet" />
41+
</head>
42+
43+
<body>
44+
<h1>Important CSS Properties</h1>
45+
<p id="color">Color</p>
46+
<p id="size">Font Size</p>
47+
<p id="weight">Font Weight</p>
48+
<p id="family">Font Family</p>
49+
<p id="align">Text Align</p>
50+
</body>
51+
52+
</html>

‎day044/Motivation Meme Project/assets/images/daenerys.jpeg

197 KB
Loading

‎day044/Motivation Meme Project/goal.png

4.22 MB
Loading

‎day044/Motivation Meme Project/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Motivation Meme</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
12+
</head>
13+
<body>
14+
<div class="poster">
15+
<img src="assets/images/daenerys.jpeg" alt="khaleesi-img" class="motivation-img">
16+
<h1>That Special Moment</h1>
17+
<p>When you find the perfect avocado at the supermarket.</p>
18+
</div>
19+
</body>
20+
</html>

‎day044/Motivation Meme Project/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
body {
2+
background-color: black;
3+
}
4+
5+
h1 {
6+
text-transform: uppercase;
7+
font-size: 3rem;
8+
}
9+
10+
.poster {
11+
width: 50%;
12+
margin-left: 25%;
13+
margin-top: 100px;
14+
color: white;
15+
font-family: "Libre Baskerville", serif;
16+
text-align: center;
17+
}
18+
19+
.motivation-img {
20+
border: 5px solid white;
21+
width: 100%;
22+
}

0 commit comments

Comments
 (0)