Skip to content

Commit d19263f

Browse files
Gh0stRaccoonGh0stRaccoon
authored
Merge pull request #5 from Gh0stRaccoon/visualización
Visualización
2 parents 7042f5c + d0b1dbd commit d19263f

7 files changed

Lines changed: 229 additions & 2 deletions

File tree

‎images/BackgroundMobile.png‎

311 KB
Loading

‎images/awakelogo.png‎

82.1 KB
Loading

‎images/backgroundDesktop.jpg‎

43.5 KB
Loading

‎images/backgroundMobile.jpg‎

15.9 KB
Loading

‎images/backgroundMobile_bkp.jpg‎

44.5 KB
Loading

‎styles.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/** {
2+
margin: 0;
3+
padding: 0;
4+
-webkit-box-sizing: border-box;
5+
box-sizing: border-box;
6+
}*/
7+
body {
8+
background-color: #54595E;
9+
color: white;
10+
11+
}
12+
13+
h1 {
14+
font-family: 'Staatliches', cursive;
15+
color: rgb(255, 255, 255);
16+
margin: 0 auto;
17+
text-align: left;
18+
font-weight: 700;
19+
20+
}
21+
a{
22+
font-family: 'Staatliches', cursive;
23+
color: rgb(255, 255, 255);
24+
25+
}
26+
27+
.navtitle {
28+
width: 100%;
29+
margin-left: auto;
30+
margin-right: auto;
31+
-webkit-box-shadow: 4px 4px 10px rgb(0, 0, 0);
32+
border-radius: 1rem;
33+
34+
35+
}
36+
37+
.border {
38+
border-radius: 1rem;
39+
}
40+
41+
#form {
42+
width: 250px;
43+
margin: 0 auto;
44+
height: 50px;
45+
46+
}
47+
48+
#form p {
49+
text-align: center;
50+
}
51+
52+
#form label {
53+
font-size: 30px;
54+
}
55+
56+
input[type="radio"] {
57+
display: none;
58+
}
59+
60+
label {
61+
color: rgb(255, 255, 255);
62+
}
63+
64+
.clasificacion {
65+
direction: rtl;
66+
unicode-bidi: bidi-override;
67+
}
68+
69+
label:hover,
70+
label:hover ~ label {
71+
color: orange;
72+
}
73+
74+
input[type="radio"]:checked ~ label {
75+
color: orange;
76+
}
77+
78+
.btnenviar {
79+
width: 10rem;
80+
float: right;
81+
82+
}
83+
84+
.container{
85+
display: flex;
86+
flex-direction: column;
87+
margin-top: 10px;
88+
height: 480px;
89+
90+
}
91+
p {
92+
font-family: 'Staatliches', cursive;
93+
color: rgb(255, 255, 255);
94+
font-family: ;
95+
text-align: justify;
96+
97+
}
98+
h2 {
99+
font-family: 'Staatliches', cursive;
100+
color: rgb(255, 255, 255);
101+
text-align: justify;
102+
font-size: medium;
103+
104+
}
105+
footer div {
106+
107+
background-color: rgba(0, 0, 0, 0.2);
108+
margin-top: 10px;
109+
margin-left: auto;
110+
margin-right: auto;
111+
bottom: 0;
112+
width:100%;
113+
}
114+
115+

‎watch.html‎

