PersonalWEB/index.html at master · bigbae18/PersonalWEB · 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
<!DOCTYPE html>
<html data-localTheme="dark" data-colorTheme="red" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="title" content="Mi página web personal">
    <meta name="description"
        content="Aquí explico sobre mi, mis hobbies, experiencias tanto personales como profesionales e incluso un apartado para que puedan contactarme">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link
        href="https://fonts.googleapis.com/css?family=B612+Mono|Permanent+Marker|Rubik+Mono+One|Major+Mono+Display&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./css/pages/index.css">
    <title>¡El Payo Bestia</title>
</head>

<body>
    <main id="fondo" class="grid wrapper">
        <div id="clickUp" class="button-up">
            <i class="fas fa-chevron-up arrow-up">
            </i>
        </div>
        <header class="flex cabecera">
            <nav class="grid navegacion">
                <a href="index.html" class="this B612">
                    Home
                </a>
                <a href="hobbies.html" class="enlaces B612">
                    ¿Quién es Adrián Pelayo
                </a>
                <a href="about.html" class="enlaces B612">
                    ¿Quién es el Payo Bestia?
                </a>
                <a href="contact.html" class="enlaces B612">
                    Contáctame
                </a>
            </nav>
            <div class="grid cambiar-tema">
                <p class="B612">Selecciona tu tema.</p>
                <div class="flex theme-emoji">
                    <div class="grid local-theme">
                        <button id="btn-dark">🌑</button>
                        <button id="btn-light">☀️</button>
                    </div>
                    <div class="grid session-theme">
                        <button id="btn-red">❤️️</button>
                        <button id="btn-blue">💙</button>
                        <button id="btn-purple">💜</button>
                        <button id="btn-green">💚</button>
                    </div>
                </div>
            </div>
        </header>
        <div class="flex contenedor-principal">
            <div class="grid portada">
                <h2 class="B612">¡Hola! Mi nombre es</h2>
                <h1 class="Major">AdriAn pelAyo</h1>
                <p class="B612">FullStack Developer<span class="barraDeEscribir">|</span>
                </p>
            </div>
        </div>
        <div class="flex contenedor-bajo">
            <div class="grid caja-texto">
                <h3 class="permanentMarker">Y te preguntarás... ¿Qué puedo encontrarme aquí?</h3>
                <p class="B612">En esta página vas a conocer tanto a Adrián como a la Bestia que llevo dentro, ves a por
                    un café, evádete del mundo y presta atención...</p>
                <p class="Major parentesis">(también me puedes contactar rellenando el formulario de este botón)</p>
                <span><a href="./contact.html" class="permanentMarker boton-contacto">Contact me!</a></span>
            </div>
        </div>
        <footer class="flex footer">
            <div class="grid contenedor-footer">
                <h4 class="B612">
                    ¡Si quieres seguirme a mi, o los proyectos que hago, usa estos enlaces!
                </h4>
                <div class="flex contenedor-rrss">
                    <a target="_blank" href="https://www.linkedin.com/in/el-payo-bestia/">
                        <i class="fab fa-linkedin-in rrss color-lin">
                        </i>
                    </a>
                    <a target="_blank" href="https://www.github.com/bigbae18">
                        <i class="rrss color-git fab fa-github">
                        </i>
                    </a>
                    <a target="_blank" href="https://www.instagram.com/el.payobestia18">
                        <i class="rrss color-ig fab fa-instagram">
                        </i>
                    </a>
                </div>
            </div>
        </footer>
    </main>
    <script src="./js/main.js"></script>
</body>

</html>