-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (105 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark mode</title>
<!-- css librerias -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"
integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.2.1/hamburgers.min.css">
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Google Fonts -->
<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=Montserrat&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="./assets/styles/dark-mode.css">
<link rel="stylesheet" href="./assets/styles/styles.css">
<link rel="stylesheet" href="./assets/styles/hamburger.css">
<link rel="stylesheet" href="./assets/styles/contenido.css">
</head>
<body>
<header class="header">
<!-- Desktop menu -->
<div class="header__container">
<a href="index.html" class="header__logo">
<p class="logo__texto">SofiDev</p>
</a>
<nav class="header__nav__menu panel" id="panel">
<ul>
<li class="menu__list"><a href="#home" class="header__menu-link">Home</a></li>
<li class="menu__list"><a href="#about" class="header__menu-link">About me</a></li>
<li class="menu__list"><a href="#skills" class="header__menu-link">Skills</a></li>
<li class="menu__list"><a href="#hoobies" class="header__menu-link">Hobbies</a></li>
<li class="menu__list"><a href="#contact" class="header__menu-link">Contact</a></li>
</ul>
</nav>
<div class="toogle-btn">
<i class="bi bi-brightness-low-fill"></i>
</div>
</div>
</header>
<!-- Mobile menu (hamburger) -->
<button class="panel-btn hamburger hamburger--emphatic" type="button" aria-label="menu">
<span class="hamburger-box">
<span class="hamburger-inner" id="hamburguesa"></span>
</span>
</button>
<main>
<!-- Borra esta parte e inserta tu propio contenido -->
<section id="home" class="texto__section">
<h2 class="texto__titulo">Home</h2>
<div class="texto__container">
<p class="contenido__ejemplo">Aquí encontrarás el tutorial de "Cómo implementar Modo Oscuro en tu sitio web". Si este contenido y Material te sirve en algo, te agradezco tu like y suscríbete para tener más contenido así.</p>
<p class="contenido__ejemplo">Hecho con ❤️</p>
</div>
</section>
<section id="about" class="texto__section">
<h2 class="texto__titulo">About me</h2>
<div class="texto__container">
<p class="contenido__ejemplo">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus
nostrum eum accusantium porro maxime. Atque assumenda temporibus eveniet similique voluptatibus
facere, nihil optio illo magni quidem qui, a delectus voluptas?
Eveniet ex nam animi impedit! Consequatur aut officiis facere, vitae voluptatem, iure animi fugit
recusandae commodi voluptatum aperiam quas ipsum! Rem est atque neque ipsa exercitationem quis
excepturi ipsum nam.</p>
</div>
</section>
<section id="skills" class="texto__section">
<h2 class="texto__titulo">Skills</h2>
<div class="texto__container">
<p class="contenido__ejemplo">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus
nostrum eum accusantium porro maxime. Atque assumenda temporibus eveniet similique voluptatibus
facere, nihil optio illo magni quidem qui, a delectus voluptas?
Eveniet ex nam animi impedit! Consequatur aut officiis facere, vitae voluptatem, iure animi fugit
recusandae commodi voluptatum aperiam quas ipsum! Rem est atque neque ipsa exercitationem quis
excepturi ipsum nam.</p>
</div>
</section>
<section id="hoobies" class="texto__section">
<h2 class="texto__titulo">Hobbies</h2>
<div class="texto__container">
<p class="contenido__ejemplo">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus
nostrum eum accusantium porro maxime. Atque assumenda temporibus eveniet similique voluptatibus
facere, nihil optio illo magni quidem qui, a delectus voluptas?
Eveniet ex nam animi impedit! Consequatur aut officiis facere, vitae voluptatem, iure animi fugit
recusandae commodi voluptatum aperiam quas ipsum! Rem est atque neque ipsa exercitationem quis
excepturi ipsum nam.</p>
</div>
</section>
<section id="contact" class="texto__section">
<h2 class="texto__titulo">Contact</h2>
<div class="texto__container">
<p class="contenido__ejemplo">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus
nostrum eum accusantium porro maxime. Atque assumenda temporibus eveniet similique voluptatibus
facere, nihil optio illo magni quidem qui, a delectus voluptas?
Eveniet ex nam animi impedit! Consequatur aut officiis facere, vitae voluptatem, iure animi fugit
recusandae commodi voluptatum aperiam quas ipsum! Rem est atque neque ipsa exercitationem quis
excepturi ipsum nam.</p>
</div>
</section>
</main>
<script type="module" src="./modules.js"></script>
</body>
</html>