Skip to content

Commit d6c47db

Browse files
Inna-code10Inna-code10
committed
added btn, cart, footer.css
1 parent a2fa5cd commit d6c47db

14 files changed

Lines changed: 1076 additions & 113 deletions

File tree

‎exercises/19 10/index.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<svg width="0" height="0" display="none">
10+
<symbol id="github" viewBox="0 0 24 24">
11+
<path
12+
d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.010-1.040-0.015-2.040-3.338 0.724-4.042-1.61-4.042-1.61-0.546-1.385-1.335-1.755-1.335-1.755-1.087-0.744 0.084-0.729 0.084-0.729 1.205 0.084 1.838 1.236 1.838 1.236 1.070 1.835 2.809 1.305 3.495 0.998 0.108-0.776 0.417-1.305 0.76-1.605-2.665-0.3-5.466-1.332-5.466-5.93 0-1.31 0.465-2.38 1.235-3.22-0.135-0.303-0.54-1.523 0.105-3.176 0 0 1.005-0.322 3.3 1.23 0.96-0.267 1.98-0.399 3-0.405 1.020 0.006 2.040 0.138 3 0.405 2.28-1.552 3.285-1.23 3.285-1.23 0.645 1.653 0.24 2.873 0.12 3.176 0.765 0.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92 0.42 0.36 0.81 1.096 0.81 2.22 0 1.606-0.015 2.896-0.015 3.286 0 0.315 0.21 0.69 0.825 0.57 4.801-1.574 8.236-6.074 8.236-11.369 0-6.627-5.373-12-12-12z" />
13+
</symbol>
14+
<symbol id="twitter" viewBox="0 0 24 24">
15+
<path fill="#1da1f2" style="fill: var(--color1, #1da1f2)"
16+
d="M23.954 4.569c-0.885 0.389-1.83 0.654-2.825 0.775 1.014-0.611 1.794-1.574 2.163-2.723-0.951 0.555-2.005 0.959-3.127 1.184-0.896-0.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 0.39 0.045 0.765 0.127 1.124-4.090-0.193-7.715-2.157-10.141-5.126-0.427 0.722-0.666 1.561-0.666 2.475 0 1.71 0.87 3.213 2.188 4.096-0.807-0.026-1.566-0.248-2.228-0.616v0.061c0 2.385 1.693 4.374 3.946 4.827-0.413 0.111-0.849 0.171-1.296 0.171-0.314 0-0.615-0.030-0.916-0.086 0.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-0.39 0-0.779-0.023-1.17-0.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-0.209 0-0.42-0.015-0.63 0.961-0.689 1.8-1.56 2.46-2.548l-0.047-0.020z" />
17+
</symbol>
18+
<symbol viewBox="0 0 24 24" id="apps">
19+
<path
20+
d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
21+
</symbol>
22+
<symbol viewBox="0 0 24 24" id="arrow_back">
23+
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
24+
</symbol>
25+
<symbol viewBox="0 0 24 24" id="arrow_forward">
26+
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
27+
</symbol>
28+
<symbol viewBox="0 0 24 24" id="assignment">
29+
<path
30+
d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
31+
</symbol>
32+
<symbol viewBox="0 0 24 24" id="check">
33+
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
34+
</symbol>
35+
<symbol viewBox="0 0 24 24" id="chrome_reader_mode">
36+
<path
37+
d="M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z" />
38+
</symbol>
39+
<symbol viewBox="0 0 24 24" id="close">
40+
<path
41+
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
42+
</symbol>
43+
<symbol viewBox="0 0 24 24" id="code">
44+
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
45+
</symbol>
46+
<symbol viewBox="0 0 24 24" id="devices_other">
47+
<path
48+
d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.34 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z" />
49+
</symbol>
50+
<symbol viewBox="0 0 24 24" id="favorite">
51+
<path
52+
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
53+
</symbol>
54+
<symbol viewBox="0 0 24 24" id="home">
55+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
56+
</symbol>
57+
<symbol viewBox="0 0 24 24" id="info_outline">
58+
<path
59+
d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" />
60+
</symbol>
61+
<symbol viewBox="0 0 24 24" id="insert_comment">
62+
<path
63+
d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
64+
</symbol>
65+
<symbol viewBox="0 0 24 24" id="insert_emoticon">
66+
<path
67+
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
68+
</symbol>
69+
<symbol viewBox="0 0 24 24" id="insert_link">
70+
<path
71+
d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
72+
</symbol>
73+
<symbol viewBox="0 0 24 24" id="menu">
74+
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
75+
</symbol>
76+
<symbol viewBox="0 0 24 24" id="note">
77+
<path
78+
d="M22 10l-6-6H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99l16-.01c1.1 0 2-.89 2-1.99v-8zm-7-4.5l5.5 5.5H15V5.5z" />
79+
</symbol>
80+
<symbol viewBox="0 0 24 24" id="picture_in_picture">
81+
<path
82+
d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z" />
83+
</symbol>
84+
<symbol viewBox="0 0 24 24" id="share">
85+
<path
86+
d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
87+
</symbol>
88+
<symbol viewBox="0 0 24 24" id="star">
89+
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
90+
</symbol>
91+
<symbol viewBox="0 0 24 24" id="thumb_up">
92+
<path
93+
d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z" />
94+
</symbol>
95+
<symbol viewBox="0 0 24 24" id="today">
96+
<path
97+
d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" />
98+
</symbol>
99+
</svg>
100+
</body>
101+
</html>

