Skip to content

Commit b2a90f7

Browse files
AbernachyAbernachy
authored
Merge pull request #8 from Aber-Learningforks/CSS/layouts
Css/layouts
2 parents f7e5f89 + 0989fdf commit b2a90f7

File tree

4 files changed

+234
-54
lines changed

4 files changed

+234
-54
lines changed

‎projectfolder/css/shopStyle.css

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
* {
22
margin: 0px;
33
padding: 0px;
4+
box-sizing: content-box;
45
}
56

67
body {
@@ -11,10 +12,13 @@ body {
1112
p {
1213
margin-bottom: 20px;
1314
}
15+
.product-description {
16+
clear: both;
17+
}
1418

1519
.product-container {
1620
border: black 4px solid;
17-
width: 825px;
21+
width: 900px;
1822
margin: 25px auto;
1923
position: relative;
2024
}
@@ -34,22 +38,28 @@ p {
3438
color: white;
3539
letter-spacing: 2px;
3640
padding: 5px 5px;
41+
font-size: 12px;
42+
width: 80px;
43+
text-align: center;
3744
}
3845

3946
.product-details {
4047
text-transform: uppercase;
4148
margin-bottom: 20px;
49+
font-size: 16px;
4250
}
4351

4452
.shipping {
4553
text-transform: uppercase;
4654
font-weight: bold;
4755
color: #777;
56+
float: right;
4857
}
4958

5059
.price {
5160
font-size: 25px;
5261
margin-bottom: 0px;
62+
float: left;
5363
}
5464

5565
/* Link styling */
@@ -117,11 +127,72 @@ nav {
117127
justify-content: center;
118128
}
119129

120-
.colored-boxes li {
121-
display: block-inline;
130+
.colored-boxes > div {
131+
display: inline-block;
132+
width: 15px;
133+
height: 15px;
134+
margin-right: 5px;
135+
margin-bottom: 10px;
122136
}
123137

124138
.black {
125139
background-color: black;
126140
border: solid 5px black;
141+
width: 5px;
142+
height: 5px;
143+
}
144+
.blue {
145+
background-color: blue;
146+
border: solid 5px blue;
147+
width: 5px;
148+
height: 5px;
149+
}
150+
.red {
151+
background-color: red;
152+
border: solid 5px red;
153+
width: 5px;
154+
height: 5px;
155+
}
156+
157+
.yellow {
158+
background-color: yellow;
159+
border: solid 5px yellow;
160+
width: 5px;
161+
height: 5px;
162+
}
163+
.green {
164+
background-color: #00d500;
165+
border: solid 5px #00d500;
166+
width: 5px;
167+
height: 5px;
168+
}
169+
.brown {
170+
background-color: brown;
171+
border: solid 5px brown;
172+
width: 5px;
173+
height: 5px;
174+
}
175+
176+
/* Floats */
177+
.product-image {
178+
float: left;
179+
margin-right: 40px;
180+
}
181+
182+
.product-details-container {
183+
/* background-color: yellow; */
184+
width: 243px;
185+
height: 250px;
186+
float: left;
187+
padding: 0px 40px;
188+
/* margin-top: 20px; */
189+
}
190+
191+
.product-info-container {
192+
width: 243px;
193+
/* background-color: blue; */
194+
float: left;
195+
height: 250px;
196+
margin-right: 40px;
197+
/* margin-top: 20px; */
127198
}

‎projectfolder/css/style.css

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* {
33
margin: 0;
44
padding: 0;
5+
box-sizing: border-box;
56
}
67

78
body {
@@ -12,7 +13,7 @@ body {
1213
}
1314

1415
.container {
15-
width: 800px;
16+
width: 1200px;
1617
/* margin-left: auto;
1718
margin-right: auto; */
1819
margin: 0 auto;
@@ -32,7 +33,7 @@ article {
3233
padding-right: 40px; */
3334
padding: 20px 40px;
3435
margin-bottom: 60px;
35-
height: 80px;
36+
/* height: 80px; */
3637
}
3738

3839
.post-header {
@@ -43,10 +44,7 @@ aside {
4344
background-color: #f7f7f7;
4445
border-top: 5px solid #1098ad;
4546
border-bottom: 5px solid #1098ad;
46-
/* padding-top: 50px;
47-
padding-bottom: 50px; */
48-
padding: 50px 0;
49-
width: 500px;
47+
padding: 50px 40px;
5048
}
5149

5250
/* SMALLER ELEMENTS */
@@ -78,6 +76,7 @@ h4 {
7876
font-size: 20px;
7977
text-transform: uppercase;
8078
text-align: center;
79+
margin-bottom: 30px;
8180
}
8281
p {
8382
font-size: 22px;
@@ -118,8 +117,10 @@ li {
118117
font-weight: bold;
119118
}
120119

121-
.related-list p {
120+
.related-list p,
121+
li {
122122
list-style: none;
123+
margin: none;
123124
}
124125

125126
/* .first-li {
@@ -236,10 +237,6 @@ h1::first-letter {
236237
margin-right: 5px;
237238
}
238239

239-
h3 + p {
240-
/* color: red; */
241-
}
242-
243240
h2::after {
244241
content: 'TOP';
245242
background-color: #ffe70e;
@@ -252,3 +249,46 @@ h2::after {
252249
top: -10px;
253250
right: -25px;
254251
}
252+
253+
/* Floats */
254+
255+
.author-img {
256+
float: left;
257+
margin-bottom: 20px;
258+
}
259+
260+
.author {
261+
float: left;
262+
margin-top: 10px;
263+
margin-left: 20px;
264+
}
265+
266+
h1 {
267+
float: left;
268+
}
269+
270+
nav {
271+
float: right;
272+
}
273+
274+
.clear {
275+
clear: both;
276+
}
277+
278+
.clearfix::after {
279+
clear: both;
280+
content: '';
281+
display: block;
282+
}
283+
284+
article {
285+
width: 825px;
286+
float: left;
287+
}
288+
aside {
289+
width: 300px;
290+
float: right;
291+
}
292+
footer {
293+
clear: both;
294+
}

‎projectfolder/index.html

Lines changed: 72 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<body>
1616
<!-- Comment Block, this his how you do comments in html-->
1717
<div class="container">
18-
<header class="main-header">
18+
<header class="main-header clearfix">
1919
<!-- We can do inline CSS style like below
2020
<h1 style="color: blue">
2121
But we dont want do this
@@ -28,32 +28,55 @@ <h1>📘 The Code Magazine</h1>
2828
<a href="#">Flexbox</a>
2929
<a href="#">CSS Grid </a>
3030
</nav>
31+
<div class="clear"></div>
32+
3133
<button>❤Like</button>
3234
</header>
3335

3436
<article>
3537
<header class="post-header">
3638
<h2>The Basic Langauge of The Web: HTML</h2>
37-
<img src="./imgs/laura-jones.jpg" alt="the person who wrote this" width="50" height="50" />
38-
<p id="author">Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027</p>
39+
<img
40+
src="./imgs/laura-jones.jpg"
41+
alt="the person who wrote this"
42+
width="50"
43+
height="50"
44+
class="author-img"
45+
/>
46+
<p id="author" class="author">
47+
Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027
48+
</p>
3949
<br />
4050

41-
<img class="post-img" src="./imgs/post-img.jpg" alt="This is the voice of Satan" width="500" height="200" />
51+
<img
52+
class="post-img"
53+
src="./imgs/post-img.jpg"
54+
alt="This is the voice of Satan"
55+
width="500"
56+
height="200"
57+
/>
4258
</header>
4359
<p>
44-
All modern websites and web applications are built using three <em>fundamental</em> technologies: HTML, CSS
45-
and JavaScript. These are the languages of the web.
60+
All modern websites and web applications are built using three
61+
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
62+
the languages of the web.
63+
</p>
64+
<p>
65+
In this post, let's focus on HTML. We will learn what HTML is all
66+
about, and why you too should learn it.
4667
</p>
47-
<p>In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.</p>
4868
<h3>What is HTML?</h3>
4969
<p>
50-
<strong>HTML </strong> stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
51-
<strong>L</strong>anguage. It's a markup language that web developers use to structure and describe the
52-
content of a webpage (not a programming language).
70+
<strong>HTML </strong> stands for
71+
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
72+
<strong>L</strong>anguage. It's a markup language that web developers
73+
use to structure and describe the content of a webpage (not a
74+
programming language).
5375
</p>
5476
<p>
55-
HTML consists of elements that describe different types of content: paragraphs, links, headings, images,
56-
video, etc. Web browsers understand HTML and render HTML code as websites.
77+
HTML consists of elements that describe different types of content:
78+
paragraphs, links, headings, images, video, etc. Web browsers
79+
understand HTML and render HTML code as websites.
5780
</p>
5881
<p>In HTML, each element is made up of 3 parts:</p>
5982
<ol>
@@ -65,16 +88,28 @@ <h3>What is HTML?</h3>
6588

6689
<p>
6790
You can learn more at the
68-
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>
91+
<a
92+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
93+
target="_blank"
94+
>MDN Web Docs</a
95+
>
6996
</p>
7097

7198
<h3>Why should you learn HTML</h3>
7299

73-
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
100+
<p>
101+
There are countless reasons for learning the fundamental language of
102+
the web. Here are 5 of them:
103+
</p>
74104

75105
<ul>
76-
<li class="first-li">To be able to use the fundamental web dev language</li>
77-
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
106+
<li class="first-li">
107+
To be able to use the fundamental web dev language
108+
</li>
109+
<li>
110+
To hand-craft beautiful websites instead of relying on tools like
111+
Worpress or Wix
112+
</li>
78113
<li>To build web applications</li>
79114
<li>To impress friends To have fun 😃</li>
80115
</ul>
@@ -85,26 +120,43 @@ <h3>Why should you learn HTML</h3>
85120
<h4><strong>Related Posts</strong></h4>
86121
<ul class="related-list">
87122
<li>
88-
<img src="imgs/related-1.jpg" alt="How to Learn Web Development" height="50" width="50" />
123+
<img
124+
src="imgs/related-1.jpg"
125+
alt="How to Learn Web Development"
126+
height="50"
127+
width="50"
128+
/>
89129
<a href="#"> How to Learn Web Development</a>
90130
<p class="related-author">By Jonas Schmeltmann</p>
91131
</li>
92132

93133
<li>
94-
<img src="imgs/related-2.jpg" alt="Unknown Power of CSS" height="50" width="50" />
134+
<img
135+
src="imgs/related-2.jpg"
136+
alt="Unknown Power of CSS"
137+
height="50"
138+
width="50"
139+
/>
95140
<a href="#"> The Uknown Power of CSS</a>
96141
<p class="related-author">By Jonas Schmeltmann</p>
97142
</li>
98143
<li>
99-
<img src="imgs/related-3.jpg" alt="Why Javascript is Awsome" height="50" width="50" />
144+
<img
145+
src="imgs/related-3.jpg"
146+
alt="Why Javascript is Awsome"
147+
height="50"
148+
width="50"
149+
/>
100150
<a href="#"> Why Javascript is Awsome</a>
101151
<p class="related-author">By Jonas Schmeltmann</p>
102152
</li>
103153
</ul>
104154
</aside>
105155

106156
<footer>
107-
<p id="copyright" class="copyright text">Copyright &copy; 2017 by The Code Magazine</p>
157+
<p id="copyright" class="copyright text">
158+
Copyright &copy; 2017 by The Code Magazine
159+
</p>
108160
</footer>
109161
</div>
110162
</body>

0 commit comments

Comments
 (0)