index.html 4.75 KB
Newer Older
1 2
<!DOCTYPE html>
<html lang="en">
3

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


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

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

17
    <title>Roshka WebSite</title>
Angel Zarate committed
18 19
</head>
<div class="header">
20
    <div class="logo">
21 22
        <a href="./index.html"> <img class="logoi" src="imagenes/logo-roshka.svg" alt="" /> </a>
        <!-- logo con link -->
23 24
    </div>
    <div class="menu">
25 26
        <ul>
            <li class="link-menu"><a href="">Home</a></li>
27 28 29
            <li class="link-menu"><a href="formulario.jsp">Postulate</a></li>
            <li class="link-menu"><a href="formulario_bootcamp.jsp">Crear bootcamp</a></li>
            <li class="link-menu"><a href="manage_postulantes.jsp">Manage Postulantes(perdon angel)</a></li>
30
        </ul>
31 32
    </div>
    <!-- menu  -->
Angel Zarate committed
33 34
</div>
<!-- header -->
35 36


Angel Zarate committed
37
<div class="main">
38 39 40 41 42
    <div class="seccion hero">




Angel Zarate committed
43
        <!-- <div class="contenido"> -->
44

45 46
        <br> <br> <br> <br> <br> <br><br>
        <div class="texto">
Angel Zarate committed
47
            <div class="titulo">
48 49 50 51 52 53 54 55 56 57 58
                <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">
                <button type="submit" class="cta-main">POSTULACION</button>
                <!--  <a href="/postulacion" class="cta-main">POSTULACION</a> -->
59
            </div>
Angel Zarate committed
60
        </div>
61

Angel Zarate committed
62 63 64
        <div class="grafico">
            <img style="align-items:right ;" src="imagenes/ilustracion-herov3.svg" alt="">
        </div>
65

Angel Zarate committed
66
        <!-- </div> -->
67 68

    </div>
Angel Zarate committed
69 70
    <!-- pie de pagina -->
    <div class="footer">
71
        <div class="logofooter"><img src="imagenes/logo_footer.svg" alt="" class="logofooter"></div>
72
    </div>
Angel Zarate committed
73
</div>
74

75
</div>
Angel Zarate committed
76
</div>
77

Angel Zarate committed
78
</body>
79

80
</html>
Angel Zarate committed
81
<style>
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
    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);
Angel Zarate committed
109
        background-size: contain;
110 111 112 113 114 115 116 117 118
        background-attachment: fixed;
        background-blend-mode: multiply;
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: white;
        position: relative;
        width: 100px;
        height: 100px;
    }
    /* ul{
Angel Zarate committed
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
    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;
} */
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
    
    .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;
Angel Zarate committed
193
 */
194 195 196 197 198 199 200 201 202 203 204 205 206 207
    }
    /*  */
    
    .postulacion {
        border-radius: 30px;
    }
    
    .cta-main {
        width: 200px;
        font-family: monospace;
        background-color: yellow;
        border: none;
    }
</style>