Fue una muy grata experiencia, como mencioné anteriormente, retomar un lenguaje que me hizo tan feliz hace muchos años como lo es el HTML, y aventurarme a conocer el CSS. Por ello, comparto un poco de los resultados...
CSS 1
h1{
color: #FF6B6C;
font-family: monospace;
font-style: bold;
font-size: 10 pt;
text-align: center;
}
h3{
color: black;
font-family: sans-serif;
font-style: ;
font-size: 10 pt;
text-align: center;
}
body {
background-color: #9bcf86;
color: black;
}
#gorgorito{
color: white;
}
.cut1 {
margin: auto;
border: 15px solid #f5188e;
padding: 10px;
background-color: #f59add;
width: 60%;
text-align: center;
images-align: center;
font-family: monospace;
}
.you {
overflow: hidden;
position: relative;
width:100%;
}
.you::after {
padding-top: 50.25%;
display: block;
content: '';
}
.you iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilodos.css">
<meta name="viewport" content="initial-scale=1.0, witdh=device-width">
<tittle>Esta es una página dedicada a lo gumy</tittle>
<link rel="icon" href="/" sizes="32x32">
</head>
<body>
<br> <br>
<!-- modelo de caja -->
<div class="cont1">
<span class="tit1">Esto es un titulo</span>
</div>
<br> <br>
<!-- aqui display-->
<div class="cont2">
<p id="pa1">
Este es el párrafo uno
</p>
<p id="pa2">
Este es el párrafo dos
</p>
<p id="pa3">
Este es el párrafo tres
</p>
</div>
<br>
<div class="cont3">
<span>Menú</span>
<p>
Theodor Decker, un niño de trece años se enfrenta a una ruptura radical de su vida cuando en una explosión dentro de un museo de Nueva York pierde a su madre, que es el pilar de su vida, y se encuentra con un anciano que lo impulsa a tomar una pintura, casi de forma inconsciente, que a partir de ese momento se convertirá en una presencia de culpa y deseo constante en el paso de los años.
Desde ese momento, Theodor, afronta el vaivén de un huérfano que pasa de habitar una casa de estrato alto en Nueva York a comenzar y atravesar su adolescencia en el desenfrenado panorama de Las Vegas, lugar en el que mientras mantiene la tensión de vivir con un padre que lo había abandonado, conoce a un amigo incondicional con el cual compartir su dolor e insertarse en el mundo de las drogas, hasta que su padre muere y se ve obligado a huir de casa para buscar refugio en su ciudad natal.
De esta forma, crece con un sentimiento de culpa y ausencia por la muerte de ambos padres que, combinado con la constante tensión de guardar la pintura El Jilguero de Fabritius, que robó desde el atentado al museo del que fue víctima, lo empujan a llevar una viva de zozobra y de tensión permanente, mientras intenta ser un individuo normal, casarse y triunfar, aunque sea de forma turbia, en su ámbito profesional.
Sin embargo, su vida da un giro al entrar en desespero por darse cuenta que en realidad había perdido la pintura, pues esta fue robada años atrás por su mejor amigo que la perdió posteriormente, lo que lo impulsa a recuperar, de la mano de este, el cuadro, aunque esto significara terminar arrastrado por mafias internacionales que lo llevan al límite del asesinato y la persecución hasta que por fin la pintura se encuentra a salvo y, con ello, se abre la posibilidad de reconstruir su vida, aunque marcado por el estado de tránsito que produce la experiencia de lo bello, ese recorrido entre el dolor y felicidad que produce la distancia entre el ser humano y la obra de arte que le da sentido a su vida.
</p>
<img src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c39a.png" width="2%">
</div>
<br>
<!--Float-->
<div class="cont4">
<span>Helado</span>
<img src="https://i.pinimg.com/originals/3d/50/ff/3d50ff7a51d02824d8c6ccdfdf57bc1d.jpg" width="250">
<p>
Vanilla Sky es una hermandad creada bajo la misión de crear un espacio entre los miembros donde es posible el crecimiento y progreso en común siempre bajo el apoyo mutuo y el respeto por el otro. Es un firme propósito de la hermandad valorar con plenitud a cada uno de sus miembros, como jugadores y personas, de tal forma que cada uno tiene un rol, papel e importancia equitativa en ella. Es así como la hermandad se forja cada día con el firme propósito de potenciar la diversión del juego al generar dinámicas constantes en equipo y así compartir grandes experiencias en conjunto.
</p>
</div>
</body>
</html>
CSS 2
/*modelo de caja*/
* {
box-sizzing: border-box;
}
.cont1 {
width: 400px;
height: 200px;
border: 4px solid pink;
padding: 20px;
text-align: center;
margin: 0 auto;
}
.cont1 .tit1 {
font-size: 30px;
border: 2px solid pink;
}
/*display*/
.cont2 {
width: 300px;
height: 200px;
border: 2px solid pink;
margin: auto;
text-align: center;
}
.cont2 #pa1 {
width: 40%;
border: 2px solid red;
display: block;
margin: auto;
}
.cont2 #pa2 {
width: 40%;
border: 2px solid purple;
display: inline;
margin: auto;
}
.cont2 #pa3 {
width: 40%;
border: 2px solid green;
display: inline-block;
margin: auto;
}
/*posiciones*/
.cont3 {
width: 30%;
height: 200px;
border: 2px solid blue;
margin: auto;
display: block;
position: relative; /*cambiar*/
overflow: scroll;
}
.cont3 span{
width: 50%;
display: block;
margin: auto;
font-size: 60pt;
font-family: monospace;
font-weight: 600;
text-align: center;
position: sticky;
top: 0%;
}
.cont3 p{
margin: 1%;
padding: 2%;
font-size: 12pt;
line-height: 25px;
text-align: justify;
font-family: monospace;
position: relative;
top: 10%;
left: 2%;
}
.cont3 img {
position: fixed;
top: 50%;
left: 2%;
}
/*float*/
.cont4 {
width: 40%;
border: 2px solid red;
margin: 10% auto;
}
.cont4 span {
display: block;
width: 50%;
border: 2px solid purple;
margin: 10% auto;
}
.cont4 img {
float: right;
margin: 0 5%
}
.cont4 p {
float: left;
width: 30%;
margn 0 2%;
}
.cont4::after {
content: "";
display: block;
clear: both;
}
Comentarios
Publicar un comentario