Skip to content

Commit 97f0ac4

Browse files
HolmesMatthewHolmesMatthew
committed
adding finished lab2
1 parent b557ce0 commit 97f0ac4

File tree

2 files changed

+127
-78
lines changed

2 files changed

+127
-78
lines changed

‎Code/matthew/html_css/labs/lab_2/index.htm‎

Lines changed: 65 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -10,61 +10,75 @@
1010
</head>
1111

1212
<body>
13-
<header>
14-
<h2><a id="top" href="">blog_name_me</a></h2>
15-
16-
<div ><a class="google" href="https://www.google.com/">Google</a></div>
17-
</header>
13+
<nav>
14+
<header>
15+
<h2><a id="logo" href="">blog_name_me</a></h2>
16+
<div ><a class="google" href="https://www.google.com/">Google</a></div>
17+
</header>
18+
19+
<aside>
20+
<a href="#top">Top</a>
21+
<!-- <a class='side' href="#introduction">Introduction</a> -->
22+
<a class='bottom' href="#footer">Bottom</a>
23+
</aside>
24+
</nav>
25+
<br id="top">
26+
<br>
27+
<br>
28+
<br>
29+
<br>
30+
<br>
31+
<br>
32+
33+
<div class="box">
34+
<summary>
35+
<h3 >Introduction</h3>
36+
<br>
37+
<p class=intro>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae, doloribus aliquam ipsum quam quaerat minus a maxime culpa quae corporis, consequatur minima quos accusantium, necessitatibus fuga assumenda quis consectetur atque.</p>
38+
</summary>
39+
</div>
1840

19-
<div class="sidebar">
41+
<br>
42+
<main>
43+
<div class="left">
44+
<img src="https://picsum.photos/200/300" alt="random picture">
45+
</div>
2046

21-
<aside>
22-
<a class='side' href="#top">Top</a>
23-
<a class='side' href="#introduction">Introduction</a>
24-
<a class='side' href="#footer">Bottom</a>
25-
</aside>
47+
<div class="blog_structure">
48+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
49+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
50+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
51+
</div>
52+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
53+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
54+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
55+
</div>
56+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
57+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
58+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
59+
</div>
60+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
61+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
62+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
63+
</div>
64+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
65+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
66+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
67+
</div>
68+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
69+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
70+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
71+
</div>
2672

27-
<div class="right">
28-
29-
<summary>
30-
<h3 id="#introduction">Introduction</h3>
31-
<br>
32-
<p class=intro>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae, doloribus aliquam ipsum quam quaerat minus a maxime culpa quae corporis, consequatur minima quos accusantium, necessitatibus fuga assumenda quis consectetur atque.</p>
33-
</summary>
73+
</div>
74+
75+
<div class="right">
76+
<img src="https://picsum.photos/200/300" alt="random picture">
77+
</div>
78+
</main>
79+
80+
3481

35-
<main>
36-
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
37-
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
38-
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
39-
</div>
40-
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
41-
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
42-
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
43-
</div>
44-
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
45-
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
46-
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
47-
</div>
48-
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
49-
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
50-
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
51-
</div>
52-
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
53-
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
54-
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
55-
</div>
56-
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
57-
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
58-
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
59-
</div>
60-
61-
</main>
62-
63-
<!--
64-
Im not sure why but the footer is only pushed to the bottom with this random div. I tried replacing it with a br but it gets pushed back up....
65-
-->
66-
</div>
67-
</div>
6882

6983

7084
<footer id="footer">

‎Code/matthew/html_css/labs/lab_2/style.css‎

