Skip to content

Commit a24736f

Browse files
ema-olgema-olg
committed
Cambios v2 grupo1
Se agrega sombras a cajas de películas, se implementa Bootstrap y barra navegadora, y detalles mínimos.
1 parent d534b41 commit a24736f

2 files changed

Lines changed: 73 additions & 17 deletions

File tree

‎assets/css/Estilos-ejemplos.css‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,53 @@
11
body {
22
box-sizing: border-box;
3-
background-color: darkgrey;
3+
background-color: #000;
44
}
5+
56
.contenedor {
67
max-width: 1100px;
78
margin: 0 auto;
89
}
10+
911
h2 {
1012
flex: 0 1 100%;
1113
text-align: center;
1214
font-size: 1.6rem;
15+
color: #fff;
1316
}
17+
1418
h3 {
1519
font-family: 'Libre Baskerville', serif;
16-
margin:0;
20+
margin: 0;
1721
font-weight: 700;
18-
1922
}
23+
2024
img {
2125
max-width: 100%;
26+
box-shadow: 3px 3px 3px rgb(134, 128, 128);
2227
}
28+
2329
.contenido {
2430
background-color: white;
2531
margin-bottom: 1rem;
2632
text-transform: uppercase;
27-
33+
box-shadow: 3px 3px 3px rgb(134, 128, 128);
2834
}
35+
2936
.contenido {
3037
padding: 1rem;
3138
text-align: center;
3239
}
40+
3341
.contenido h3 {
3442
text-align: center;
3543
font-size: .9rem;
3644
line-height: 1.4rem;
3745
}
3846

3947
.contenido span {
40-
color:#db008d;
48+
color: #db008d;
4149
}
50+
4251
.boton {
4352
background-color: #008fd1;
4453
color: white;
@@ -48,6 +57,7 @@ img {
4857
text-decoration: none;
4958
text-transform: uppercase;
5059
}
60+
5161
@media screen and (min-width:480px) {
5262
.contenido-principal {
5363
display: flex;
@@ -56,12 +66,11 @@ img {
5666
}
5767
.entrada {
5868
flex: 0 1 calc(50% - 1rem);
59-
6069
}
6170
}
6271

6372
@media screen and (min-width:768px) {
6473
.entrada {
6574
flex: 0 1 calc(33% - 1rem);
6675
}
67-
}
76+
}

‎index.html‎

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,57 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
88
<title>Pagina Ejemplos</title>
9+
10+
<!-- Bootstrap CSS -->
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
912
<link rel="stylesheet" href="assets/css/Estilos-ejemplos.css">
1013
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700" rel="stylesheet">
1114
</head>
1215

1316
<body>
17+
<nav class="navbar navbar-expand-lg bg-danger ">
18+
<div class="container-fluid">
19+
<a class="navbar-brand" href="#">AWAKELAB</a>
20+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
24+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
25+
<li class="nav-item">
26+
<a class="nav-link active" aria-current="page" href="#">Home</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="#">Link</a>
30+
</li>
31+
<li class="nav-item dropdown">
32+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
33+
Dropdown
34+
</a>
35+
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
36+
<li><a class="dropdown-item" href="#">Action</a></li>
37+
<li><a class="dropdown-item" href="#">Another action</a></li>
38+
<li>
39+
<hr class="dropdown-divider">
40+
</li>
41+
<li><a class="dropdown-item" href="#">Something else here</a></li>
42+
</ul>
43+
</li>
44+
<li class="nav-item">
45+
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
46+
</li>
47+
</ul>
48+
</div>
49+
</div>
50+
</nav>
51+
52+
53+
54+
1455
<div class="contenedor">
1556
<main class="contenido-principal">
1657
<h2>CATALOGO</h2>
@@ -24,7 +65,7 @@ <h3>Pelicula Entretenida</h3>
2465
<p>Por: <span>Marvel</span></p>
2566
<a href="https://youtu.be/gR3JFH_3LhY" class="boton"> Ver Trailer</a>
2667
</div>
27-
</article>
68+
</article>
2869
<article class="entrada">
2970
<img src="assets/imagenes/jungleCruise.jpg" alt="texto entrada">
3071
<div class="contenido">
@@ -35,7 +76,7 @@ <h3>Pelicula que Cumple</h3>
3576
<p>Por: <span>Disney</span></p>
3677
<a href="https://youtu.be/f_HvoipFcA8" class="boton"> Ver Trailer</a>
3778
</div>
38-
</article>
79+
</article>
3980
<article class="entrada">
4081
<img src="assets/imagenes/laNube.jpg" alt="texto entrada">
4182
<div class="contenido">
@@ -46,7 +87,7 @@ <h3>Pelicula Recomendable</h3>
4687
<p>Por: <span>Netflix</span></p>
4788
<a href="https://youtu.be/o2aTBOeCTcw" class="boton"> Ver Trailer</a>
4889
</div>
49-
</article>
90+
</article>
5091
<article class="entrada">
5192
<img src="assets/imagenes/Space-Jam.jpg" alt="texto entrada">
5293
<div class="contenido">
@@ -57,7 +98,7 @@ <h3>Pelicula para verla por partes</h3>
5798
<p>Por: <span>Disney</span></p>
5899
<a href="https://youtu.be/olXYZOsXw_o" class="boton"> Ver Trailer</a>
59100
</div>
60-
</article>
101+
</article>
61102
<article class="entrada">
62103
<img src="assets/imagenes/theTomorowWar.jpg" alt="texto entrada">
63104
<div class="contenido">
@@ -68,7 +109,7 @@ <h3>Pelicula que no defrauda</h3>
68109
<p>Por: <span>Amazon</span></p>
69110
<a href="https://youtu.be/QPistcpGB8o" class="boton"> Ver Trailer</a>
70111
</div>
71-
</article>
112+
</article>
72113
<article class="entrada">
73114
<img src="assets/imagenes/vivo.jpg" alt="texto entrada">
74115
<div class="contenido">
@@ -79,9 +120,15 @@ <h3>Pelicula Excelente</h3>
79120
<p>Por: <span>Netflix</span></p>
80121
<a href="https://youtu.be/jQ8CCg1tOqc" class="boton"> Ver Trailer</a>
81122
</div>
82-
</article>
123+
</article>
83124
</main>
84125
</div>
126+
127+
<!-- Optional JavaScript -->
128+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
129+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
130+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
131+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
85132
</body>
86133

87134
</html>

0 commit comments

Comments
 (0)