Skip to content

Commit 60996c6

Browse files
AbernachyAbernachy
committed
started challenge 3
1 parent a713ee0 commit 60996c6

File tree

4 files changed

+180
-124
lines changed

4 files changed

+180
-124
lines changed

‎projectfolder/css/shopStyle.css

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@ p {
5353
text-transform: uppercase;
5454
font-weight: bold;
5555
color: #777;
56-
float: right;
56+
/* float: right; */
5757
}
5858

5959
.price {
6060
font-size: 25px;
6161
margin-bottom: 0px;
62-
float: left;
62+
/* float: left; */
6363
}
6464

6565
/* Link styling */
@@ -175,23 +175,27 @@ nav {
175175

176176
/* Floats */
177177
.product-image {
178-
float: left;
178+
/* float: left; */
179179
margin-right: 40px;
180180
}
181181

182182
.product-details-container {
183183
/* background-color: yellow; */
184-
width: 243px;
184+
/* width: 243px; */
185185
height: 250px;
186-
float: left;
186+
/* float: left; */
187187
padding: 0px 40px;
188188
/* margin-top: 20px; */
189189
}
190190

191+
.shippipng-container {
192+
display: flex;
193+
}
191194
.product-info-container {
192-
width: 243px;
195+
/* width: 243px; */
193196
/* background-color: blue; */
194-
float: left;
197+
/* float: left; */
198+
195199
height: 250px;
196200
margin-right: 40px;
197201
/* margin-top: 20px; */

‎projectfolder/css/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,8 +302,48 @@ footer {
302302
.author-box {
303303
display: flex;
304304
align-items: center;
305+
margin-bottom: 15px;
305306
}
306307
.author {
307308
margin-bottom: 0px;
308309
margin-left: 15px;
309310
}
311+
312+
.related-post {
313+
display: flex;
314+
align-items: center;
315+
gap: 20px;
316+
margin-bottom: 30px;
317+
}
318+
319+
.related-link:link {
320+
font-size: 17px;
321+
font-weight: bold;
322+
font-style: normal;
323+
margin-bottom: 5px;
324+
display: block;
325+
}
326+
327+
.related-author {
328+
margin-bottom: 0px;
329+
font-size: 14px;
330+
font-weight: normal;
331+
font-style: italic;
332+
}
333+
334+
.row {
335+
display: flex;
336+
align-items: flex-start;
337+
gap: 75px;
338+
margin-bottom: 60px;
339+
}
340+
341+
article {
342+
/* flex: 0 0 825px; */
343+
flex: 1;
344+
margin-bottom: 0px;
345+
}
346+
347+
aside {
348+
flex: 0 0 300px;
349+
}

‎projectfolder/index.html

Lines changed: 125 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -33,129 +33,139 @@ <h1>📘 The Code Magazine</h1>
3333
<button>❤Like</button>
3434
</header>
3535

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

40-
<div class="author-box">
4156
<img
42-
src="./imgs/laura-jones.jpg"
43-
alt="the person who wrote this"
44-
width="50"
45-
height="50"
46-
class="author-img"
57+
class="post-img"
58+
src="./imgs/post-img.jpg"
59+
alt="This is the voice of Satan"
60+
width="500"
61+
height="200"
4762
/>
48-
<p id="author" class="author">
49-
Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027
50-
</p>
51-
<br />
52-
</div>
53-
54-
<img
55-
class="post-img"
56-
src="./imgs/post-img.jpg"
57-
alt="This is the voice of Satan"
58-
width="500"
59-
height="200"
60-
/>
61-
</header>
62-
<p>
63-
All modern websites and web applications are built using three
64-
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
65-
the languages of the web.
66-
</p>
67-
<p>
68-
In this post, let's focus on HTML. We will learn what HTML is all
69-
about, and why you too should learn it.
70-
</p>
71-
<h3>What is HTML?</h3>
72-
<p>
73-
<strong>HTML </strong> stands for
74-
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
75-
<strong>L</strong>anguage. It's a markup language that web developers
76-
use to structure and describe the content of a webpage (not a
77-
programming language).
78-
</p>
79-
<p>
80-
HTML consists of elements that describe different types of content:
81-
paragraphs, links, headings, images, video, etc. Web browsers
82-
understand HTML and render HTML code as websites.
83-
</p>
84-
<p>In HTML, each element is made up of 3 parts:</p>
85-
<ol>
86-
<li class="first-li">The opening tag</li>
87-
<li>The closing tag</li>
88-
<li>The actual element</li>
89-
<li>You can learn more at the MDN Web Docs.</li>
90-
</ol>
63+
</header>
64+
<p>
65+
All modern websites and web applications are built using three
66+
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These
67+
are the languages of the web.
68+
</p>
69+
<p>
70+
In this post, let's focus on HTML. We will learn what HTML is all
71+
about, and why you too should learn it.
72+
</p>
73+
<h3>What is HTML?</h3>
74+
<p>
75+
<strong>HTML </strong> stands for
76+
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
77+
<strong>L</strong>anguage. It's a markup language that web
78+
developers use to structure and describe the content of a webpage
79+
(not a programming language).
80+
</p>
81+
<p>
82+
HTML consists of elements that describe different types of content:
83+
paragraphs, links, headings, images, video, etc. Web browsers
84+
understand HTML and render HTML code as websites.
85+
</p>
86+
<p>In HTML, each element is made up of 3 parts:</p>
87+
<ol>
88+
<li class="first-li">The opening tag</li>
89+
<li>The closing tag</li>
90+
<li>The actual element</li>
91+
<li>You can learn more at the MDN Web Docs.</li>
92+
</ol>
9193

92-
<p>
93-
You can learn more at the
94-
<a
95-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
96-
target="_blank"
97-
>MDN Web Docs</a
98-
>
99-
</p>
94+
<p>
95+
You can learn more at the
96+
<a
97+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
98+
target="_blank"
99+
>MDN Web Docs</a
100+
>
101+
</p>
100102

101-
<h3>Why should you learn HTML</h3>
103+
<h3>Why should you learn HTML</h3>
102104

103-
<p>
104-
There are countless reasons for learning the fundamental language of
105-
the web. Here are 5 of them:
106-
</p>
105+
<p>
106+
There are countless reasons for learning the fundamental language of
107+
the web. Here are 5 of them:
108+
</p>
107109

108-
<ul>
109-
<li class="first-li">
110-
To be able to use the fundamental web dev language
111-
</li>
112-
<li>
113-
To hand-craft beautiful websites instead of relying on tools like
114-
Worpress or Wix
115-
</li>
116-
<li>To build web applications</li>
117-
<li>To impress friends To have fun 😃</li>
118-
</ul>
119-
<p>Hopefully you learned something new here. See you next time!</p>
120-
</article>
121-
<!--- Aside element is used for secondary information designed to compliment information-->
122-
<aside class="related-aside">
123-
<h4><strong>Related Posts</strong></h4>
124-
<ul class="related-list">
125-
<li class="related-post">
126-
<img
127-
src="imgs/related-1.jpg"
128-
alt="How to Learn Web Development"
129-
height="50"
130-
width="50"
131-
/>
132-
<a href="#" class="related-links"> How to Learn Web Development</a>
133-
<p class="related-author">By Jonas Schmeltmann</p>
134-
</li>
135-
136-
<li clas="related-post">
137-
<img
138-
src="imgs/related-2.jpg"
139-
alt="Unknown Power of CSS"
140-
height="50"
141-
width="50"
142-
/>
143-
<a href="#" class="related-links"> The Uknown Power of CSS</a>
144-
<p class="related-author">By Jonas Schmeltmann</p>
145-
</li>
146-
<li class="related-post">
147-
<img
148-
src="imgs/related-3.jpg"
149-
alt="Why Javascript is Awsome"
150-
height="50"
151-
width="50"
152-
/>
153-
<a href="#" class="related-links"> Why Javascript is Awsome</a>
154-
<p class="related-author">By Jonas Schmeltmann</p>
155-
</li>
156-
</ul>
157-
</aside>
110+
<ul>
111+
<li class="first-li">
112+
To be able to use the fundamental web dev language
113+
</li>
114+
<li>
115+
To hand-craft beautiful websites instead of relying on tools like
116+
Worpress or Wix
117+
</li>
118+
<li>To build web applications</li>
119+
<li>To impress friends To have fun 😃</li>
120+
</ul>
121+
<p>Hopefully you learned something new here. See you next time!</p>
122+
</article>
123+
<!--- Aside element is used for secondary information designed to compliment information-->
124+
<aside class="related-aside">
125+
<h4><strong>Related Posts</strong></h4>
126+
<ul class="related-list">
127+
<li class="related-post">
128+
<img
129+
src="imgs/related-1.jpg"
130+
alt="How to Learn Web Development"
131+
height="50"
132+
width="50"
133+
/>
134+
<div>
135+
<a href="#" class="related-links">
136+
How to Learn Web Development</a
137+
>
138+
<p class="related-author">By Jonas Schmeltmann</p>
139+
</div>
140+
</li>
158141

142+
<li class="related-post">
143+
<img
144+
src="imgs/related-2.jpg"
145+
alt="Unknown Power of CSS"
146+
height="50"
147+
width="50"
148+
/>
149+
<div>
150+
<a href="#" class="related-links"> The Uknown Power of CSS</a>
151+
<p class="related-author">By Jonas Schmeltmann</p>
152+
</div>
153+
</li>
154+
<li class="related-post">
155+
<img
156+
src="imgs/related-3.jpg"
157+
alt="Why Javascript is Awsome"
158+
height="50"
159+
width="50"
160+
/>
161+
<div>
162+
<a href="#" class="related-links"> Why Javascript is Awsome</a>
163+
<p class="related-author">By Jonas Schmeltmann</p>
164+
</div>
165+
</li>
166+
</ul>
167+
</aside>
168+
</div>
159169
<footer>
160170
<p id="copyright" class="copyright text">
161171
Copyright &copy; 2017 by The Code Magazine

‎projectfolder/pages/challenges.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@ <h2 class="product-name">Converse Chuck Taylor All Start Low Top</h2>
2121
class="product-image"
2222
/>
2323
<div class="product-info-container">
24-
<p class="price"><strong>$65.00</strong></p>
25-
<p class="shipping">Free Shipping</p>
24+
<div class="shipping-container">
25+
<p class="price"><strong>$65.00</strong></p>
26+
<p class="shipping">Free Shipping</p>
27+
</div>
2628
<p class="product-description">
2729
Ready to dress up or down, these classic convo Chucks are an
2830
everyday wardrobe staple

0 commit comments

Comments
 (0)