index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./images/f.ico" type="image/x-icon">
    <!--Obs: el icono siempre antes del title si no habra error porsiaca-->
    <title>El Veraz</title>
    <link rel="stylesheet" href="./styles/reset.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/main.css">
    <script src="https://kit.fontawesome.com/43f3cc2ec8.js"></script>
</head>

<body>
    <div class="wrapper">
        <header>
            <div class="container">
                <div class="header-left">
                    <strong>
                           <a class="logo" href="#">ELVERAZ</a>
                    </strong>
                    <nav class="nav-main">
                        <ul>
                            <li>
                                <a href="">Politica</a>
                            </li>
                            <li>
                                <a href="">Deporte</a>
                            </li>
                            <li>
                                <a href="">Espectaculo</a>
                            </li>
                            <li>
                                <a href="">Tecnologia</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <ul class="list-share">
                    <li>
                        <i class="fas fa-caret-up"></i>
                    </li>
                    <li>

                        <i class="fas fa-search"></i>
                    </li>
                </ul>
            </div>
        </header>
        <main>
            <div class="container">
                <section class="coverpage">

                    <div class="container-one-two">
                        <article class="post post-one">
                            <figure>
                                <img src="https://picsum.photos/470/340" alt="">
                            </figure>
                            <div class="text">
                                <h4 class="label"><a href="#">Politica</a></h4>
                                <h2>Politica</h2>
                                <div>
                                    <h3>Salvador del Solar es el nuevo presidente del Consejo de Ministros</h3>
                                    <div class="time-social">
                                        <time>Hace 3 horas</time>
                                        <ul>
                                            <li>
                                                <a class="btn-social btn-social-fb" href="">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="btn-social btn-social-tw" href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </article>
                        <article class="post post-two">
                            <figure>
                                <img src="https://picsum.photos/143/340" alt="">
                            </figure>
                            <div class="text">
                                <h4 class="label"><a href="#">Politica</a></h4>
                                <div>
                                    <h3>Las protestas cada vez son mayores</h3>
                                    <div class="time-social">
                                        <time>Hace 3 horas</time>
                                        <ul>
                                            <li>
                                                <a class="btn-social btn-social-fb" href="">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="btn-social btn-social-tw" href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>

                    <div class="articles">
                        <article class="post post-three">
                            <figure>
                                <img src="https://picsum.photos/306/100" alt="">
                            </figure>
                            <div class="text">
                                <h4 class="label">
                                    <a href="#">Politica</a>
                                </h4>
                                <div>
                                    <h3>Las chicas campeonas otra vez</h3>
                                    <div class="time-social">
                                        <time>Hace 3 horas</time>
                                        <ul>
                                            <li>
                                                <a class="btn-social btn-social-fb" href="">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="btn-social btn-social-tw" href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </article>
                        <article class="post post-three">
                            <figure>
                                <img src="https://picsum.photos/306/100" alt="">
                            </figure>
                            <div class="text">
                                <h4 class="label">
                                    <a href="#">Politica</a>
                                </h4>
                                <div>
                                    <h3>Los cuatro famosos afinaron su pulso para ganar los 'Aros flotantes'</h3>
                                    <div class="time-social">
                                        <time>Hace 3 horas</time>
                                        <ul>
                                            <li>
                                                <a class="btn-social btn-social-fb" href="">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="btn-social btn-social-tw" href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </article>
                        <article class="post post-three">
                            <figure>
                                <img src="https://picsum.photos/306/100" alt="">
                            </figure>
                            <div class="text">
                                <h4 class="label">
                                    <a href="#">Politica</a>
                                </h4>
                                <div>
                                    <h3>"Facebook Down": las teorías que explican la caída mundial de la red social</h3>
                                    <div class="time-social">
                                        <time>Hace 3 horas</time>
                                        <ul>
                                            <li>
                                                <a class="btn-social btn-social-fb" href="">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="btn-social btn-social-tw" href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </section>

                <section class="contenedor-secciones">

                    <section class="actuality">
                        <h2>Actualidad</h2>
                        <div class="present">
                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Politica</a>
                                    </h4>
                                    <div>
                                        <h3>Vicente Zeballos: Estas son las 21 preguntas que responderá el ministro de Justicia</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Espectaculo</a>
                                    </h4>
                                    <div>
                                        <h3>Mario Irivarren a Rafael Cardozo: “Atrasaste a Loco Vargas con la ‘vengadora’”</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Politica</a>
                                    </h4>
                                    <div>
                                        <h3>Vicente Zeballos: Estas son las 21 preguntas que responderá el ministro de Justicia</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Tecnologia</a>
                                    </h4>
                                    <div>
                                        <h3>Mario Irivarren a Rafael Cardozo: “Atrasaste a Loco Vargas con la ‘vengadora’”</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Politica</a>
                                    </h4>
                                    <div>
                                        <h3>Vicente Zeballos: Estas son las 21 preguntas que responderá el ministro de Justicia</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>


                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Espectaculo</a>
                                    </h4>
                                    <div>
                                        <h3>Mario Irivarren a Rafael Cardozo: “Atrasaste a Loco Vargas con la ‘vengadora’”</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Politica</a>
                                    </h4>
                                    <div>
                                        <h3>Vicente Zeballos: Estas son las 21 preguntas que responderá el ministro de Justicia</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Tecnologia</a>
                                    </h4>
                                    <div>
                                        <h3>Mario Irivarren a Rafael Cardozo: “Atrasaste a Loco Vargas con la ‘vengadora’”</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                        </div>
                        <div class="enlace">
                            <a href="./styles/pages/detail.html">Ver mas</a>
                        </div>

                    </section>
                    <section class="most-read">
                        <h2>Mas leidas</h2>
                        <div class="most">

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Deportes</a>
                                    </h4>
                                    <div>
                                        <h3>Newell's vs Gimnasia La Plata EN VIVO: partidazo por la Superliga Argentina</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>

                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Deportes</a>
                                    </h4>
                                    <div>
                                        <h3>Newell's vs Gimnasia La Plata EN VIVO: partidazo por la Superliga Argentina</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Deportes</a>
                                    </h4>
                                    <div>
                                        <h3>Newell's vs Gimnasia La Plata EN VIVO: partidazo por la Superliga Argentina</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <article class="post post-three present-article">
                                <figure>
                                    <img src="https://picsum.photos/306/160" alt="">
                                </figure>
                                <div class="text">
                                    <h4 class="label">
                                        <a href="#">Deportes</a>
                                    </h4>
                                    <div>
                                        <h3>Newell's vs Gimnasia La Plata EN VIVO: partidazo por la Superliga Argentina</h3>
                                        <div class="time-social">
                                            <time>Hace 3 horas</time>
                                            <ul>
                                                <li>
                                                    <a class="btn-social btn-social-fb" href="">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social btn-social-tw" href="#">
                                                        <i class="fab fa-twitter"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>


                        </div>

                        <div class="enlace">
                            <a href="./styles/pages/category.html" class="green">Ver mas</a>
                        </div>

                    </section>


                </section>

            </div>
        </main>
        <footer>
            <div class="container">
                <div class="container-footer">

                    <strong>
                    <a class="logo" href="./styles/pages/mailing.html">ELVERAZ</a>
              </strong>

                    <p>Todos los derechos reservados | &copy; Copyright <span id="anio"></span> </p>

                </div>
            </div>


        </footer>
    </div>
    <script src="./scripts/main.js"></script>
</body>

</html>