index.html

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <!-- para concectar con css  -->


    <link rel="stylesheet" href="estilos/home.css">

    <!-- el icono para la pagina  -->
    <link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" />

    <title>Roshka WebSite</title>
</head>

<div class="header">
    <div class="logo">
        <a href="./index.html"> <img class="logoi" src="imagenes/logo-roshka.svg" alt="" /> </a>
        <!-- logo con link -->
    </div>
    <div class="menu">
        <ul>
            <li class="link-menu"><a href="">Home</a></li>
            <li class="link-menu"><a href="formulario.jsp">Postulate</a></li>
            <li class="link-menu"><a href="formulario_bootcamp.jsp">Crear bootcamp</a>
            <li class="link-menu"><a href="login.jsp">Login</a>
            <li class="link-menu"><a href="protected">Recurso Protegido</a></li>
            </li>
        </ul>
    </div>
    <!-- menu  -->
</div>
<!-- header -->


<div class="main">
    <div class="seccion hero">


        <!-- <div class="contenido"> -->

        <br> <br> <br> <br> <br> <br><br>
        <div class="texto">
            <div class="titulo">
                <div class="titulo">
                    <h2>Es tu turno <strong>Postulate</strong> para el bootcamp</h2>
                    <h1>Aprende</h1>
                </div>
            </div>
            <div class="parrafo">
                <p data-block-key="cwggy">Es un campo de entrenamiento intensivo y gratuito para principiantes que ya programan y quieren ser parte de la empresa</p>
            </div>
            <div class="postulacion">
                <a href="formulario.jsp"><button type="submit" class="cta-main">POSTULACION</button></a>
                <!--  <a href="/postulacion" class="cta-main">POSTULACION</a> -->
            </div>
        </div>

        <div class="grafico">
            <img style="align-items:right ;" src="imagenes/ilustracion-herov3.svg" alt="">
        </div>

        <!-- </div> -->

    </div>
    <!-- pie de pagina -->
    <div class="footer">
        <div class="logofooter"><img src="imagenes/logo_footer.svg" alt="" class="logofooter"></div>
    </div>
</div>

</div>
</div>

</body>

</html>
<style>
    img.logoi {
        width: 200px;
    }
    
    img {
        width: 400px;
        padding: 10px;
        display: block;
        padding: 10px;
    }
    
    .header {
        margin-bottom: 0;
        width: 700px;
    }
    
    a {
        float: right 100px;
        color: #fff;
        font-size: larger;
        text-decoration: none;
        padding: 10px;
    }
    
    body {
        background: linear-gradient(100deg, rgba(20, 99, 155, 0.25), rgba(30, 148, 227, 0.25));
        background-image: url(imagenes/descarga.svg);
        background-size: contain;
        background-attachment: fixed;
        background-blend-mode: multiply;
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: white;
        position: relative;
        width: 100px;
        height: 100px;
    }
    /* ul{
    list-style: none;
}
.menu >ul{
    float: right;
}

.menu li a {

    color:#fff;
    text-decoration:none;
    padding:10px 12px;
    display:block;
}

.menu li ul li {
    marging-left
    position:relative;
} */
    
    .menu {
        width: 400%;
        float: left;
    }
    
    .menu ul li {
        float: right;
        list-style-type: none;
        text-align: right;
    }
    
    div.menu {
        float: right;
    }
    
    .menu ul li a {
        padding-left: 5px;
        text-decoration: none;
        font-size: clamp(145px);
        text-transform: uppercase;
        display: block;
        position: relative;
        overflow: hidden;
        padding-bottom: 50px;
        white-space: nowrap;
    }
    
    .grafico,
    svg {
        max-width: 50px;
        display: block;
        height: auto;
    }
    
    .seccion.hero {
        margin-top: 10px;
        padding-bottom: 10px;
        width: 900px;
    }
    
    .hero {
        perspective: 100px;
    }
    
    .hero {
        display: grid;
        grid-template-columns: auto repeat(5, 0.5fr) auto;
    }
    
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 200px;
        /* padding-right: 200px;
 */
    }
    /*  */
    
    .postulacion {
        border-radius: 30px;
    }
    
    .cta-main {
        width: 200px;
        font-family: monospace;
        background-color: yellow;
        border: none;
    }
</style>