Blog/blog.html at master · JuanCamiloM21/Blog · 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
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Blog</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/media-queries.css" />
    <link rel="stylesheet" href="css/font/flaticon.css" />
  </head>
  <body>
    <header>
      <section class="header-icons-container">
        <div class="icons">
          <a href="https://www.facebook.com/JuanCamiloM21" target="_blank"
            ><span class="flaticon-001-facebook"></span
          ></a>
          <a href="https://twitter.com/JuanCamiloM21" target="_blank"
            ><span class="flaticon-002-twitter"></span
          ></a>
          <a href="https://www.instagram.com/juancamilom21/" target="_blank"
            ><span class="flaticon-011-instagram"></span
          ></a>
          <a href="https://www.linkedin.com/in/juancamilom21/" target="_blank"
            ><span class="flaticon-010-linkedin"></span
          ></a>
          <a href="https://www.youtube.com/user/juank951121" target="_blank"
            ><span class="flaticon-008-youtube"></span
          ></a>
        </div>
      </section>
      <nav>
        <section class="nav-logo-container">
          <a href="https://juancamilom21.github.io/Blog/"
            ><img src="assets/img/Logo-blanco.png" alt="Logo de mi blog"
          /></a>
        </section>
        <section class="profile-link">
          <a href="perfil.html">Sobre mi</a>
        </section>
      </nav>
    </header>

    <main>
      <section class="grid-container blogpost-img-container">
        <img src="assets/img/lorenzo-herrera-p0j-mE6mGo4-unsplash.jpg" alt="" />
      </section>
      <section class="blogpost-main-container">
        <div class="grid-container-blog">
          <h3>Noticias</h3>
          <article>
            <h1>Titulo del Blogpost</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
              et dolore magni blanditiis iste ullam. Reprehenderit blanditiis
              nisi aliquam quasi optio necessitatibus laboriosam quidem.
              Accusamus maxime dicta quas neque suscipit?
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Exercitationem omnis similique cumque a atque, porro reprehenderit
              dolore eveniet ad tenetur vero quaerat adipisci, molestias magnam
              ducimus in harum aperiam! Blanditiis. Lorem ipsum dolor sit, amet
              consectetur adipisicing elit. Facere, fugit quam. Ut dolorem
              magnam delectus consectetur voluptate quas optio earum
              exercitationem quam, id incidunt molestiae, illum sit saepe, nobis
              dolor!
            </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem
              rem repellendus pariatur, minima ut voluptatibus vitae harum
              eligendi praesentium aliquid nam, quis, voluptatem aliquam
              veritatis? Neque porro vel minus similique.
            </p>
          </article>
        </div>
      </section>
      <section class="contact-main-container">
        <div class="contact-left">
          <img src="assets/img/013-newsletter.png" alt="" />
          <div class="left">
            <a href="">Contacto</a>
            <p>
              Texto de intro. Lorem ipsum dolor sit amet <br />
              consectetur adipisicing elit.
            </p>
          </div>
        </div>
        <div class="contact-right">
          <img src="assets/img/006-like.png" alt="" />
          <div class="right">
            <a href="">Escribe</a>
            <p>
              Texto de intro. Lorem ipsum dolor sit amet <br />
              consectetur adipisicing elit.
            </p>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </footer>
  </body>
</html>