Exercise_HTML_CSS3/index.html at main · InMentals/Exercise_HTML_CSS3 · GitHub

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
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blas De Lezo</title>
    <link rel="stylesheet" href="./styles/normalice.css">
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="stylesheet" href="./styles/header.css">
    <link rel="stylesheet" href="./styles/skills.css">
    <link rel="stylesheet" href="./styles/banner.css">
    <link rel="stylesheet" href="./styles/contact.css">
    <link rel="stylesheet" href="./styles/footer.css">
</head>
<body>
    <h1 class="sr-only">Blas de Lezo</h1>
    <header class="header">
        <img src="./images/blas.png" alt="">
        <div class="menu">
            <input type="checkbox" id="checkbox">
            <label for="checkbox" class="icon">
                    <span></span>
                    <span></span>
                    <span></span>
            </label>
            <nav class="dropdown">
                <ul>
                    <li><a href="./proyectos.html">Proyectos</a></li>
                    <li><a href="#skillsId">Skills</a></li>
                    <li><a href="#contact">Contactos</a></li>
                </ul>
            </nav>
        </div>

        <nav class="links">
            <ul class="list">
                <li>
                    <a class="intlink" href="./proyectos.html">Proyectos</a>
                </li>
                <li>
                    <a class="intlink" href="#skillsId">Skills</a>
                </li>
                <li>
                    <a class="intlink" href="#contact">Contacto</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="skills" id="skillsId">
            <h2>Blas de Lezo</h2>
            <p>
                Me llamo Blas de Lezo, y aunque me apodaron “Mediohombre” por las heridas que me dejaron cojo, manco y tuerto, mi espíritu jamás se quebró. Al servicio de España, luché en los mares con astucia y valentía, enfrentando a flotas muy superiores y resistiendo asedios imposibles. La verdadera grandeza no está en la fuerza, sino en la voluntad de no rendirse jamás.
            <h2>Mis Skills</h2>
            <ul class="myskills">
                <li class="skill">
                    <h3>Carisma</h3>
                    <div class="skillBorder">
                        <div class="bar carisma"></div>
                    </div>
                </li>
                <li class="skill">
                    <h3>Liderazgo</h3>
                    <div class="skillBorder">
                        <div class="bar liderazgo"></div>
                    </div>
                </li>
                <li class="skill">
                    <h3>Fuerza</h3>
                    <div class="skillBorder">
                        <div class="bar fuerza"></div>
                    </div>
                </li>
                <li class="skill">
                    <h3>Velocidad</h3>
                    <div class="skillBorder">
                        <div class="bar velocidad"></div>
                    </div>
                </li>
                <li class="skill">
                    <h3>Honor</h3>
                    <div class="skillBorder">
                        <div class="bar honor"></div>
                    </div>
                </li>
                <li class="skill">
                    <h3>Oratoria</h3>
                    <div class="skillBorder">
                        <div class="bar oratoria"></div>
                    </div>
                </li>
            </ul>
        </section>
        <section class="banner" >
            <div class="bannerimg"></div>
            <p>El mediohombre terror de los ingleses</p>
        </section>
        <section class="contact" id="contact">
            <form class="form" action="./registro" method="post">
                <h2 class="form-element heading">Contacto</h2>
                <div class="form-element">
                    <label for="nombre">Nombre</label>
                    <input required name="nombre" id="nombre" placeholder="Pon tu nombre">
                </div>
                <div class="form-element">
                    <label for="apellido">Apellido</label>
                    <input required name="apellido" id="apellido" placeholder="Pon tu apellido">
                </div>
                <div class="form-element">
                    <label for="telefono">Teléfono</label>
                    <input required type="tel" name="telefono" id="telefono" autocomplete="off" pattern="[0-9]{9}" title="Formato 123456789" placeholder="Número de  teléfono">
                </div>
                <div class="form-element">
                    <label for="github">Github username</label>
                    <input pattern="^@[^\s]+" name="github" id="github" placeholder="Con este formato  (@<username)">
                </div>
                <fieldset class="form-element radio">
                    <legend>¿Cómo me conociste?</legend>
                    <div>
                        <label for="uni">Universidad</label>
                        <input required type="radio" name="conocer" id="uni" value="uni">
                    </div>
                    <div>
                        <label for="keepcoding">Keepcoding kick-off</label>
                        <input required type="radio" name="conocer" id="keepcoding" value="keepcoding">
                    </div>
                    <div>
                        <label for="colegio">Colegio</label>
                        <input required type="radio" name="conocer" id="colegio" value="colegio">
                    </div>
                    <div>
                        <label for="gith">Github</label>
                        <input required type="radio" name="conocer" id="gith" value="gith">
                    </div>
                </fieldset>
                <div class="form-element moreinfo">
                    <label for="info">Más información</label>
                    <textarea required name="info" id="info" rows="6" placeholder="Qué más quieres saber" maxlength="180"></textarea>
                </div>
                <div class="form-element check">
                    <input type="checkbox" name="newsletter" id="newsletter">
                    <label for="newsletter">Quiero acceso a la newsletter</label>
                </div>
                <div class="form-element btns">
                    <button class="btn" type="submit">
                        Enviar
                    </button>
                    <input class="btn secondary" type="reset" value="Reset">
                </div>
            </form>
        </section>
    </main>
    <footer class="footer">
        <a class="extlink instagram" href="https://www.instagram.com/donblasdelezoac/">instagram</a>
        <a class="extlink youtube" href="https://www.youtube.com/@blasdelezoyolavarrieta1492">youtube</a>
        <a class="extlink twitter" href="https://x.com/i/flow/login?redirect_after_login=%2Fmediohombre1741">twitter</a>
    </footer>

</body>
</html>