Skip to content

Commit fd9d19f

Browse files
diyidundiyidun
committed
Section pricing
1 parent 5cd2a81 commit fd9d19f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+5163
-804
lines changed

‎final/04-CSS-Layouts/index.html

Lines changed: 135 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link href="style.css" rel="stylesheet" />
63

7-
<title>The Basic Language of the Web: HTML</title>
8-
</head>
4+
<head>
5+
<meta charset="UTF-8">
6+
<link href="style.css" rel="stylesheet">
97

10-
<body>
11-
<!--
8+
<title>The Basic Language of the Web: HTML</title>
9+
</head>
10+
11+
<body>
12+
<!--
1213
<h1>The Basic Language of the Web: HTML</h1>
1314
<h2>The Basic Language of the Web: HTML</h2>
1415
<h3>The Basic Language of the Web: HTML</h3>
@@ -17,164 +18,133 @@ <h5>The Basic Language of the Web: HTML</h5>
1718
<h6>The Basic Language of the Web: HTML</h6>
1819
-->
1920

20-
<div class="container">
21-
<header class="main-header clearfix">
22-
<h1>📘 The Code Magazine</h1>
23-
24-
<nav>
25-
<!-- <strong>This is the navigation</strong> -->
26-
<a href="blog.html">Blog</a>
27-
<a href="#">Challenges</a>
28-
<a href="flexbox.html">Flexbox</a>
29-
<a href="css-grid.html">CSS Grid</a>
30-
</nav>
31-
32-
<!-- <div class="clear"></div> -->
21+
<div class="container">
22+
<header class="main-header clearfix">
23+
<h1>📘 The Code Magazine</h1>
24+
25+
<nav>
26+
<!-- <strong>This is the navigation</strong> -->
27+
<a href="blog.html">Blog</a>
28+
<a href="#">Challenges</a>
29+
<a href="flexbox.html">Flexbox</a>
30+
<a href="css-grid.html">CSS Grid</a>
31+
</nav>
32+
33+
<!-- <div class="clear"></div> -->
34+
</header>
35+
36+
<!-- ONLY NECESSARY FOR FLEXBOX -->
37+
<!-- <div class="row"> -->
38+
<article>
39+
<header class="post-header">
40+
<h2>The Basic Language of the Web: HTML</h2>
41+
42+
<div class="author-box">
43+
<img src="img/laura-jones.jpg" alt="Headshot of Laura Jones" height="50" width="50" class="author-img">
44+
45+
<p id="author" class="author">
46+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
47+
</p>
48+
</div>
49+
50+
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" class="post-img">
51+
<button>❤️ Like</button>
3352
</header>
3453

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

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Document</title>
10+
</head>
11+
12+
<body>
13+
<article>
14+
<h2>Converse Chuck Taylor All Star Low Top</h2>
15+
<img src="../img/challenges.jpg" alt="Converse Shoes" width="250" height="250">
16+
17+
<p><strong>$65.00</strong></p>
18+
<p class="article-shipping">Free shipping</p>
19+
<p>Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple</p>
20+
21+
<a href="https://www.converse.com.tw/" target="_blank" class="article-info">More information &RightArrow;</a>
22+
23+
<h3>Product details</h3>
24+
<ul>
25+
<li>
26+
Lightweight, durable canvas sneaker
27+
</li>
28+
<li>
29+
Lightly padded footbed for added comfort
30+
</li>
31+
<li>
32+
Iconic Chuck Taylor ankle patch
33+
</li>
34+
</ul>
35+
<button>Add to cart</button>
36+
</article>
37+
38+
</body>
39+
40+
</html>

0 commit comments

Comments
 (0)