‎exercises/my site/about.html‎

Lines changed: 106 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>About</title>
6+
<title>About page</title>
77
<link href="css/main.css" rel="stylesheet">
88
<style>
99
@import url("css/base.css");
@@ -29,14 +29,111 @@
2929
</ul>
3030
</nav>
3131
</aside>
32-
<main>
33-
<!--main block-->
34-
<h1>About page</h1>
35-
</main>
36-
37-
<footer>
38-
<!--footer block-->
39-
</footer>
32+
<main class="app-main">
33+
<!-- main block -->
34+
<header class="app-main-header">
35+
<span class="app-nav--show">
36+
<a href="#" class="button">
37+
<i class="fa-solid fa-bars"></i>
38+
</a>
39+
</span>
40+
<div class="app-main-header--logo">
41+
<span class="app-main-header--logo-emphasis">Super pretty store</span>
42+
43+
</div>
44+
<nav class="app-main-header--links">
45+
<a href="cart.html"><i class="fa-regular fa-user"></i></a>
46+
<a href="cart.html"><i class="fa-solid fa-cart-plus"></i></a>
47+
<a href="cart.html"><i class="fa-regular fa-heart"></i></a>
48+
</nav>
49+
</header>
50+
51+
<section id="hero" class="hero bg-cover bg-center py-4 px-4" style="background-image: url(images/bg-banner.jpg);">
52+
<div class="container">
53+
<p>New Inspiration 2025 </p>
54+
<h1>20% off on new season </h1>
55+
<a href="" class="btn btn-hero">Browse collection </a>
56+
</div>
57+
</section>
58+
59+
<div class="app-main-content">
60+
<div class="app-content">
61+
<article>
62+
<section>
63+
<h1>About page</h1>
64+
</section>
65+
</article>
66+
</div>
67+
</div>
68+
69+
<section id="hero" class="hero bg-cover bg-center bg-attachment py-4 px-4"
70+
style="background-image: url(images/divider-bg.jpg);">
71+
<div class="container">
72+
<p>New Inspiration 2025 </p>
73+
<h1>20% off on new season </h1>
74+
<a href="" class="btn btn-hero">Browse collection </a>
75+
</div>
76+
</section>
77+
</main>
4078
</div>
79+
80+
<!-- footer start -->
81+
<footer class="footer">
82+
<section class="footer-main">
83+
<div class="footer-main-item">
84+
<h3 class="footer-title">About</h3>
85+
<ul>
86+
<li><a href="index.html">Home</a></li>
87+
<li><a href="blog.html">Blog</a></li>
88+
<li><a href="about.html">About</a></li>
89+
<li><a href="contact.html">Contact</a></li>
90+
</ul>
91+
</div>
92+
<div class="footer-main-item">
93+
<h3 class="footer-title">Contacts</h3>
94+
<ul>
95+
<li><a href="index.html">Home</a></li>
96+
<li><a href="blog.html">Blog</a></li>
97+
<li><a href="about.html">About</a></li>
98+
<li><a href="contact.html">Contact</a></li>
99+
</ul>
100+
</div>
101+
<div class="footer-main-item">
102+
<h3 class="footer-title">Resources</h3>
103+
<ul>
104+
<li><a href="index.html">Home</a></li>
105+
<li><a href="blog.html">Blog</a></li>
106+
<li><a href="about.html">About</a></li>
107+
<li><a href="contact.html">Contact</a></li>
108+
</ul>
109+
</div>
110+
111+
</section>
112+
<section class="footer-social">
113+
<div class="footer-social-list">
114+
<a href="#" class="fa-brands fa-facebook"></a>
115+
<a href="#" class="fa-brands fa-twitter"></a>
116+
<a href="#" class="fa-brands fa-google"></a>
117+
<a href="#" class="fa-brands fa-facebook"></a>
118+
<a href="#" class="fa-brands fa-twitter"></a>
119+
<a href="#" class="fa-brands fa-google"></a>
120+
</div>
121+
</section>
122+
123+
<section class="footer-legal">
124+
<ul class="footer-legal-list">
125+
<li>
126+
<a href="#">Terms &amp; Conditions</a>
127+
</li>
128+
<li>
129+
<a href="#">Privacy policy</a>
130+
</li>
131+
<li>
132+
&copy; 2025 Copyright My company
133+
</li>
134+
</ul>
135+
</section>
136+
</footer>
137+
<!-- footer end -->
41138
</body>
42139
</html>

‎exercises/my site/blog.html‎

