Skip to content

Commit 457922f

Browse files
lnnchaulnnchau
committed
complete challenge jonasschmedtmann#2 
1 parent d744e3f commit 457922f

File tree

3 files changed

+211
-139
lines changed

3 files changed

+211
-139
lines changed

‎starter/03-CSS-Fundamentals/challenge.style.css‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
16
body {
27
font-family: sans-serif;
38
}
49

510
/* PRODUCT */
611
.product-info {
7-
border: 5px solid black;
12+
border: 4px solid black;
13+
width: 825px;
14+
margin: 50px auto;
815
}
916

1017
.product-name {
1118
font-size: 20px;
1219
text-transform: uppercase;
1320
text-align: center;
21+
background-color: #f7f7f7;
22+
padding: 10px 40px;
1423
}
1524

1625
/* PRODUCT INFORMATION */
@@ -24,6 +33,7 @@ body {
2433
color: grey;
2534
font-weight: bold;
2635
font-size: 12px;
36+
margin-bottom: 20px;
2737
}
2838

2939
/* MUST SPECIFY ALL FOUR STATES */
@@ -40,22 +50,36 @@ body {
4050
/* PRODUCT DETAILS */
4151
.product-details-title {
4252
text-transform: uppercase;
53+
margin-top: 20px;
54+
margin-bottom: 15px;
4355
}
4456

4557
.product-details {
4658
list-style: square;
59+
margin-left: 20px;
60+
}
61+
62+
.product-details li {
63+
margin-bottom: 10px;
4764
}
4865

4966
/* ADD TO CARD BUTTON */
5067
.add-to-card-btn {
68+
font-size: 20px;
69+
width: 100%;
70+
padding: 10px 40px;
71+
5172
color: white;
5273
background-color: black;
5374
text-transform: uppercase;
5475
cursor: pointer;
76+
77+
border: none;
78+
border-top: 4px solid black;
5579
}
5680

5781
.add-to-card-btn:hover {
5882
background-color: white;
5983
color: black;
60-
border: none;
84+
/* border: none; */
6185
}

‎starter/03-CSS-Fundamentals/index.html‎

Lines changed: 133 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -16,136 +16,144 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

19-
<header class="main-header">
20-
<h1>📘 The Code Magazine</h1>
21-
22-
<nav>
23-
<a href="blog.html">Blog</a>
24-
<a href="#">Challenges</a>
25-
<a href="#">Flexbox</a>
26-
<a href="#">CSS Grid</a>
27-
</nav>
28-
</header>
29-
30-
<article>
31-
<header>
32-
<h2>The Basic Language of the Web: HTML</h2>
33-
34-
<img
35-
src="img/laura-jones.jpg"
36-
alt="Headshot of Laura Jones"
37-
height="50"
38-
width="50"
39-
/>
40-
41-
<p id="author">
42-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
43-
</p>
44-
45-
<img
46-
src="img/post-img.jpg"
47-
alt="HTML code on a screen"
48-
width="500"
49-
height="200"
50-
/>
19+
<div class="container">
20+
<header class="main-header">
21+
<h1>📘 The Code Magazine</h1>
22+
23+
<nav>
24+
<a href="blog.html">Blog</a>
25+
<a href="#">Challenges</a>
26+
<a href="#">Flexbox</a>
27+
<a href="#">CSS Grid</a>
28+
</nav>
5129
</header>
5230

53-
<p>
54-
All modern websites and web applications are built using three
55-
<em>fundamental</em>
56-
technologies: HTML, CSS and JavaScript. These are the languages of the
57-
web.
58-
</p>
59-
60-
<p>
61-
In this post, let's focus on HTML. We will learn what HTML is all about,
62-
and why you too should learn it.
63-
</p>
64-
65-
<h3>What is HTML?</h3>
66-
<p>
67-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
68-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
69-
language that web developers use to structure and describe the content
70-
of a webpage (not a programming language).
71-
</p>
72-
<p>
73-
HTML consists of elements that describe different types of content:
74-
paragraphs, links, headings, images, video, etc. Web browsers understand
75-
HTML and render HTML code as websites.
76-
</p>
77-
<p>In HTML, each element is made up of 3 parts:</p>
78-
79-
<ol>
80-
<li>The opening tag</li>
81-
<li>The closing tag</li>
82-
<li>The actual element</li>
83-
</ol>
84-
85-
<p>
86-
You can learn more at
87-
<a
88-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
89-
target="_blank"
90-
>MDN Web Docs</a
91-
>.
92-
</p>
93-
94-
<h3>Why should you learn HTML?</h3>
95-
96-
<p>
97-
There are countless reasons for learning the fundamental language of the
98-
web. Here are 5 of them:
99-
</p>
100-
101-
<ul>
102-
<li>To be able to use the fundamental web dev language</li>
103-
<li>
104-
To hand-craft beautiful websites instead of relying on tools like
105-
Worpress or Wix
106-
</li>
107-
<li>To build web applications</li>
108-
<li>To impress friends</li>
109-
<li>To have fun 😃</li>
110-
</ul>
111-
112-
<p>Hopefully you learned something new here. See you next time!</p>
113-
</article>
114-
115-
<aside>
116-
<h4>Related posts</h4>
117-
118-
<ul class="related">
119-
<li>
31+
<article>
32+
<header class="post-header">
33+
<h2>The Basic Language of the Web: HTML</h2>
34+
12035
<img
121-
src="img/related-1.jpg"
122-
alt="Person programming"
123-
width="75"
124-
width="75"
36+
src="img/laura-jones.jpg"
37+
alt="Headshot of Laura Jones"
38+
height="50"
39+
width="50"
12540
/>
126-
<a href="#">How to Learn Web Development</a>
127-
<p class="related-author">By Jonas Schmedtmann</p>
128-
</li>
129-
<li>
130-
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
131-
<a href="#">The Unknown Powers of CSS</a>
132-
<p class="related-author">By Jim Dillon</p>
133-
</li>
134-
<li>
41+
42+
<p id="author">
43+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
44+
</p>
45+
13546
<img
136-
src="img/related-3.jpg"
137-
alt="JavaScript code on a screen"
138-
width="75"
139-
height="75"
47+
class="post-img"
48+
src="img/post-img.jpg"
49+
alt="HTML code on a screen"
50+
width="500"
51+
height="200"
14052
/>
141-
<a href="#">Why JavaScript is Awesome</a>
142-
<p class="related-author">By Matilda</p>
143-
</li>
144-
</ul>
145-
</aside>
146-
147-
<footer>
148-
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
149-
</footer>
53+
</header>
54+
55+
<p>
56+
All modern websites and web applications are built using three
57+
<em>fundamental</em>
58+
technologies: HTML, CSS and JavaScript. These are the languages of the
59+
web.
60+
</p>
61+
62+
<p>
63+
In this post, let's focus on HTML. We will learn what HTML is all
64+
about, and why you too should learn it.
65+
</p>
66+
67+
<h3>What is HTML?</h3>
68+
<p>
69+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
70+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
71+
language that web developers use to structure and describe the content
72+
of a webpage (not a programming language).
73+
</p>
74+
<p>
75+
HTML consists of elements that describe different types of content:
76+
paragraphs, links, headings, images, video, etc. Web browsers
77+
understand HTML and render HTML code as websites.
78+
</p>
79+
<p>In HTML, each element is made up of 3 parts:</p>
80+
81+
<ol>
82+
<li>The opening tag</li>
83+
<li>The closing tag</li>
84+
<li>The actual element</li>
85+
</ol>
86+
87+
<p>
88+
You can learn more at
89+
<a
90+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
91+
target="_blank"
92+
>MDN Web Docs</a
93+
>.
94+
</p>
95+
96+
<h3>Why should you learn HTML?</h3>
97+
98+
<p>
99+
There are countless reasons for learning the fundamental language of
100+
the web. Here are 5 of them:
101+
</p>
102+
103+
<ul>
104+
<li>To be able to use the fundamental web dev language</li>
105+
<li>
106+
To hand-craft beautiful websites instead of relying on tools like
107+
Worpress or Wix
108+
</li>
109+
<li>To build web applications</li>
110+
<li>To impress friends</li>
111+
<li>To have fun 😃</li>
112+
</ul>
113+
114+
<p>Hopefully you learned something new here. See you next time!</p>
115+
</article>
116+
117+
<aside>
118+
<h4>Related posts</h4>
119+
120+
<ul class="related">
121+
<li>
122+
<img
123+
src="img/related-1.jpg"
124+
alt="Person programming"
125+
width="75"
126+
width="75"
127+
/>
128+
<a href="#">How to Learn Web Development</a>
129+
<p class="related-author">By Jonas Schmedtmann</p>
130+
</li>
131+
<li>
132+
<img
133+
src="img/related-2.jpg"
134+
alt="Lightning"
135+
width="75"
136+
heigth="75"
137+
/>
138+
<a href="#">The Unknown Powers of CSS</a>
139+
<p class="related-author">By Jim Dillon</p>
140+
</li>
141+
<li>
142+
<img
143+
src="img/related-3.jpg"
144+
alt="JavaScript code on a screen"
145+
width="75"
146+
height="75"
147+
/>
148+
<a href="#">Why JavaScript is Awesome</a>
149+
<p class="related-author">By Matilda</p>
150+
</li>
151+
</ul>
152+
</aside>
153+
154+
<footer>
155+
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
156+
</footer>
157+
</div>
150158
</body>
151159
</html>

0 commit comments

Comments
 (0)