Skip to content

Commit 023c2ae

Browse files
HolmesMatthewHolmesMatthew
committed
adding notes from 3-11
1 parent 2deb921 commit 023c2ae

File tree

4 files changed

+269
-0
lines changed

4 files changed

+269
-0
lines changed

‎Code/matthew/html_css/labs/lab_3/financial.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ <h5 class="text-center">Apply now</h5>
109109
</div> -->
110110
<div class="col-12">
111111
<button type="submit" class="btn btn-primary">Submit</button>
112+
112113
</div>
113114
</form>
114115
</div>

‎Code/matthew/html_css/lectures/7_responsive_design/bootstrap.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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>Responsive Design</title>
8+
<!-- CSS only -->
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10+
<!-- <link rel="stylesheet" href="style.css"> -->
11+
</head>
12+
<body>
13+
<header class="row">
14+
<h1 class="text-center col-xl-4 ">Class Kiwi</h1>
15+
<div class="row col-xl-6 offset-xl-4">
16+
<a class= "col-12 col-md-3 text-center" href="">Home</a>
17+
<a class= "col-12 col-md-3 text-center" href="">About</a>
18+
<a class= "col-12 col-md-3 text-center" href="">Market Place</a>
19+
<a class= "col-12 col-md-3 text-center" href="">Login</a>
20+
</div>
21+
</header>
22+
<div class="hero">
23+
<!-- <img src="https://picsum.photos/1000/1000" alt="" /> -->
24+
</div>
25+
<main>
26+
<section>
27+
<h1>Title 1</h1>
28+
<p>
29+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil earum
30+
rerum porro ducimus, rem dolorum, nisi qui possimus, assumenda
31+
quisquam ipsum aliquam nostrum velit exercitationem harum similique.
32+
Dolorem, nostrum sequi.
33+
</p>
34+
</section>
35+
<section>
36+
<h1>Title 2</h1>
37+
<p>
38+
Architecto corrupti, veritatis ullam facilis odit nihil, deleniti
39+
soluta accusantium, corporis iste dolore! A itaque deleniti
40+
dignissimos cum, consequuntur natus aliquam nemo ex aut non obcaecati
41+
ipsum perferendis reiciendis exercitationem.
42+
</p>
43+
</section>
44+
<section>
45+
<h1>Title 3</h1>
46+
<p>
47+
Pariatur voluptas ratione illo asperiores ad, non fugiat. Harum, saepe
48+
veniam. Facere provident reiciendis odit aliquam repudiandae eligendi.
49+
Ipsa suscipit delectus deleniti officiis quod deserunt asperiores
50+
blanditiis amet corrupti quaerat!
51+
</p>
52+
</section>
53+
<section>
54+
<h1>Title 4</h1>
55+
<p>
56+
Culpa quisquam, eos sapiente, aliquid fuga dolorem repudiandae totam,
57+
in molestias iste itaque ipsa! Quod adipisci possimus, natus sunt rem
58+
voluptate odio obcaecati sit nihil suscipit nam harum. Nostrum, rerum.
59+
</p>
60+
</section>
61+
<section>
62+
<h1>Title 5</h1>
63+
<p>
64+
Qui odio aspernatur vero voluptatum, similique minus blanditiis et
65+
cupiditate autem quia atque expedita, ducimus sequi, non vel totam ab.
66+
Libero cumque eos assumenda dolorem officia, expedita sint dolorum
67+
itaque!
68+
</p>
69+
</section>
70+
<section>
71+
<h1>Title 6</h1>
72+
<p>
73+
Deserunt perspiciatis excepturi ipsum consequatur aperiam quod veniam
74+
distinctio doloribus. Velit, dignissimos sapiente error qui fugit,
75+
ipsam ipsa cupiditate, illum eos expedita odio nesciunt omnis tenetur.
76+
Officiis molestias aliquam quos!
77+
</p>
78+
</section>
79+
</main>
80+
<footer>&copy;2022 Class Kiwi</footer>
81+
</body>
82+
</html>

