PortfolioChess/index.html at main · jccsoft/PortfolioChess · 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
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Portfolio Lorem</title>
    <meta name="description" content="Portfolio de Lorem, incluyendo información de contacto y ejemplos" />
    <meta property="og:title" content="Portfolio de Lorem" />
    <meta property="og:description" content="Portfolio de Lorem, incluyendo información de contacto y ejemplos" />

    <meta property="og:url" content="https://lively-water-06c583003.5.azurestaticapps.net" />
    <link rel="canonical" href="https://lively-water-06c583003.5.azurestaticapps.net" />

    <meta property="og:image" content="https://lively-water-06c583003.5.azurestaticapps.net/img/Lorem.webp" />
    <meta property="og:image:alt" content="Una sonriente Lorem" />

    <meta property="og:locale" content="es_ES" />
    <meta property="og:type" content="website" />
    <meta property="twitter:card" content="summary_large_image" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />

    <link rel="stylesheet" href="css/site.css" />
    <link rel="shortcut icon" href="favicon.ico" />
  </head>
  <body>
    <main>
      <div id="hero" class="text-over-img">
        <div>
          <h1>Hola, soy<br />Lorem</h1>
        </div>
        <picture>
          <source srcset="img/Lorem.webp" type="image/webp" />
          <img src="img/old/Lorem.png" alt="" aria-hidden="true" />
        </picture>
      </div>

      <div id="contact-section">
        <h2><a href="">Aquí</a> me puedes contactar</h2>
        <form id="contact-form" action="" method="post">
          <div>
            <label for="name">Nombre</label>
            <input type="text" name="name" id="name" required />
          </div>
          <div>
            <label for="email">Correo electrónico</label>
            <input type="email" name="email" id="email" required />
          </div>
          <div>
            <label for="message">Mensaje</label>
            <textarea name="message" id="message" rows="5" required></textarea>
          </div>
          <div>
            <button type="submit">Contactar con Lorem</button>
          </div>
        </form>
      </div>

      <div id="portfolio-section" class="text-over-img">
        <div>
          <h2>Ésta es una muestra de mi trabajo</h2>
          <a href="portfolio.html">ver más</a>
        </div>
        <picture>
          <source srcset="img/PortfolioCollage.webp" />
          <img src="img/old/PortfolioCollage.png" alt="Collage de mi portfolio" />
        </picture>
      </div>

      <div id="my-story">
        <h2>Ésta es mi historia</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus deleniti ad tempore autem nisi accusantium,
          iste repellendus deserunt minima maxime assumenda cum numquam cumque, dolorem a soluta voluptatibus!
          Laboriosam dolorum animi ipsum quaerat deleniti molestiae odit quae repellendus excepturi minus, nisi
          assumenda, provident molestias sed debitis quasi id accusantium mollitia.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, aspernatur vel illum rem veniam
          reprehenderit ea asperiores adipisci labore consequatur accusamus unde soluta ratione debitis repudiandae
          sequi officiis at! Nisi adipisci expedita voluptatum, repudiandae eum omnis natus debitis labore tenetur!
        </p>
      </div>
    </main>
    <footer>
      <div>&copy; <span id="copyright-year"></span> by JC del Campo</div>
      <div class="img-credit">
        <a
          href="https://www.freepik.es/foto-gratis/hermosa-mujer-negocios-cabello-corto-oscuro-camisa-blanca-sosteniendo-carpeta-negra-manos-mientras-mira-alegremente-camara-sobre-fondo-azul_23676270.htm#query=mujer%20negocios&position=2&from_view=keyword&track=ais&uuid=6373f098-f8ea-458c-bdfd-e84ea844cf02"
          >Imagen de garetsvisual</a
        >
        en Freepik
      </div>
    </footer>
    <script src="js/app.js"></script>
    <script>
      app.homepageSetup();
    </script>
  </body>
</html>