Lines changed: 114 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,124 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
8+
<title>Página de visualización</title>
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
10+
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
11+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
12+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
13+
crossorigin="anonymous"></script>
14+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
15+
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
16+
crossorigin="anonymous"></script>
17+
<link rel="preconnect" href="https://fonts.googleapis.com">
18+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19+
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
20+
<link rel="stylesheet" href="styles.css">
821
</head>
22+
923
<body>
10-
24+
<header class="navtitle">
25+
<div>
26+
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
27+
<a class="navbar-brand" href="index.html">
28+
<img src="./images/awakelogo.png" width="30" height="30" class="d-inline-block align-left" alt="">
29+
AWAKEMOVIES
30+
</a>
31+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
32+
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
33+
<span class="navbar-toggler-icon"></span>
34+
</button>
35+
<div class="collapse navbar-collapse" id="navbarText">
36+
<ul class="navbar-nav mr-auto">
37+
<li class="nav-item">
38+
<a class="nav-link" href="./index.html">Inicio <span class="sr-only">(current)</span></a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="./details.html">Catálogo</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link" href="./watch.html">Ver ahora</a>
45+
</li>
46+
</ul>
47+
</div>
48+
</nav>
49+
</div>
50+
</header>
51+
<div class="row" style="width: 80%; justify-content: center; margin-left: auto; margin-right: auto;">
52+
<div class="col-lg-12">
53+
<div>
54+
<h1 style="margin-top: 10px;">Space Jam 2</h1>
55+
</div>
56+
<div class="embed-responsive embed-responsive-16by9">
57+
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/olXYZOsXw_o"
58+
allowfullscreen></iframe>
59+
</div>
60+
</div>
61+
<form class="col-lg-8" style="margin-top: 20px;">
62+
<div>
63+
<a>Puntúa esta película</a>
64+
<p class="clasificacion" style="margin-top: 10px; text-align: left">
65+
<input id="radio1" type="radio" name="estrellas" value="5">
66+
<label for="radio1">★</label>
67+
<input id="radio2" type="radio" name="estrellas" value="4">
68+
<label for="radio2">★</label>
69+
<input id="radio3" type="radio" name="estrellas" value="3">
70+
<label for="radio3">★</label>
71+
<input id="radio4" type="radio" name="estrellas" value="2">
72+
<label for="radio4">★</label>
73+
<input id="radio5" type="radio" name="estrellas" value="1">
74+
<label for="radio5">★</label>
75+
</p>
76+
<a>COMENTARIOS:</a>
77+
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea><br>
78+
<div class="row">
79+
<div class="col-lg-2">
80+
<h2>Juan Pérez</h2>
81+
<label style="color: yellow;">★★★</label>
82+
</div>
83+
<div class="col-lg-10">
84+
<p>La verdad estoy muy satisfecho, me encanto pero no es mejor que la primera. Es una buena secuela, eso si no es perfecta, pero con las criticas que la atacaron, creo que exageran diciendo que es mas un comercial ¡Ay por favor! La primera vino de un comercial. </p>
85+
</div>
86+
</div>
87+
<div class="row">
88+
<div class="col-lg-2">
89+
<h2>Carmela Flores</h2>
90+
<label style="color: yellow;">★★★★</label>
91+
</div>
92+
<div class="col-lg-10">
93+
<p>Muy buena la pelicula, entre los efectos especiales esta increible, el 3D esta increible, pero creo que tambien le falta un poco, no me decepciono ni nada, solo que no me gusto mucho, lo bueno: El 3D de los looney, el publico de todo el universo warner formando un crossover, los detalles, los guiños, la importancia a el universo warner bros, Etc.</p>
94+
</div>
95+
</div>
96+
<div class="row">
97+
<div class="col-lg-2">
98+
<h2>John Cena</h2>
99+
<label style="color: yellow;">★★★★★</label>
100+
</div>
101+
<div class="col-lg-10">
102+
<p>Una pelicula sin igual y Mejor que la primera!
103+
En si la pelicula tiene muchos Giños, referencias,etc... por lo cual en si la hace mejor y más destacable que incluso hasta cambian algunos lugares u aspectos de los looneys.</p>
104+
</div>
105+
</div>
106+
107+
</div>
108+
109+
</form>
110+
<div class="col-lg-4" style="margin-top: 20px;">
111+
<a>Relacionadas</a>
112+
</div>
113+
</div>
114+
115+
116+
117+
<footer>
118+
<div class="text-center p-3">
119+
<a class="text-black" href="http://www.awakelab.cl">© 2021 Copyright: Awakelab IDW-GEN0308-3 Equipo 3 </a>
120+
</div>
121+
</footer>
11122
</body>
123+
12124
</html>

0 commit comments

Comments
 (0)