CursosEmpresasBlogLiveConfPrecios

Posicionamientos: flex box y fixedn (html y css)

Actualizado el 18 de diciembre de 2023

25 min de lectura
ESCRITO POR
Alonzo Flores

floresalonzo117 3,882 Pts

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audictore</title>
    <link rel="shortcut icon" href="imagenes/aBlancoFondoTransparente.png" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="app.js" ></script>
    <script src="app1.js" ></script>
    <script src="app2.js" ></script>
</head>

<body>
     
    
        <div class="fondo1">
            
            <header>
                
                <nav  class="menuHeader">
                    <a href="" class="nav-link">Inicio</a>
                    <a href="" class="nav-link">Sobre mi</a>
                    <a href="" class="nav-link">Contacto</a>
                </nav>

            </header>

            <div class="lateralIzquierda">
                <nav class="barraLateralIzquierda">
                    <a href="mailto:floresalonzo117@gmail.com" class="nav-link"><img src="./imagenes/iconGmail.png"></a>
                    <a href="" class="nav-link"><img src="./imagenes/iconGithub.png"></a>
                    <a href="https://www.linkedin.com/in/audictore" class="nav-link"><img src="./imagenes/iconLinkedin.png"></a>
                    
                </nav>
            </div>

            <div class="contenidoInicio">
                <h3 class="presentacion">Hola, mi nombre es</h3>
                <h1 class="nombre">Alonzo Lara Flores</h1>
                <h1 class="carrera">Soy un ingeniero en T I</h1>
                <h3 class="descripcion">descripcion </h3>
            </div>

        </div>

        


        
        <div class="fondo2">
                
            <div class="calculadora">
                <div class="pantallaCalculadora">
                    <div class="resultado">
                        <span id="screen">0</span>
                    </div>
                </div>

                <div class="botones">
                    <div class="botones1">
                        <button class="itemCalculadora item1 limpiar">C</button>
                        <button class="itemCalculadora item1 borrar">←</button>
                        <button class="itemCalculadora item1 porcentaje">%</button>
                        <button class="itemCalculadora item2 signo">/</button>
                    </div>

                    <div class="botones2">
                        <button class="itemCalculadora numero">7</button>
                        <button class="itemCalculadora numero">8</button>
                        <button class="itemCalculadora numero">9</button>
                        <button class="itemCalculadora item2 signo">X</button>
                    </div>

                    <div class="botones3">
                        <button class="itemCalculadora numero">4</button>
                        <button class="itemCalculadora numero">5</button>
                        <button class="itemCalculadora numero">6</button>
                        <button class="itemCalculadora item2 signo">-</button>
                    </div>

                    <div class="botones4">
                        <button class="itemCalculadora numero">1</button>
                        <button class="itemCalculadora numero">2</button>
                        <button class="itemCalculadora numero">3</button>
                        <button class="itemCalculadora item2 signo">+</button>
                    </div>

                    <div class="botones5">
                        <button class="itemCalculadora itemZero">0</button>
                        <button class="itemCalculadora punto">.</button>
                        <button class="itemCalculadora igual">=</button>
                    </div>
                </div>
            </div>


            <div class="reloj">

                <div class="tiempoCDMX">
                    <h1 id="horaCDMX">00:00:00</h1>
                    <h4>CDMX</h3>
                </div>

                <div class="tiempoWashington">
                    <h1 id="horaWashington">00:00:00</h1>
                    <h4>Washington</h3>
                </div>

                <div class="tiempoLondres">
                    <h1 id="horaLondres">00:00:00</h1>
                    <h3>Londres</h3>
                </div>
                
            </div>


            
            <div class="cronometro">

                
                <div>
                    <h1 class="tiempoCronometro"> 00:00:00:00</h1>
                </div>
                

                <div class="botonesCronometro">
                    <button class="botonCronometro" onclick="iniciar">I</button>
                    <button class="botonCronometro" onclick="pausar">P</button>
                    <button class="botonCronometro" onclick="reiniciar">R</button>
                </div>

               

            </div>




            <div class="fondo2_4"></div>
            <div class="fondo2_5"></div>
            <div class="fondo2_6"></div>
            <div class="fondo2_7"></div>
            <div class="fondo2_8"></div>
        </div>



        <div class="fondo2">
                
           

            <div class="fondo2_1"></div>
            <div class="fondo2_2"></div>
            <div class="fondo2_3"></div>
            <div class="fondo2_4"></div>
            <div class="fondo2_5"></div>
            <div class="fondo2_6"></div>
            <div class="fondo2_7"></div>
            <div class="fondo2_8"></div>
        </div>
    

