Skip to content

Instantly share code, notes, and snippets.

@Fahrek

Fahrek/ejerciciocssgrid.markdown

Created November 3, 2022 13:08
Show Gist options
  • Save Fahrek/7390340a0f163fb46ac4cceef015bae2 to your computer and use it in GitHub Desktop.
Save Fahrek/7390340a0f163fb46ac4cceef015bae2 to your computer and use it in GitHub Desktop.
Download ZIP
ejerciciocssgrid
Raw
index.html
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agencia de Viajes</title>
<style>
* {
margin: 0 auto;
}
section {
display: grid;
height: 100vh;
gap: 20px;
grid-template-columns: auto auto auto;
justify-content: center;
align-content: center;
margin: 0 10%;
}
.parent {
width: 400px;
height: 400px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
overflow: hidden;
transition: all .3s;
}
.parent:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.child {
width: 100%;
height: 100%;
opacity: .6;
transition: all .3s;
}
.child:hover {
transform: scale(1.07);
box-shadow: none;
opacity: 1;
}
.container {
height: 100px;
position: relative;
top: 300px;
padding: 4%;
font-size: 20px;
background-color: white;
}
.paris {
background-image: url("https://images.pexels.com/photos/1125212/pexels-photo-1125212.jpeg");
background-size: cover;
background-position: center bottom;
}
.tokio {
background-image: url("https://images.pexels.com/photos/2614818/pexels-photo-2614818.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
}
.barcelona {
background-image: url("https://images.pexels.com/photos/1388030/pexels-photo-1388030.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
}
.berlin {
background-image: url("https://images.pexels.com/photos/1057840/pexels-photo-1057840.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
}
.londres {
background-image: url("https://images.pexels.com/photos/460672/pexels-photo-460672.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
}
.roma {
background-image: url("https://images.pexels.com/photos/532263/pexels-photo-532263.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<main>
<section>
<div class="parent">
<div class="paris child">
<div class="container">
<h4><b>PARIS</b></h4>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
</div>
</div>
</div>
<div class="parent">
<div class="tokio child">
<div class="container">
<h4><b>TOKIO</b></h4>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
</div>
</div>
</div>
<div class="parent">
<div class="barcelona child">
<div class="container">
<h4><b>BARCELONA</b></h4>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
</div>
</div>
</div>
<div class="parent">
<div class="berlin child">
<div class="container">
<h4><b>BERLIN</b></h4>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
</div>
</div>
</div>
<div class="parent">
<div class="londres child">
<div class="container">
<h4><b>LONDRES</b></h4>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
</div>
</div>
</div>
<div class="parent">
<div class="roma child">
<div class="container">
<h4><b>ROMA</b></h4>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment