-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
149 lines (149 loc) · 11.3 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
<!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="stylesheet" href="css/style.css" />
<title>CASEO</title>
</head>
<body>
<header>
<section class="brand">
<svg
width="25"
height="30"
viewBox="0 0 25 30"
xmlns="http://www.w3.org/2000/svg"
id="letter1"
>
<path
d="M16.2543 30C16.2543 30 17.8264 26.0957 18.6124 24.2751C18.1944 24.5314 18.5098 24.3156 18.0243 24.4774C17.5523 24.6392 17.033 24.7539 16.4666 24.8213C15.9137 24.8887 15.2933 24.9225 14.6055 24.9225C13.4457 24.9225 12.3533 24.7067 11.3284 24.2751C10.3169 23.8301 9.42684 23.1827 8.65812 22.3331C7.9029 21.4835 7.30276 20.445 6.85772 19.2178C6.42616 17.9771 6.21038 16.5678 6.21038 14.9899C6.21038 13.4255 6.41268 12.0297 6.81726 10.8024C7.22185 9.57518 7.78827 8.54349 8.51652 7.70735C9.25826 6.85772 10.1416 6.21039 11.1666 5.76534C12.1915 5.3203 13.3176 5.09778 14.5448 5.09778C15.6507 5.09778 16.561 5.21241 17.2758 5.44167C18.004 5.67094 18.6042 5.92717 19.0762 6.21038C19.5617 6.49359 19.9663 6.74983 20.2899 6.9791C20.6271 7.20836 20.9575 7.32299 21.2812 7.32299C21.6049 7.32299 21.8611 7.25556 22.0499 7.1207C22.2387 6.98584 22.3938 6.83075 22.5152 6.65543L24.5583 3.86379C23.9919 3.29737 23.3513 2.77815 22.6365 2.30614C21.9353 1.82063 21.1666 1.40931 20.3304 1.07215C19.4943 0.734998 18.5907 0.472018 17.6197 0.283211C16.6622 0.0944038 15.644 0 14.5651 0C13.122 0 11.7599 0.168578 10.4788 0.505733C9.21106 0.829401 8.03776 1.30816 6.95887 1.94201C5.87997 2.56238 4.90897 3.3176 4.04585 4.20769C3.19622 5.09777 2.46797 6.09575 1.86109 7.20162C1.25421 8.30749 0.788941 9.52124 0.465273 10.8429C0.155091 12.151 0 13.5334 0 14.9899C0 17.1612 0.330411 19.1639 0.991234 20.998C1.65206 22.8321 2.59609 24.4167 3.82333 25.7519C5.05057 27.087 6.54079 28.1322 8.294 28.8874C10.0472 29.6291 12.0229 30 14.2212 30H16.2543Z"
/>
</svg>
<svg
width="27"
height="30"
viewBox="0 0 27 30"
xmlns="http://www.w3.org/2000/svg"
id="letter2"
>
<path
d="M19.9326 18.53L16.7566 9.5482C16.5678 9.07619 16.3655 8.52325 16.1498 7.8894C15.9475 7.25555 15.7519 6.56776 15.5631 5.82602C15.3743 6.58124 15.172 7.28252 14.9562 7.92986C14.7539 8.56371 14.5584 9.11665 14.3696 9.58866L11.2138 18.53H19.9326ZM26.2668 19.7359L25.4807 20.4505L23.4084 23.7375C22.9082 24.4521 22.5699 25.9151 22.408 25.524L21.4094 22.7377H9.71686L7.73439 28.3412C7.59953 28.6783 7.36352 28.9885 7.02637 29.2717C6.68921 29.5415 6.2644 29.6763 5.75192 29.6763H0.998047L12.468 0.323658H18.6784L26.2668 19.7359Z"
/>
</svg>
<svg
width="22"
height="30"
viewBox="0 0 22 30"
xmlns="http://www.w3.org/2000/svg"
id="letter3"
>
<path
d="M19.118 5.9474C18.9292 6.25759 18.7336 6.48685 18.5313 6.6352C18.3425 6.77006 18.093 6.83749 17.7828 6.83749C17.4861 6.83749 17.1625 6.73635 16.8118 6.53405C16.4747 6.31827 16.0768 6.08901 15.6183 5.84626C15.1598 5.60351 14.6338 5.38098 14.0404 5.17869C13.447 4.96291 12.7525 4.85502 11.9568 4.85502C10.5542 4.85502 9.50232 5.17195 8.80103 5.8058C8.09975 6.42616 7.74911 7.24208 7.74911 8.25354C7.74911 8.90088 7.93792 9.44032 8.31553 9.87188C8.70663 10.29 9.21236 10.6541 9.83273 10.9643C10.4666 11.2744 11.1813 11.5509 11.977 11.7937C12.7727 12.0364 13.5886 12.3061 14.4248 12.6028C15.2609 12.886 16.0768 13.2232 16.8725 13.6143C17.6682 14.0054 18.3762 14.4976 18.9966 15.091C19.6304 15.6844 20.1362 16.4127 20.5138 17.2758C20.9049 18.1254 21.1004 19.1639 21.1004 20.3911C21.1004 21.7262 20.8644 22.9804 20.3924 24.1537C19.9339 25.3136 19.2663 26.3318 18.3897 27.2084C17.5131 28.0715 16.4275 28.7525 15.1328 29.2515C13.8516 29.7505 12.3951 30 10.7633 30C9.83273 30 8.90218 29.9056 7.97163 29.7168C7.05457 29.528 6.16449 29.265 5.30137 28.9278C4.45174 28.5907 3.64931 28.1861 2.89409 27.7141C2.13886 27.2421 1.47804 26.7161 0.911621 26.1362L2.6918 23.2637C2.84014 23.0479 3.03569 22.8726 3.27845 22.7377C3.5212 22.5893 3.77743 22.5152 4.04716 22.5152C4.41128 22.5152 4.79564 22.65 5.20022 22.9198C5.60481 23.1895 6.07008 23.4862 6.59604 23.8098C7.122 24.1335 7.72888 24.4302 8.41668 24.6999C9.11796 24.9697 9.9541 25.1045 10.9251 25.1045C12.3412 25.1045 13.4335 24.7808 14.2022 24.1335C14.9844 23.4862 15.3755 22.5219 15.3755 21.2407C15.3755 20.499 15.18 19.8989 14.7889 19.4403C14.4113 18.9818 13.9123 18.5974 13.2919 18.2873C12.6716 17.9771 11.9635 17.7141 11.1679 17.4983C10.3722 17.269 9.55626 17.0196 8.72012 16.7498C7.88397 16.4801 7.06806 16.1564 6.27238 15.7788C5.47669 15.4012 4.76867 14.9022 4.1483 14.2819C3.52794 13.6615 3.02221 12.8928 2.63111 11.9757C2.2535 11.0587 2.06469 9.91908 2.06469 8.55698C2.06469 7.4646 2.28047 6.40594 2.71203 5.38098C3.14358 4.35604 3.77743 3.44572 4.61358 2.65003C5.44972 1.85435 6.47467 1.21376 7.68842 0.728253C8.91567 0.242751 10.3182 0 11.8961 0C13.6628 0 15.2946 0.276467 16.7916 0.829401C18.302 1.36885 19.5765 2.12407 20.6149 3.09508L19.118 5.9474Z"
/>
</svg>
<svg
width="19"
height="30"
viewBox="0 0 19 30"
xmlns="http://www.w3.org/2000/svg"
id="letter4"
>
<path
d="M6.41075 5.07753V12.6231H12.7107C12.505 14.4164 12.5108 15.4218 12.7107 17.2151H6.41075V24.9224H15.0688C16.3512 27.0616 17.2375 28.0714 18.9934 29.6763H0.301514V0.323658H18.9934C17.1675 2.00341 16.3044 3.04201 15.0688 5.07753H6.41075Z"
/>
</svg>
<svg
width="31"
height="30"
viewBox="0 0 31 30"
xmlns="http://www.w3.org/2000/svg"
id="letter5"
>
<path
d="M30.8692 14.9899C30.8692 17.1342 30.5051 19.1234 29.7769 20.9575C29.0621 22.7916 28.0439 24.3763 26.7222 25.7114C25.4141 27.0465 23.8362 28.0984 21.9886 28.8672C20.141 29.6224 18.0911 30 15.8389 30C13.5867 30 11.5368 29.6224 9.68921 28.8672C7.8416 28.0984 6.25697 27.0465 4.93533 25.7114C3.61368 24.3763 2.58873 22.7916 1.86048 20.9575C1.14571 19.1234 0.78833 17.1342 0.78833 14.9899C0.78833 12.8456 1.14571 10.8631 1.86048 9.04248C2.58873 7.20836 3.61368 5.62374 4.93533 4.2886C6.25697 2.95347 7.8416 1.90829 9.68921 1.15307C11.5368 0.384356 13.5867 0 15.8389 0C18.0911 0 20.141 0.384356 21.9886 1.15307C23.8362 1.90829 25.4141 2.96022 26.7222 4.30883C28.0439 5.64396 29.0621 7.22859 29.7769 9.06271C30.5051 10.8833 30.8692 12.8591 30.8692 14.9899ZM24.6589 14.9899C24.6589 13.4525 24.4566 12.0769 24.052 10.8631C23.6474 9.63587 23.0608 8.59744 22.292 7.74781C21.5368 6.88469 20.613 6.23061 19.5206 5.78557C18.4417 5.32704 17.2145 5.09778 15.8389 5.09778C14.4633 5.09778 13.2293 5.32704 12.1369 5.78557C11.0446 6.23061 10.114 6.88469 9.34531 7.74781C8.59008 8.59744 8.01018 9.63587 7.60559 10.8631C7.20101 12.0769 6.99871 13.4525 6.99871 14.9899C6.99871 16.5408 7.20101 17.9299 7.60559 19.1571C8.01018 20.3709 8.59008 21.4026 9.34531 22.2522C10.114 23.1018 11.0446 23.7559 12.1369 24.2144C13.2293 24.6595 14.4633 24.882 15.8389 24.882C17.2145 24.882 18.4417 24.6595 19.5206 24.2144C20.613 23.7559 21.5368 23.1018 22.292 22.2522C23.0608 21.4026 23.6474 20.3709 24.052 19.1571C24.4566 17.9299 24.6589 16.5408 24.6589 14.9899Z"
/>
</svg>
</section>
<section class="menu">
<label for="menuBotton">
<img
src="https://www.samueldiosdado.com/wp-content/uploads/2017/08/Men%C3%BA-hamburguesa-herramienta-practica-o-icono-inutil.png"
style="width: 30px; height: 15px"
/>
</label>
<input
type="checkbox"
name="menuBotton"
class="menuBotton"
id="menuBotton"
/>
<div class="navContainer">
<nav class="menuContainer">
<ul class="menuDropdown">
<li class="menuItem"><a class="menuLink" href="#">HOME</a></li>
<li class="menuItem">
<a class="menuLink" href="#about">ABOUT</a>
</li>
<li class="menuItem">
<a class="menuLink" href="#experience">EXPERIENCE</a>
</li>
<li class="menuItem">
<a class="menuLink" href="#certificate">CERTIFICATE</a>
</li>
<li class="menuItem">
<a class="menuLink" href="#contact">CONTACT</a>
</li>
</ul>
</nav>
</div>
</section>
</header>
<main>
<p>
<strong>
Este Menu cambia de color luego de 200px de scroll vertical. Adaptado
a cualquier dispositivo.
</strong>
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut atque
officia ab, nam ipsa fugit eos deleniti animi ex repudiandae aut! Magni
blanditiis animi neque inventore deserunt ratione numquam hic.
Necessitatibus atque saepe suscipit animi, corrupti debitis numquam
sapiente tempora consequatur, accusamus, aperiam optio sed praesentium
ipsam dicta! Illo neque, adipisci qui libero nisi ullam laborum dicta
ipsam vero quis? Veniam dolorem quod quisquam? Maxime consequuntur
eligendi, pariatur nihil dolorem aperiam voluptates accusantium rerum
itaque. Tempore ex, corporis delectus ipsam voluptatum dicta facilis
magni minus quo, dolorum provident voluptate minima! Temporibus at
accusamus dignissimos expedita soluta modi reprehenderit reiciendis
cupiditate praesentium recusandae quia incidunt exercitationem, nemo
provident tempora laborum eaque quaerat! Repellat voluptatem impedit,
dolorem mollitia in error corporis. Libero! Odit voluptatum numquam
saepe doloremque beatae deleniti quod harum vitae possimus nam. Quasi
fugit minima, voluptates possimus voluptatibus molestias voluptatem,
itaque tempora eveniet at fuga aspernatur iusto, explicabo iste
mollitia. Perspiciatis molestias placeat ullam corrupti. Placeat iusto,
impedit at quibusdam totam ullam, possimus quod in fugiat non provident
perferendis quidem eos recusandae. Minus voluptatem totam ex,
consequatur dolorem qui expedita? Dolores saepe commodi excepturi ad!
Eum, doloremque atque repudiandae, nemo est vitae a quia reiciendis
assumenda, voluptatum omnis saepe dolor distinctio. Blanditiis rem sint
laborum quidem eius numquam, tempora tenetur. Deleniti, odio asperiores.
Labore similique reprehenderit, natus, temporibus ad eius quos id fugit
nihil praesentium dignissimos quod est adipisci iusto iure ducimus
excepturi modi exercitationem totam quis mollitia! Perspiciatis, sit?
Quaerat nulla voluptate reiciendis qui quam facilis velit voluptatem aut
minima perspiciatis tempora impedit est eveniet, consequatur suscipit
accusantium quasi. Fugiat laudantium debitis id totam sit maiores odit.
Voluptate, sapiente? Eligendi eveniet, cupiditate maiores quas voluptate
necessitatibus quod doloribus illo quae accusamus labore eaque in
quaerat fuga earum provident debitis similique laudantium beatae
repellendus nobis sint vitae voluptatum! Eos, tempora.
</p>
</main>
</body>
<script src="js/main.js"></script>
</html>