‎Code/matthew/html_css/lectures/7_responsive_design/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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>Responsive Design</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Class Kiwi</h1>
13+
<div class="links">
14+
<a href="">Home</a>
15+
<a href="">About</a>
16+
<a href="">Market Place</a>
17+
<a href="">Login</a>
18+
</div>
19+
</header>
20+
<div class="hero">
21+
<img src="https://picsum.photos/1000/1000" alt="" />
22+
</div>
23+
<main>
24+
<section>
25+
<h1>Title 1</h1>
26+
<p>
27+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil earum
28+
rerum porro ducimus, rem dolorum, nisi qui possimus, assumenda
29+
quisquam ipsum aliquam nostrum velit exercitationem harum similique.
30+
Dolorem, nostrum sequi.
31+
</p>
32+
</section>
33+
<section>
34+
<h1>Title 2</h1>
35+
<p>
36+
Architecto corrupti, veritatis ullam facilis odit nihil, deleniti
37+
soluta accusantium, corporis iste dolore! A itaque deleniti
38+
dignissimos cum, consequuntur natus aliquam nemo ex aut non obcaecati
39+
ipsum perferendis reiciendis exercitationem.
40+
</p>
41+
</section>
42+
<section>
43+
<h1>Title 3</h1>
44+
<p>
45+
Pariatur voluptas ratione illo asperiores ad, non fugiat. Harum, saepe
46+
veniam. Facere provident reiciendis odit aliquam repudiandae eligendi.
47+
Ipsa suscipit delectus deleniti officiis quod deserunt asperiores
48+
blanditiis amet corrupti quaerat!
49+
</p>
50+
</section>
51+
<section>
52+
<h1>Title 4</h1>
53+
<p>
54+
Culpa quisquam, eos sapiente, aliquid fuga dolorem repudiandae totam,
55+
in molestias iste itaque ipsa! Quod adipisci possimus, natus sunt rem
56+
voluptate odio obcaecati sit nihil suscipit nam harum. Nostrum, rerum.
57+
</p>
58+
</section>
59+
<section>
60+
<h1>Title 5</h1>
61+
<p>
62+
Qui odio aspernatur vero voluptatum, similique minus blanditiis et
63+
cupiditate autem quia atque expedita, ducimus sequi, non vel totam ab.
64+
Libero cumque eos assumenda dolorem officia, expedita sint dolorum
65+
itaque!
66+
</p>
67+
</section>
68+
<section>
69+
<h1>Title 6</h1>
70+
<p>
71+
Deserunt perspiciatis excepturi ipsum consequatur aperiam quod veniam
72+
distinctio doloribus. Velit, dignissimos sapiente error qui fugit,
73+
ipsam ipsa cupiditate, illum eos expedita odio nesciunt omnis tenetur.
74+
Officiis molestias aliquam quos!
75+
</p>
76+
</section>
77+
</main>
78+
<footer>&copy;2022 Class Kiwi</footer>
79+
</body>
80+
</html>

‎Code/matthew/html_css/lectures/7_responsive_design/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
:root {
2+
/* font-size: 20px; */
3+
}
4+
body {
5+
font-size: 20px;
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
}
10+
11+
body > * {
12+
/* border: 2px solid red; */
13+
/* margin: 4px; */
14+
}
15+
16+
17+
h1 {
18+
text-align: center;
19+
}
20+
21+
.links {
22+
23+
display: flex;
24+
flex-direction: column;
25+
}
26+
27+
.links > a{
28+
border: 1px solid black;
29+
background-color: rgb(149, 212, 231);
30+
margin: .5em .25em;
31+
box-shadow: inset 2px 2px 6px 0 rgba(0, 0, 0, 0.281);
32+
padding: .25em 0;
33+
text-align: center;
34+
text-decoration: none;
35+
}
36+
37+
img {
38+
width: 100%;
39+
margin-bottom: 1.5em;
40+
41+
}
42+
43+
main {
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
}
48+
section {
49+
border: 1px solid black;
50+
margin-bottom: 1em;
51+
max-width: 54ch;
52+
align-items: center;
53+
54+
}
55+
section > h1 {
56+
text-decoration: underline;
57+
}
58+
59+
section p {
60+
text-align: center;
61+
}
62+
63+
/* tablet styles */
64+
@media screen and (min-width: 768px) {
65+
66+
body {
67+
/* background-color: grey; */
68+
}
69+
.links {
70+
flex-direction: row;
71+
justify-content: space-evenly;
72+
}
73+
74+
.hero {
75+
display: flex;
76+
justify-content: center;
77+
}
78+
img {
79+
width: 75%;
80+
}
81+
}
82+
83+
/* desktop styles */
84+
@media screen and (min-width:1440px) {
85+
header {
86+
display: flex;
87+
justify-content: space-between;
88+
align-items: center;
89+
}
90+
91+
.links {
92+
display: block;
93+
}
94+
95+
img {
96+
max-width: 900px;
97+
}
98+
main {
99+
flex-direction: row;
100+
flex-wrap: wrap;
101+
justify-content: center;
102+
}
103+
section {
104+
margin: 1em;
105+
}
106+
}

0 commit comments

Comments
 (0)