Lines changed: 137 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,144 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Blog page</title>
7+
<link href="css/main.css" rel="stylesheet">
78
</head>
89
<body>
9-
10+
<div id="about-page" class="app">
11+
<aside class="app-nav">
12+
<!-- navigation block -->
13+
<header class="app-nav-header">
14+
<span class="app-nav-header--title">Navigation </span>
15+
<span class="app-nav--hide">
16+
<a href="#" class="button"><i class="fa-solid fa-xmark"></i></a>
17+
</span>
18+
</header>
19+
<nav>
20+
21+
<ul class="nav">
22+
<li><a href="index.html">Home</a></li>
23+
<li><a href="catalog.html">Catalog</a></li>
24+
<li><a href="blog.html">Blog</a></li>
25+
<li><a href="contact.html">Contact</a></li>
26+
<li><a href="about.html">About</a></li>
27+
</ul>
28+
</nav>
29+
</aside>
30+
31+
<main class="app-main">
32+
<!-- main block -->
33+
<header class="app-main-header">
34+
<span class="app-nav--show">
35+
<a href="#" class="button">
36+
<i class="fa-solid fa-bars"></i>
37+
</a>
38+
</span>
39+
<div class="app-main-header--logo">
40+
<span class="app-main-header--logo-emphasis">Super pretty store</span>
41+
</div>
42+
<nav class="app-main-header--links">
43+
<a href="cart.html"><i class="fa-regular fa-user"></i></a>
44+
<a href="cart.html"><i class="fa-solid fa-cart-plus"></i></a>
45+
<a href="cart.html"><i class="fa-regular fa-heart"></i></a>
46+
</nav>
47+
</header>
48+
49+
<section id="hero" class="hero bg-cover bg-center py-4 px-4"
50+
style="background-image: url(images/bg-banner.jpg);">
51+
<div class="container">
52+
<p>New Inspiration 2025 </p>
53+
<h1>20% off on new season </h1>
54+
<a href="" class="btn btn-hero">Browse collection </a>
55+
</div>
56+
</section>
57+
58+
<div class="app-main-content">
59+
<div class="app-content">
60+
<article>
61+
62+
<section>
63+
<h1>Blog page</h1>
64+
</section>
65+
</article>
66+
</div>
67+
</div>
68+
69+
<section id="hero" class="hero bg-cover bg-center bg-attachment py-4 px-4"
70+
style="background-image: url(images/divider-bg.jpg);">
71+
<div class="container">
72+
<p>New Inspiration 2025 </p>
73+
<h1>20% off on new season </h1>
74+
<a href="" class="btn btn-hero">Browse collection </a>
75+
</div>
76+
</section>
77+
78+
79+
</main>
80+
</div>
81+
82+
<!-- footer start -->
83+
<footer class="footer">
84+
<section class="footer-main">
85+
<div class="footer-main-item">
86+
<h3 class="footer-title">About</h3>
87+
<ul>
88+
<li><a href="index.html">Home</a></li>
89+
<li><a href="blog.html">Blog</a></li>
90+
<li><a href="about.html">About</a></li>
91+
<li><a href="contact.html">Contact</a></li>
92+
</ul>
93+
</div>
94+
<div class="footer-main-item">
95+
<h3 class="footer-title">Contacts</h3>
96+
<ul>
97+
<li><a href="index.html">Home</a></li>
98+
<li><a href="blog.html">Blog</a></li>
99+
<li><a href="about.html">About</a></li>
100+
<li><a href="contact.html">Contact</a></li>
101+
</ul>
102+
</div>
103+
<div class="footer-main-item">
104+
<h3 class="footer-title">Resources</h3>
105+
<ul>
106+
<li><a href="index.html">Home</a></li>
107+
<li><a href="blog.html">Blog</a></li>
108+
<li><a href="about.html">About</a></li>
109+
<li><a href="contact.html">Contact</a></li>
110+
</ul>
111+
</div>
112+
113+
</section>
114+
<section class="footer-social">
115+
<div class="footer-social-list">
116+
<a href="#" class="fa-brands fa-facebook"></a>
117+
<a href="#" class="fa-brands fa-twitter"></a>
118+
<a href="#" class="fa-brands fa-google"></a>
119+
<a href="#" class="fa-brands fa-facebook"></a>
120+
<a href="#" class="fa-brands fa-twitter"></a>
121+
<a href="#" class="fa-brands fa-google"></a>
122+
</div>
123+
</section>
124+
125+
<section class="footer-legal">
126+
<ul class="footer-legal-list">
127+
<li>
128+
<a href="#">Terms &amp; Conditions</a>
129+
</li>
130+
<li>
131+
<a href="#">Privacy policy</a>
132+
</li>
133+
<li>
134+
&copy; 2025 Copyright My company
135+
</li>
136+
</ul>
137+
138+
</section>
139+
140+
141+
</footer>
142+
<!-- footer end -->
143+
144+
10145
</body>
146+
11147
</html>

0 commit comments

Comments
 (0)