Lines changed: 62 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,67 @@
11
body {
2+
margin: 0;
23
font-family: "indie Flower";
34
display: flex;
4-
flex-wrap: wrap;
5-
border: 2px dashed black;
65
flex-direction: column;
76
min-height: 100vh;
87
justify-content: space-between;
98
background-image: linear-gradient(129deg, rgba(49, 49, 49, 0.47) 0%, rgba(49, 49, 49, 0.47) 12.5%,rgba(59, 59, 59, 0.47) 12.5%, rgba(59, 59, 59, 0.47) 25%,rgba(68, 68, 68, 0.47) 25%, rgba(68, 68, 68, 0.47) 37.5%,rgba(78, 78, 78, 0.47) 37.5%, rgba(78, 78, 78, 0.47) 50%,rgba(88, 88, 88, 0.47) 50%, rgba(88, 88, 88, 0.47) 62.5%,rgba(98, 98, 98, 0.47) 62.5%, rgba(98, 98, 98, 0.47) 75%,rgba(107, 107, 107, 0.47) 75%, rgba(107, 107, 107, 0.47) 87.5%,rgba(117, 117, 117, 0.47) 87.5%, rgba(117, 117, 117, 0.47) 100%),linear-gradient(329deg, rgb(25, 25, 25) 0%, rgb(25, 25, 25) 12.5%,rgb(44, 44, 44) 12.5%, rgb(44, 44, 44) 25%,rgb(63, 63, 63) 25%, rgb(63, 63, 63) 37.5%,rgb(82, 82, 82) 37.5%, rgb(82, 82, 82) 50%,rgb(100, 100, 100) 50%, rgb(100, 100, 100) 62.5%,rgb(119, 119, 119) 62.5%, rgb(119, 119, 119) 75%,rgb(138, 138, 138) 75%, rgb(138, 138, 138) 87.5%,rgb(157, 157, 157) 87.5%, rgb(157, 157, 157) 100%);
109

10+
}
11+
12+
nav{
13+
/* border: 2px solid black; */
14+
margin: 0;
15+
padding: 0;
16+
display: flex;
17+
position: fixed;
18+
flex-wrap: wrap;
19+
justify-content: space-between;
20+
width: 100vw;
21+
22+
1123
}
1224
header {
25+
/* border: 2px solid black; */
26+
margin: 0;
1327
background-color: rgb(80, 80, 80);
14-
15-
border: 2px solid black;
28+
width: 100vw;
1629
display: flex;
1730
justify-content: space-between;
18-
height: 10vh;
19-
31+
32+
33+
2034
}
21-
22-
h2 {
35+
#logo {
36+
color: rgb(0, 0, 0);
2337
margin: 0;
2438
font-family: "permanent Marker";
2539
}
26-
27-
#top {
28-
color: rgb(0, 0, 0);
29-
}
3040
.google {
3141
color: rgb(181, 185, 189);
3242
font-size: x-large;
3343
}
34-
.sidebar {
35-
display: flex;
36-
justify-content: space-evenly;
37-
}
3844

3945
aside {
40-
/* border: 3px dashed red; */
46+
/* border: 2px solid black; */
47+
/* padding: 10px; */
48+
background-color: rgb(88, 86, 86);
4149
display: flex;
42-
flex-direction: column;
43-
height: 100vh;
44-
width: 10vw;
50+
justify-content: space-between;
51+
color: rgb(181, 185, 189);
52+
min-width: 100vw;
53+
height: 30px;
4554
}
46-
.side {
47-
color: rgb(181, 185, 189);
55+
.bottom {
56+
padding-right: 20px;
4857
}
4958

59+
.box {
60+
background-color: black;
61+
62+
}
5063
summary {
51-
/* border: 3px dashed red; */
64+
background-color: rgb(80, 80, 80);
5265
justify-content: center;
5366
display: flex;
5467
flex-wrap: wrap;
@@ -61,13 +74,26 @@ summary {
6174

6275

6376
main {
64-
/* border: 2px solid green; */
77+
6578
display: flex;
6679
flex-wrap: wrap;
67-
justify-content: space-evenly;
80+
justify-content:space-between;
6881
color: rgb(159, 179, 195);
6982
}
7083

84+
.left {
85+
width: 200px;
86+
/* border: 2px solid green; */
87+
justify-content: flex-start;
88+
}
89+
90+
.blog_structure {
91+
width: 70vw;
92+
/* border: 2px solid green; */
93+
display: flex;
94+
flex-wrap: wrap;
95+
justify-content: space-between;
96+
}
7197
.blog {
7298
text-align: center;
7399
margin: 15px;
@@ -77,8 +103,17 @@ main {
77103
background-color: rgb(80, 80, 80);
78104
}
79105

106+
.right {
107+
width: 200px;
108+
/* border: 2px solid green; */
109+
justify-content: flex-start;
110+
}
111+
80112
footer {
113+
display: flex;
81114
background-color: rgb(56, 56, 68);
82115
color: whitesmoke;
83-
text-align: center;
84-
}
116+
justify-content: center;
117+
}
118+
119+

0 commit comments

Comments
 (0)