-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (80 loc) · 8.48 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Home Page - by María López</title>
<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:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="">
<nav>
<div class="logo">
<svg width="141" height="24" viewBox="0 0 141 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7701 1.42178C19.5512 0.640733 20.8175 0.640733 21.5985 1.42178L30.7624 10.5857C31.5435 11.3667 31.5435 12.6331 30.7624 13.4141L21.5985 22.578C20.8175 23.3591 19.5512 23.3591 18.7701 22.578L9.60621 13.4141C8.82516 12.6331 8.82516 11.3667 9.60621 10.5857L18.7701 1.42178Z" fill="#4CA154"/>
<path d="M10.5782 1.42196C11.3593 0.640916 12.6256 0.640916 13.4066 1.42197L22.5705 10.5859C23.3516 11.3669 23.3516 12.6332 22.5705 13.4143L13.4066 22.5782C12.6256 23.3592 11.3593 23.3592 10.5782 22.5782L1.41432 13.4143C0.633269 12.6332 0.63327 11.3669 1.41432 10.5859L10.5782 1.42196Z" fill="#2A4DD0"/>
<path d="M55.7685 17.808H49.4805L48.4725 20.784H44.1765L50.2725 3.93599H55.0245L61.1205 20.784H56.7765L55.7685 17.808ZM54.7125 14.64L52.6245 8.47199L50.5605 14.64H54.7125Z" fill="#223344"/>
<path d="M66.8398 3.02399V20.784H62.7358V3.02399H66.8398Z" fill="#223344"/>
<path d="M68.758 14.064C68.758 12.688 69.014 11.48 69.526 10.44C70.054 9.39999 70.766 8.59999 71.662 8.03999C72.558 7.47999 73.558 7.19999 74.662 7.19999C75.606 7.19999 76.43 7.39199 77.134 7.77599C77.854 8.15999 78.406 8.66399 78.79 9.28799V7.39199H82.894V20.784H78.79V18.888C78.39 19.512 77.83 20.016 77.11 20.4C76.406 20.784 75.582 20.976 74.638 20.976C73.55 20.976 72.558 20.696 71.662 20.136C70.766 19.56 70.054 18.752 69.526 17.712C69.014 16.656 68.758 15.44 68.758 14.064ZM78.79 14.088C78.79 13.064 78.502 12.256 77.926 11.664C77.366 11.072 76.678 10.776 75.862 10.776C75.046 10.776 74.35 11.072 73.774 11.664C73.214 12.24 72.934 13.04 72.934 14.064C72.934 15.088 73.214 15.904 73.774 16.512C74.35 17.104 75.046 17.4 75.862 17.4C76.678 17.4 77.366 17.104 77.926 16.512C78.502 15.92 78.79 15.112 78.79 14.088Z" fill="#223344"/>
<path d="M89.727 9.62399C90.207 8.88799 90.807 8.31199 91.527 7.89599C92.247 7.46399 93.047 7.24799 93.927 7.24799V11.592H92.799C91.775 11.592 91.007 11.816 90.495 12.264C89.983 12.696 89.727 13.464 89.727 14.568V20.784H85.623V7.39199H89.727V9.62399Z" fill="#223344"/>
<path d="M94.8326 14.064C94.8326 12.688 95.0886 11.48 95.6006 10.44C96.1286 9.39999 96.8406 8.59999 97.7366 8.03999C98.6326 7.47999 99.6326 7.19999 100.737 7.19999C101.681 7.19999 102.505 7.39199 103.209 7.77599C103.929 8.15999 104.481 8.66399 104.865 9.28799V7.39199H108.969V20.784H104.865V18.888C104.465 19.512 103.905 20.016 103.185 20.4C102.481 20.784 101.657 20.976 100.713 20.976C99.6246 20.976 98.6326 20.696 97.7366 20.136C96.8406 19.56 96.1286 18.752 95.6006 17.712C95.0886 16.656 94.8326 15.44 94.8326 14.064ZM104.865 14.088C104.865 13.064 104.577 12.256 104.001 11.664C103.441 11.072 102.753 10.776 101.937 10.776C101.121 10.776 100.425 11.072 99.8486 11.664C99.2886 12.24 99.0086 13.04 99.0086 14.064C99.0086 15.088 99.2886 15.904 99.8486 16.512C100.425 17.104 101.121 17.4 101.937 17.4C102.753 17.4 103.441 17.104 104.001 16.512C104.577 15.92 104.865 15.112 104.865 14.088Z" fill="#223344"/>
<path d="M110.882 14.064C110.882 12.688 111.138 11.48 111.65 10.44C112.178 9.39999 112.89 8.59999 113.786 8.03999C114.682 7.47999 115.682 7.19999 116.786 7.19999C117.666 7.19999 118.466 7.38399 119.186 7.75199C119.922 8.11999 120.498 8.61599 120.914 9.23999V3.02399H125.018V20.784H120.914V18.864C120.53 19.504 119.978 20.016 119.258 20.4C118.554 20.784 117.73 20.976 116.786 20.976C115.682 20.976 114.682 20.696 113.786 20.136C112.89 19.56 112.178 18.752 111.65 17.712C111.138 16.656 110.882 15.44 110.882 14.064ZM120.914 14.088C120.914 13.064 120.626 12.256 120.05 11.664C119.49 11.072 118.802 10.776 117.986 10.776C117.17 10.776 116.474 11.072 115.898 11.664C115.338 12.24 115.058 13.04 115.058 14.064C115.058 15.088 115.338 15.904 115.898 16.512C116.474 17.104 117.17 17.4 117.986 17.4C118.802 17.4 119.49 17.104 120.05 16.512C120.626 15.92 120.914 15.112 120.914 14.088Z" fill="#223344"/>
<path d="M133.843 20.976C132.531 20.976 131.347 20.696 130.291 20.136C129.251 19.576 128.427 18.776 127.819 17.736C127.227 16.696 126.931 15.48 126.931 14.088C126.931 12.712 127.235 11.504 127.843 10.464C128.451 9.40799 129.283 8.59999 130.339 8.03999C131.395 7.47999 132.579 7.19999 133.891 7.19999C135.203 7.19999 136.387 7.47999 137.443 8.03999C138.499 8.59999 139.331 9.40799 139.939 10.464C140.547 11.504 140.851 12.712 140.851 14.088C140.851 15.464 140.539 16.68 139.915 17.736C139.307 18.776 138.467 19.576 137.395 20.136C136.339 20.696 135.155 20.976 133.843 20.976ZM133.843 17.424C134.627 17.424 135.291 17.136 135.835 16.56C136.395 15.984 136.675 15.16 136.675 14.088C136.675 13.016 136.403 12.192 135.859 11.616C135.331 11.04 134.675 10.752 133.891 10.752C133.091 10.752 132.427 11.04 131.899 11.616C131.371 12.176 131.107 13 131.107 14.088C131.107 15.16 131.363 15.984 131.875 16.56C132.403 17.136 133.059 17.424 133.843 17.424Z" fill="#223344"/>
</svg>
</div>
<ul class="nav__ul">
<span class="close">X</span>
<li class="nav__li"><a href="#" class="active">About us</a></li>
<li class="nav__li"><a href="#">Product</a></li>
<li class="nav__li"><a href="#">Resource</a></li>
<li class="nav__li"><a href="#">Contact</a></li>
<button class="mode">
<img id="moon" src="assets/Moon_fill.svg" alt="moon icon in the button" />
<img id="sun" class="mode--activate" src="assets/Sun_fill.svg" alt="sun icon in the button" />
</button>
</ul>
<button class="menu">
<span></span>
<span></span>
<span></span>
</button>
</nav>
<main>
<div class="container-text">
<div class="container-text__slogan">😎 Simple way to communicate</div>
<h1 class="container-text__title">
Actions for Accessibility in Design
</h1>
<p class="container-text__description">
The fastest way to build and deploy websites with resusable
components.
</p>
<div class="container-text__actions">
<button class="container-text__actions__button">GET STARTED</button>
<a href="#">Get live demo</a>
</div>
<div class="container-text__checks">
<ul>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 10.1666 20.4518 8.46124 19.5103 7.03891L12.355 14.9893C11.6624 15.7589 10.4968 15.8726 9.66844 15.2513L6.4 12.8C5.95817 12.4686 5.86863 11.8418 6.2 11.4C6.53137 10.9582 7.15817 10.8686 7.6 11.2L10.8684 13.6513L18.214 5.48955C16.5986 3.94717 14.4099 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
fill="#4ca154" />
</svg>
<li>No credit card required</li>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 10.1666 20.4518 8.46124 19.5103 7.03891L12.355 14.9893C11.6624 15.7589 10.4968 15.8726 9.66844 15.2513L6.4 12.8C5.95817 12.4686 5.86863 11.8418 6.2 11.4C6.53137 10.9582 7.15817 10.8686 7.6 11.2L10.8684 13.6513L18.214 5.48955C16.5986 3.94717 14.4099 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
fill="#4ca154" />
</svg>
<li>No software to install</li>
</ul>
</div>
</div>
<img class="hero-image" src="assets/hero-image-simple-homepage.png" alt="home page image" />
</main>
<script src="script.js"></script>
</body>
</html>