index.html 4.93 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
<<<<<<< HEAD
26
      <ul>
27 28 29
        <li class="link-menu"><a href="">Home</a></li>
        <li class="link-menu"><a href="formulario.html">Postulate</a></li>
        <li class="link-menu"><a href="formulario_bootcamp.jsp">Crear bootcamp</a>
30
        </li>
31
      </ul>
32
=======
33 34 35 36 37 38
        <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>
        </ul>
39
>>>>>>> develop
40 41
    </div>
    <!-- menu  -->
Angel Zarate committed
42 43
</div>
<!-- header -->
44 45


Angel Zarate committed
46
<div class="main">
47 48 49 50 51
    <div class="seccion hero">




Angel Zarate committed
52
        <!-- <div class="contenido"> -->
53

54 55
        <br> <br> <br> <br> <br> <br><br>
        <div class="texto">
Angel Zarate committed
56
            <div class="titulo">
57
                <div class="titulo">
58 59
                    <h2>Es tu turno <strong>Postulate</strong> para el bootcamp</h2>
                    <h1>Aprende</h1>
60 61
                </div>
            </div>
62 63
            <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>
64
            </div>
65 66 67
            <div class="postulacion">
                <button type="submit" class="cta-main">POSTULACION</button>
                <!--  <a href="/postulacion" class="cta-main">POSTULACION</a> -->
68
            </div>
Angel Zarate committed
69
        </div>
70

Angel Zarate committed
71 72 73
        <div class="grafico">
            <img style="align-items:right ;" src="imagenes/ilustracion-herov3.svg" alt="">
        </div>
74

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

    </div>
Angel Zarate committed
78 79
    <!-- pie de pagina -->
    <div class="footer">
80
        <div class="logofooter"><img src="imagenes/logo_footer.svg" alt="" class="logofooter"></div>
81
    </div>
Angel Zarate committed
82
</div>
83

84
</div>
Angel Zarate committed
85
</div>
86

Angel Zarate committed
87
</body>
88 89

</html>
Angel Zarate committed
90
<style>
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
    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
118
        background-size: contain;
119 120 121 122 123 124 125 126 127
        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
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
    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;
} */
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 193 194 195 196 197 198 199 200 201
    
    .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
202
 */
203 204 205 206 207 208 209 210 211 212 213 214 215 216
    }
    /*  */
    
    .postulacion {
        border-radius: 30px;
    }
    
    .cta-main {
        width: 200px;
        font-family: monospace;
        background-color: yellow;
        border: none;
    }
</style>