Blog-Tech/blog.html at master · HarpeBlue/Blog-Tech · 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
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Blog</title>
	<link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="assets/Social Media/font/flaticon.css">
    <link rel="stylesheet" href="styles/media_queries.css">
</head>
<body>
	<!-- sección del header -------------------------------------------------------------------------->
	<header class="header">
		<!-- redes sociales -->
		<section class="header_icons--container">
			<div class="icons">
				<a href=""><span class="flaticon-001-facebook"></span></a>
				<a href=""><span class="flaticon-002-twitter"></span></a>
				<a href=""><span class="flaticon-011-instagram"></span></a>
				<a href=""><span class="flaticon-010-linkedin"></span></a>
				<a href=""><span class="flaticon-008-youtube"></span></a>
			</div>
		</section>
		<!-- navegación about me and blogs -->
		<nav class="nav">
			<section class="nav_logo--container">
				<a href="blogs.html"><img src="assets/images/Logo-negro.png" alt="Logo de mi Blog"></a>
			</section>
			<section class="profile--link">
				<a href="profile.html">Sobre mí</a>
			</section>
		</nav>
	</header>
    <!-- sección principal de un blog ---------------------------------------------------------------->
    <main>
        <figure class="grid-container blogpost_img--container">
            <img src="assets/images/news.image.jpg" alt="">
        </figure>
        <section class="blogpost_main--container">
            <div class="grid-container">
                <h3>Noticias</h3>
                <article>
                    <h1>Título del Blogpost</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur labore ut enim nesciunt, error soluta vitae rerum voluptas laboriosam facere? Tempora odit nemo consequuntur non saepe beatae eaque solutas. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati hic reprehenderit tempora, architecto voluptatem praesentium adipisci quae perspiciatis placeat maiores minima nemo alias quo, iste aspernatur libero voluptates labore qui. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium voluptatem soluta nam facere tempore mollitia amet sed eligendi, sunt sint sequi deserunt? Ea eveniet temporibus in aperiam praesentium dolorem doloribus.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, ea, sequi ullam debitis et maxime, veniam ab consectetur eius vero sapiente repellat magni eum fugiat odit ipsa ipsum beatae. Cupiditate. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto illum beatae et repellat fugit aliquam, error voluptas assumenda asperiores autem perferendis ad nihil eligendi similique iusto eos delectus dignissimos voluptatem?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam officia quibusdam magni! Porro alias ea voluptas atque eveniet obcaecati quo. Iste, veniam. Et praesentium labore eligendi aspernatur eos unde molestias!</p>
                </article>
            </div>
        </section>
        <!-- sección de contacto -->
        <section class="contact_main--container">
            <div>
                <img src="assets/iconos/029-user.png" alt="">
                <div class="contact_left">
                    <a href="profile.html">Contacto</a>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, cupiditate!</p>
                </div>
            </div>
            <div>
                <img src="assets/iconos/022-typewriter.png" alt="">
                <div class="contact_right">
                    <a href="profile.html">Escribe</a>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident id!</p>
                </div>
            </div>
        </section>
    </main>
	<!-- Sección del footer -------------------------------------------------------------------------->
	<footer class="footer">
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
	</footer>
</body>
</html>