</body>
</html>```














@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #0a192f;
}

body::-webkit-scrollbar {
	width: 10px;
	background: #0a192f;
}

body::-webkit-scrollbar-thumb {
	background-color: #64FFDA;
	border-radius: 15px;
}


.fondo1{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex-wrap: wrap;
}

header{
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
    position: fixed;
    backdrop-filter: blur(5px);
    
}
nav.menuHeader {
    width: 100%;
    display: flex;
    justify-content: space-around;
    justify-content: flex-end;
    backface-visibility: hidden;
    padding-right: 2%;
    
}
nav.menuHeader a{
    height: 100%;
    display: flex;
    font-weight: bold;
    color: #64FFDA;
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
    transition: all 0.25s ease-out;
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 1%;

}
nav.menuHeader a:hover{
    background: #64FFDA;
    color: #3d2b53;

}


.lateralIzquierda{
    width: 5%;
    height: 95%;
    display: flex;
    justify-content: right;
    align-items: flex-end;
    position: fixed;
    
}
nav.barraLateralIzquierda{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    justify-content: space-around;
}
nav.barraLateralIzquierda a{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
}


.contenidoInicio{
    width: 95%;
    height: 95%;
    display: flex;
    flex-wrap: wrap;
}
.presentacion{
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: #64FFDA;
    font-size: 30px;
    font-family: 'Roboto Mono', monospace;
    padding-left: 10%;
    padding-bottom: 2%;
}
.nombre{
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #ccd6f6;
    font-size: 80px;
    font-family: 'Rubik', sans-serif;
    padding-left: 10%;
}
.carrera{
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: flex-start;
    color: #8892B0;
    font-size: 80px;
    font-family: 'Rubik', sans-serif;
    padding-left: 10%;
}
.descripcion{
    width: 100%;
    height: 46%;
    display: flex;
    justify-content: flex-start;
    color: #8892B0;
    font-size: 30px;
    font-family: 'Rubik', sans-serif;
    padding-top: 3%;
    padding-left: 10%;
}







.fondo2{
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 1% 1% 1% 1%;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-left: 5%;
}


.calculadora{
    display: flex;
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    flex-wrap: wrap;
    margin: 1% 1% 1% 1%;
    padding: 1% 1% 1% 1%;
    border-radius: 15px;
}
.pantallaCalculadora{
    display: flex;
    justify-content: center;
    background-color: #0a192f;
    width: 98%;
    height: 25%;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 15px;
}
.resultado{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 2%;
    color: #64FFDA;
}
.resultado span{
    justify-self: flex-end;
    font-size: 300%;
    font-family: 'Roboto Mono', monospace;
}

.botones{
    display: flex;
    width: 100%;
    height: 70%;
    flex-wrap: wrap;
    gap: 2%;
    
}
.botones1{
    display: flex;
    width: 100%;
    height: 20%; 
    justify-content: space-around;
}
.botones2{
    display: flex;
    width: 100%;
    height: 20%; 
    justify-content: space-around;
}
.botones3{
    display: flex;
    width: 100%;
    height: 20%; 
    justify-content: space-around;
}
.botones4{
    display: flex;
    width: 100%;
    height: 20%; 
    justify-content: space-around;
}
.botones5{
    display: flex;
    width: 100%;
    height: 20%; 
    justify-content: flex-end;
    justify-content: space-around;
}

.itemCalculadora{
    display: flex;
    width: 20%;
    font-size: 150%;
    justify-content: center;
    align-items: center;
    background-color: #0a192f;
    color: #64FFDA;
    font-family: 'Roboto Mono', monospace;
    border-radius: 15px;
    border: none;
}
.itemZero{
    background-color: #0a192f;
    font-size: 150%;
    color: #64FFDA;
    font-family: 'Roboto Mono', monospace;
    width: 45%;
    border-radius: 15px;
    border: none;
}
.item1{
    background-color: #8892B0;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
}

.item2{
    background-color: #FF7D00;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
}
.igual{
    background-color: #FF7D00;
    font-family: 'Roboto Mono', monospace;
}







.reloj{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
    color: #64FFDA;
    font-family: 'Roboto Mono', monospace;
    
}

.tiempoCDMX{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tiempoWashington{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tiempoLondres{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}








.cronometro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
    color: #64FFDA;
    font-family: 'Roboto Mono', monospace
}

.tiempoCronometro{
    display: flex;
    
}

.botonesCronometro{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    
}

.botonCronometro{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 150%;
    font-size: 200%;
    background-color: #0a192f;
    color: #64FFDA;
    font-family: 'Roboto Mono', monospace;
    border-radius: 15px;
    border: none;
}















.fondo2_1{
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_2{
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_3{
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_4{
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_5{
    background-color: #3d2b53;
    width: 20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_6{
    background-color: #3d2b53;
    width:20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_7{
    background-color: #3d2b53;
    width:20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}
.fondo2_8{
    background-color: #3d2b53;
    width:20%;
    height: 45%;
    margin: 1% 1% 1% 1%;
    border-radius: 15px;
}

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados

✨Presente continuo✨

Hola PlatziNauta! 👩🏽👋🏽 Te comparto mis apuntes para que ¡Nunca pares de aprender! 👇🏽 más apuntes en: https://byiris.netlify.app

iris-val

iris-val

5

Resultados

¿Cuál ha sido el reto más grande al que te has enfrentado como líder?Aprender a comunicar mis ideas, asegurarme que la otra persona ente

illanes.mayte

illanes.mayte

3

Apuntes teóricos

PRIMER BLOQUE: ¿Para qué sirve la estadística descriptiva?Estadística descriptiva vs inferencialEstadística de un jugador de fútbol:

maurojasnova

maurojasnova

13

Lettering, el arte de dibujar letras - Proceso de entintado

A través de este vídeo te mostraré cómo entintar un boceto que ya has definido como tu creación. Es recomendable hacer tu boceto inicialment

MelanieViToM

MelanieViToM

1