-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (150 loc) · 9.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,700;1,500;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body class="body">
<header class="header container">
<a class="header__logo" href="#">
<img src="./img/logo.svg" width="79" height="23" alt="dog company">
</a>
<nav class="header__nav">
<button type="button" class="header__mobile-btn js-mobile-btn"></button>
<ul class="header__menu js-mobile-menu">
<li><a href="#">Products</a></li>
<li><a href="#">Dog Care</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Popular</a></li>
</ul>
</nav>
<button type="button" class="header__search" aria-label="search button"></button>
<a href="#" class="header__cart" aria-label="link to cart"></a>
</header>
<main>
<section class="intro container">
<div class="row intro__line">
<div class="col-sm-12 col-xl-6 col-5">
<h1 class="poppins">Dog is my Copilot.</h1>
<div class="intro__buttons">
<a class="btn btn_orange intro__btn" href="#">Buy Now</a>
<a class="btn btn_white" href="#">See Details</a>
</div>
</div>
<div class="d-sm-none col-xl-6 col-7">
<img class="img-responsive" src="./img/intro-dog.jpg" alt="">
</div>
</div>
</section>
<section class="advantages">
<div class="container">
<h2 class="visually-hidden">Advantages</h2>
<div class="row">
<div class="col-sm-12 col-4">
<article class="advantages__item advantages__item_01">
<h3 class="poppins">Best Quality Products Pen Foods</h3>
<p>Dogs leave paw prints forever on our hearts. A dog shade the.</p>
<a class="details-link" href="#">See Details</a>
</article>
</div>
<div class="col-sm-12 col-4">
<article class="advantages__item advantages__item_02">
<h3 class="poppins">Best Quality Products Pen Foods</h3>
<p>Dogs leave paw prints</p>
<a class="details-link" href="#">See Details</a>
</article>
</div>
<div class="col-sm-12 col-4">
<article class="advantages__item advantages__item_03">
<h3 class="poppins">Best Quality Products Pen Foods</h3>
<p>Dogs leave paw prints forever on our hearts. A dog shade the. A dog shade the. A dog
shade the. A dog shade the.</p>
<a class="details-link" href="#">See Details</a>
</article>
</div>
</div>
</div>
</section>
<section class="popular container">
<h2 class="h2-title popular__title">Popular Products</h2>
<p class="popular__description">A dog in heat needs more than shade The more people I meet the more I like
my dog.Dogs leave paw prints
forever on our hearts.</p>
<div class="row">
<div class="col-xs-12 col-6">
<div class="popular__item">
<div class="popular__item-pic">
<img class="img-responsive" src="./img/popular-01.png" alt="">
</div>
<h3 class="poppins">Mauris blandit aliquet</h3>
<a class="details-link" href="#">View Details</a>
</div>
</div>
<div class="col-xs-12 col-6">
<div class="popular__item">
<div class="popular__item-pic">
<img class="img-responsive" src="./img/popular-02.png" alt="">
</div>
<h3 class="poppins">Mauris blandit aliquet</h3>
<a class="details-link" href="#">View Details</a>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer__inset">
<ul class="footer__menu">
<li><a href="#">Product & Policy</a></li>
<li><a href="#">Privacy & About</a></li>
<li>Contact: <a href="mailto:test@gmail.com">test@gmail.com</a></li>
</ul>
<div class="footer__middle">
<a class="footer__logo" href="#">
<img src="./img/logo-white.svg" width="79" height="23" alt="dog company">
</a>
<ul class="social">
<li><a href="#" aria-label="facebook link">
<svg width="9" height="18" viewBox="0 0 9 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7.35689 3.32271H9V0.619708C8.71652 0.582875 7.74161 0.5 6.6062 0.5C4.23715 0.5 2.61428 1.90746 2.61428 4.49429V6.875H0V9.89675H2.61428V17.5H5.81952V9.89746H8.32806L8.72627 6.87571H5.81877V4.79392C5.81952 3.92054 6.06849 3.32271 7.35689 3.32271V3.32271Z"
fill="#211105" />
</svg>
</a></li>
<li><a href="#" aria-label="link to dribble">
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.9133 15.9442C10.9267 15.9402 10.9394 15.9349 10.9527 15.9302C19.104 12.6954 16.8491 0.5 8.00783 0.5C3.57082 0.5 0 4.11276 0 8.49872C0 14.0492 5.62817 18.0099 10.9133 15.9442ZM3.52411 13.8705C4.09267 12.916 5.93247 10.2231 9.07287 9.29393C9.72951 10.9663 10.19 12.9173 10.2353 15.1297C7.85568 15.9289 5.34589 15.391 3.52411 13.8705ZM11.2196 14.7124C11.1322 12.5867 10.6978 10.7017 10.0785 9.06863C11.4679 8.852 13.0761 8.99664 14.8999 9.72653C14.5122 11.9002 13.1208 13.7272 11.2196 14.7124ZM15.0047 8.69269C12.996 7.93881 11.2256 7.84483 9.69348 8.13678C9.45658 7.60353 9.20767 7.09095 8.94408 6.61902C11.295 5.68117 12.6844 4.53802 13.3063 3.93278C14.4041 5.20191 15.0561 6.84499 15.0047 8.69269ZM12.5956 3.2209C12.0298 3.75881 10.6971 4.84531 8.41823 5.73383C7.30114 3.96878 6.10664 2.72364 5.3499 2.02642C7.77093 1.03058 10.563 1.45585 12.5956 3.2209ZM4.39296 2.51501C4.96419 3.01693 6.21808 4.22207 7.42793 6.08577C5.7663 6.62036 3.68293 7.01296 1.14912 7.06828C1.55218 5.13926 2.75603 3.50485 4.39296 2.51501ZM1.02233 8.07212C3.85844 8.02613 6.15402 7.57887 7.96846 6.97363C8.21937 7.41289 8.4576 7.89149 8.68649 8.38874C5.52674 9.39391 3.55214 11.9888 2.79607 13.1606C1.57621 11.8009 0.90355 10.0265 1.02233 8.07212Z"
fill="#211105" />
</svg>
</a></li>
<li><a href="#" aria-label="link to twitter">
<svg width="15" height="13" viewBox="0 0 15 13" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.7692 1.92062C14.22 2.16154 13.6348 2.32123 13.0246 2.39877C13.6523 2.024 14.1314 1.43508 14.3566 0.725231C13.7714 1.07415 13.1252 1.32062 12.4366 1.45815C11.8809 0.866462 11.0889 0.5 10.2249 0.5C8.54862 0.5 7.19908 1.86062 7.19908 3.52862C7.19908 3.76862 7.21938 3.99938 7.26923 4.21908C4.752 4.09631 2.52462 2.88985 1.02831 1.052C0.767077 1.50523 0.613846 2.024 0.613846 2.58246C0.613846 3.63108 1.15385 4.56062 1.95877 5.09877C1.47231 5.08954 0.995077 4.94831 0.590769 4.72585C0.590769 4.73508 0.590769 4.74708 0.590769 4.75908C0.590769 6.23046 1.64031 7.45262 3.01662 7.73415C2.77015 7.80154 2.50154 7.83385 2.22277 7.83385C2.02892 7.83385 1.83323 7.82277 1.64954 7.78215C2.04185 8.98123 3.15508 9.86277 4.47877 9.89138C3.44862 10.6972 2.14062 11.1828 0.724615 11.1828C0.476308 11.1828 0.238154 11.1717 0 11.1412C1.34123 12.0062 2.93077 12.5 4.64492 12.5C10.2166 12.5 13.2628 7.88462 13.2628 3.884C13.2628 3.75015 13.2582 3.62092 13.2517 3.49262C13.8526 3.06615 14.3575 2.53354 14.7692 1.92062Z"
fill="#211105" />
</svg>
</a></li>
</ul>
</div>
<ul class="footer__menu">
<li><a href="#">Dog Care</a></li>
<li><a href="#">Privacy & Policy</a></li>
<li><a href="#">Popular Product</a></li>
</ul>
</div>
</footer>
<script src="./js/script.js"></script>
</body>
</html>