index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Título de la web -->
    <title>Sergie Code Web</title>
    <!-- Esta es la importación de nuestro archivo CSS  -->
    <link rel="stylesheet" href="style.css">

    <!-- https://boxicons.com/ -->
    <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

    <!-- https://remixicon.com/ -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css" rel="stylesheet" />

    <!-- https://fonts.google.com/ -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@200;300;400;500;600;700&display=swap"
        rel="stylesheet">

</head>

<body>

    <!-- Esta sección es la cabecera de la página web la cual tendrá logo y barra de navegación  -->
    <header>
        <!-- LOGO  -->
        <a href="#" class="logo">SERGIE CODE</a>

        <!-- Truco para que el botón sea clickeable sin usar JAVASCRIPT -->
        <input type="checkbox" name="checkbox" id="menu-toggle">
        <label for="menu-toggle" class="menu-icon-action">
            <div class='bx bx-menu' id="menu-icon"></div>
        </label>


        <ul class="navlist">
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre mí</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>

    </header>

        <!-- HERO SECTION  -->

        <section class="hero">
            <div class="hero-text">
                <h5>Frontend Developer</h5>
                <h4>ReactJS Tech Lead</h4>
                <h1>Sergie Code</h1>
                <p>Aprendé todas las tecnologías conmigo y podrás obtener tu <br>
                    primer trabajo de desarrollador web al finalizar este curso.
                </p>
                <a href="#">CV</a>
                <a href="#" class="videos"><i class="ri-play-fill"></i>Mirá mis videos</a>
            </div>

            <div class="hero-img">
                <img src="/assets/imgs/sergie.png" alt="sergie code foto">
            </div>
            
        </section>

        <div class="icons">
            <a href="#"><i class="ri-instagram-line"></i></a>
            <a href="#"><i class="ri-youtube-line"></i></a>
            <a href="#"><i class="ri-github-fill"></i></a>
        </div>

        <div class="scroll-down">
            <a href="#"><i class="ri-arrow-down-s-fill"></i></a>
        </div>


</body>

</html>