Scribd
Upload
22 views

CSS 279

This CSS document defines styles for elements on a webpage. It sets styles like font sizes, colors, positioning and layouts using CSS properties. Key sections include styling for headers, paragraphs, images and their positioning in a grid layout using CSS grid. It also includes media queries to adjust the layout for different screen sizes.

Uploaded by

Maria Lopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views

CSS 279

This CSS document defines styles for elements on a webpage. It sets styles like font sizes, colors, positioning and layouts using CSS properties. Key sections include styling for headers, paragraphs, images and their positioning in a grid layout using CSS grid. It also includes media queries to adjust the layout for different screen sizes.

Uploaded by

Maria Lopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS

*{
margin: 0;
padding: 0;
}
ul{
font-size: 20px;
list-style: none;
}
li{
float: left;
}
a{
color: white;
text-decoration: none;
display: block;
padding: 20px 120px;
font-size: 25px;
}
footer{
display: inline-block;
}
.tipoh2{
color: rgb(10, 0, 7);
font-size: 60px;
margin: 20px;
}
.tipoh1{
color: rgb(0, 4, 8);
padding: 10px;
text-align: center;
font-size: 90px;
}
header img{
display: block;
margin: 0 auto;
}
p{
font-size: 20px;
padding: 20px;
font-family: 'Nunito', sans-serif;
margin: 20px;

.tipoh1, .tipoh2{
font-family: 'Koulen', cursive;
}
.aDiferente, footer{
padding: 20px;
font-size: 25px;
color: black;
}
.primerh2{
grid-area: primerh2;
}
.primerp{
grid-area: primerp;
}
.primerimg{
grid-area: primerimg;
margin: 0 auto;
padding: 70px;
}
.segundoh2{
grid-area: segundoh2;
}
.segundop{
grid-area: segundop;
}
.segundaimg{
grid-area: segundaimg;
margin: 0 auto;
padding: 70px;
}
.tercerh2{
grid-area: tercerh2;
}
.tercerp{
grid-area: tercerp;
}
.tercerimg{
grid-area: tercerimg;
margin: 0 auto;
padding: 70px;
}
.articulouno{
display: grid;
grid-template-areas:
"primerh2 primerimg"
"primerp primerimg";
}
.articulodos{
display: grid;
grid-template-areas:
"segundaimg segundoh2"
"segundaimg segundop";
}
.articulotres{
display: grid;
grid-template-areas:
"tercerh2 tercerimg"
"tercerp tercerimg";
}
body{
background-image: linear-gradient(to bottom, rgb(212, 253, 192) , rgb(226, 250,
169));
}

.primerimg:hover{
transform: scale(1.1);
transition: all 2s;
}
.segundaimg:hover{
transform: scale(1.1);
transition: all 2s;
}
.tercerimg:hover{
transform: scale(1.1);
transition: all 2s;
}
.imagenbanner, .banner{
width: 100%;
height: 620px;
background-size: 100% 100%;
position: relative;
display: flex;
justify-content: center;

}
.titulo{
z-index: 1;
width: 100%;
max-width: 800px;
text-align: center;
position: absolute;

}
.img1{
grid-area: img1;
}
.img2{
grid-area: img2;
}
.img3{
grid-area: img3;
}
.img4{
grid-area: img4;
}
.img5{
grid-area: img5;
}
.img6{
grid-area: img6;
}
.img7{
grid-area: img7;
}
.img8{
grid-area: img8;
}
.img9{
grid-area: img9;
}
.img10{
grid-area: img10;
}
.img11{
grid-area: img11;
}
.img12{
grid-area: img12;
}
.img13{
grid-area: img13;
}
.img14{
grid-area: img14;
}
.img15{
grid-area: img15;
}
.img16{
grid-area: img16;
}
.galery{
display: grid;
grid-template-areas:
"img1 img2 img3 img4"
"img5 img6 img7 img8"
"img9 img10 img11 img12"
"img13 img14 img15 img16";
}
.img1, .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9, .img10, .img11, .img
12, .img13, .img14, .img15, .img16{
padding: 5px;
}
body{
overflow-x: hidden;
}
.n-navbar{
background-color: rgb(0, 0, 0);
display: flex;
padding: 120px;
height: 70px;
}
.nn-navbar{
background-color: rgb(0, 0, 0);
display: flex;
padding: 30px;
}
.link-n{
color: rgb(255, 255, 255);
text-decoration: none;
}
.boton{
border-color: white;
}
@media only screen and (min-width: 990px) {
.boton {
display: none !important;
}
}

@media only screen and (max-width: 991px) {


.boton {
display: block !important;
}
}

@media screen and (max-width: 768px) {


.articulo{
grid-template-columns: repeat(1,1fr);
grid-template-areas:
"primerh2"
"primerp"
"primerimg"
"segundoh2"
"segundop"
"segundaimg"
"tercerh2"
"tercerp"
"tercerimg";
}
}
@media screen and (max-width: 768px) {
.galery{
grid-template-columns: repeat(2,1fr);
grid-template-areas:
"img1 img2"
"img3 img4"
"img5 img6"
"img7 img8"
"img9 img10"
"img11 img12"
"img13 img14"
"img15 img16";
}
}
@media screen and (max-width: 320px) {
.galery{
grid-template-columns: repeat(1,1fr);
grid-template-areas:
"img1"
"img2"
"img3"
"img4"
"img5"
"img6"
"img7"
"img8"
"img9"
"img10"
"img11"
"img12"
"img13"
"img14"
"img15"
"img16";
}
}

You might also like