├── README.md
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # ✨ YouTube Navigation Menu ✨ Platzi Live Class✨
 2 | 
 3 | 👉🏼 [Aquí puedes encontrar la presentación completa](https://www.canva.com/design/DAFOeeCSMgA/ln8WQ3w-KcyoaS5GkVuAEQ/view?utm_content=DAFOeeCSMgA&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)
 4 | 
 5 | ![1](https://user-images.githubusercontent.com/25943655/196078529-4bf6ddee-289a-4064-8dc0-784868758c0f.png)
 6 | 
 7 | 👉🏼 [Aquí puedes ver el quiz completo + respuesta correcta + explicación](https://platzi.com/blog/quiz-html-semantico-css-youtube/)
 8 | 
 9 | ![9](https://user-images.githubusercontent.com/25943655/196078532-ca1aa7b0-b73a-4790-a171-6d2525639fc0.png)
10 | 
11 | 👉🏼 [Aquí puedes ver el quiz completo + respuesta correcta + explicación](https://platzi.com/blog/quiz-html-semantico-css-youtube/)
12 | 
13 | ![10](https://user-images.githubusercontent.com/25943655/196078534-5f239bd1-478b-46b9-9833-db8d3aa53245.png)
14 | 👆🏼 [Resultado en CodePen de este código](https://codepen.io/teffcode/details/LYmggBj) 👆🏼
15 | 
16 | ![11](https://user-images.githubusercontent.com/25943655/196078535-9ff6f399-8738-4290-8f02-a8bf1a247876.png)
17 | 👆🏼 [Resultado en CodePen de este código](https://codepen.io/teffcode/details/GRdYYwX) 👆🏼
18 | 
19 | ![12](https://user-images.githubusercontent.com/25943655/196078541-44b3cbc8-0e24-48a5-abfd-341ec6d5dbdc.png)
20 | 👆🏼 [Resultado en CodePen de este código](https://codepen.io/teffcode/pen/MWGPPLK) 👆🏼
21 | 
22 | ![13](https://user-images.githubusercontent.com/25943655/196078542-a34ac990-129c-4be9-a0ea-2c1e981f702b.png)
23 | ![14](https://user-images.githubusercontent.com/25943655/196078546-323c1bc8-59c9-45df-a8af-47d96ad76895.png)
24 | ![15](https://user-images.githubusercontent.com/25943655/196078547-05a60261-b84b-4cd9-879c-086e5b428fd8.png)
25 | 
26 | 👉🏼 [Aquí puedes ver el quiz completo + respuesta correcta + explicación](https://platzi.com/blog/quiz-html-semantico-css-youtube/)
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <ul>
 3 |     <li>
 4 |       <img src="https://img.icons8.com/fluency-systems-regular/48/ffffff/country-house.png"/>
 5 |       <p>Home</p>
 6 |     </li>
 7 |     <li>
 8 |       <img src="https://img.icons8.com/material-outlined/48/ffffff/compass.png"/>
 9 |       <p>Explore</p>
10 |     </li>
11 |     <li>
12 |       <img src="https://img.icons8.com/fluency-systems-regular/48/ffffff/play--v1.png"/>
13 |       <p>Shorts</p>
14 |     </li>
15 |     <li>
16 |       <img src="https://img.icons8.com/material-outlined/48/ffffff/tv-show.png"/>
17 |       <p>Subscriptions</p>
18 |     </li>
19 |   </ul>
20 | </div>
21 | 
22 | <style>
23 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
24 | 
25 | body {
26 |   color: white;
27 |   font-family: 'Roboto', sans-serif;
28 | }
29 | 
30 | ul {
31 |   background: black;
32 |   list-style: none;
33 |   padding: 0;
34 |   width: 240px;
35 | }
36 | 
37 | ul li {
38 |   display: flex;
39 |   align-items: center;
40 |   padding: 0 24px;
41 | }
42 | 
43 | ul li img {
44 |   width: 24px;
45 |   margin-right: 24px;
46 | }
47 | 
48 | ul li p {
49 |   font-size: 14px;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------