-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
137 lines (131 loc) · 9.76 KB
/
index.html
File metadata and controls
137 lines (131 loc) · 9.76 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/media.css">
<link rel="icon" type="image/x-icon" href="./img/favicon.svg">
<title>ANTOOLS</title>
</head>
<body>
<header class="header">
<div class="container header__container flex">
<a class="header__logo" href="#">
<img class="header__logo-img" src="img/logo.png" alt="Logotipe">
</a>
<nav class="nav flex">
<ul class="nav__list list-reset flex">
<li class="nav__item">
<a class="nav__link" href="#home">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#about-us">Categories</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#teachers">My Collection</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#courses">Blog</a>
</li>
</ul>
</nav>
<div class="header__group-links flex">
<a href="#" class="header__login">Login</a>
<button class="header__button btn-reset">Sign up</button>
</div>
</div>
</header>
</body>
<main>
<section class="hero">
<div class="container hero__container">
<div class="hero__wrapper">
<h1 class="hero__title">Awesome tools for
Designer & Developer.</h1>
<p class="hero__descr">Antool is a web collection of information on paid
or free Design and Development tools</p>
<div class="hero__search flex">
<label class="hero__label flex" for="">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
stroke="white" stroke-opacity="0.38" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M21 20.9999L16.65 16.6499" stroke="white" stroke-opacity="0.38" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
<input class="hero__input" type="text" placeholder="find more than 430+ tools...">
<button class="hero__btn btn btn-reset">Search</button>
</label>
</div>
</div>
</div>
</section>
<section class="mostpopular">
<div class="container mostpopular__container">
<div class="mostpopular__title-wrapper flex">
<h2 class="mostpopular__title">
Most Popular Tools
</h2>
<p class="mostpopular__descr">
Tools for the best Designers and Developers
most popularly used in the world
</p>
</div>
<ul class="mospopular__list list-reset flex">
<li class="mostpopuplar__item flex">
<div class="mostpopular__item-group flex">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
<g opacity="0.78">
<path
d="M42.6667 42.6667C48.5577 42.6667 53.3333 37.8911 53.3333 32C53.3333 26.109 48.5577 21.3334 42.6667 21.3334C36.7756 21.3334 32 26.109 32 32C32 37.8911 36.7756 42.6667 42.6667 42.6667Z"
fill="#19BCFE" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.3334 64C24.1624 64 26.8755 62.8761 28.8759 60.8758C30.8762 58.8754 32 56.1623 32 53.3333V42.6666H21.3334C18.5044 42.6666 15.7913 43.7904 13.7909 45.7908C11.7905 47.7912 10.6667 50.5043 10.6667 53.3333C10.6667 56.1623 11.7905 58.8754 13.7909 60.8758C15.7913 62.8761 18.5044 64 21.3334 64Z"
fill="#09CF83" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.3334 42.6667H32V21.3334H21.3334C18.5044 21.3334 15.7913 22.4572 13.7909 24.4576C11.7905 26.458 10.6667 29.1711 10.6667 32C10.6667 34.829 11.7905 37.5421 13.7909 39.5425C15.7913 41.5429 18.5044 42.6667 21.3334 42.6667Z"
fill="#A259FF" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.3334 21.3333H32V0H21.3334C18.5044 0 15.7913 1.12381 13.7909 3.12419C11.7905 5.12458 10.6667 7.83769 10.6667 10.6667C10.6667 13.4956 11.7905 16.2088 13.7909 18.2091C15.7913 20.2095 18.5044 21.3333 21.3334 21.3333Z"
fill="#F24E1E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M42.6667 21.3333H32V0H42.6667C45.4956 0 48.2087 1.12381 50.2091 3.12419C52.2095 5.12458 53.3333 7.83769 53.3333 10.6667C53.3333 13.4956 52.2095 16.2088 50.2091 18.2091C48.2087 20.2095 45.4956 21.3333 42.6667 21.3333Z"
fill="#FF7262" />
</g>
</svg>
<div class="mostpopular__item-group-text flex">
<h3 class="mostpopular__item-title">FIGMA</h3>
<p class="mostpopular__item-sail">Free</p>
</div>
</div>
<p class="mospopular__item-descr-card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="mostpopular__down-group flex">
<div class="mostpopular__down-group-svg flex">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
<path
d="M19.8333 5.25C17.3833 5.25 15.225 6.475 14 8.4C12.775 6.475 10.6167 5.25 8.16667 5.25C4.31667 5.25 1.16667 8.4 1.16667 12.25C1.16667 19.1917 14 26.25 14 26.25C14 26.25 26.8333 19.25 26.8333 12.25C26.8333 8.4 23.6833 5.25 19.8333 5.25Z"
fill="white" fill-opacity="0.38" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M17.5 16.25H16.25V15C16.25 14.6685 16.1183 14.3505 15.8839 14.1161C15.6495 13.8817 15.3315 13.75 15 13.75C14.6685 13.75 14.3505 13.8817 14.1161 14.1161C13.8817 14.3505 13.75 14.6685 13.75 15V16.25H12.5C12.1685 16.25 11.8505 16.3817 11.6161 16.6161C11.3817 16.8505 11.25 17.1685 11.25 17.5C11.25 17.8315 11.3817 18.1495 11.6161 18.3839C11.8505 18.6183 12.1685 18.75 12.5 18.75H13.75V20C13.75 20.3315 13.8817 20.6495 14.1161 20.8839C14.3505 21.1183 14.6685 21.25 15 21.25C15.3315 21.25 15.6495 21.1183 15.8839 20.8839C16.1183 20.6495 16.25 20.3315 16.25 20V18.75H17.5C17.8315 18.75 18.1495 18.6183 18.3839 18.3839C18.6183 18.1495 18.75 17.8315 18.75 17.5C18.75 17.1685 18.6183 16.8505 18.3839 16.6161C18.1495 16.3817 17.8315 16.25 17.5 16.25Z"
fill="white" fill-opacity="0.38" />
<path
d="M24.375 8.81249H15.625L12.3375 4.83749C12.2212 4.6941 12.0745 4.57825 11.9081 4.49829C11.7417 4.41832 11.5596 4.37621 11.375 4.37499H5.625C4.80826 4.36496 4.02083 4.67898 3.43512 5.24829C2.84942 5.8176 2.51317 6.59579 2.5 7.41249V22.5875C2.51317 23.4042 2.84942 24.1824 3.43512 24.7517C4.02083 25.321 4.80826 25.635 5.625 25.625H24.375C25.1917 25.635 25.9792 25.321 26.5649 24.7517C27.1506 24.1824 27.4868 23.4042 27.5 22.5875V11.85C27.4868 11.0333 27.1506 10.2551 26.5649 9.68579C25.9792 9.11648 25.1917 8.80246 24.375 8.81249ZM25 22.5625C24.9953 22.6392 24.9753 22.7142 24.9411 22.783C24.9069 22.8518 24.8593 22.9131 24.801 22.9632C24.7427 23.0133 24.675 23.0512 24.6019 23.0747C24.5287 23.0982 24.4515 23.1068 24.375 23.1H5.625C5.54846 23.1068 5.47132 23.0982 5.39815 23.0747C5.32498 23.0512 5.25726 23.0133 5.199 22.9632C5.14073 22.9131 5.0931 22.8518 5.05892 22.783C5.02474 22.7142 5.00471 22.6392 5 22.5625V7.41249C5.00471 7.33578 5.02474 7.2608 5.05892 7.19197C5.0931 7.12315 5.14073 7.06187 5.199 7.01176C5.25726 6.96165 5.32498 6.92373 5.39815 6.90024C5.47132 6.87675 5.54846 6.86816 5.625 6.87499H10.7875L14.0375 10.85C14.1538 10.9934 14.3005 11.1092 14.4669 11.1892C14.6333 11.2692 14.8154 11.3113 15 11.3125H24.375C24.4515 11.3057 24.5287 11.3142 24.6019 11.3377C24.675 11.3612 24.7427 11.3992 24.801 11.4493C24.8593 11.4994 24.9069 11.5606 24.9411 11.6295C24.9753 11.6983 24.9953 11.7733 25 11.85V22.5625Z"
fill="white" fill-opacity="0.38" />
</svg>
</div>
<button class="btn btn-reset mostpopular__btn">Visit</button>
</div>
</li>
</ul>
</div>
</section>
</main>
</html>