-
Notifications
You must be signed in to change notification settings - Fork 0
/
SheCodesproject_mariana_costa.html
182 lines (165 loc) · 6.79 KB
/
SheCodesproject_mariana_costa.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<html>
<head>
<style>
body{
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
div{
line-height: 20px;
}
h1{
color: #e600e6;
background-color:#ffffff;
border-radius: 10px;
box-shadow: 15px 15px 15px #000;
font-size: 50px;
font-weight: 900;
margin: 50px 350px 30px 350px;
padding: 15px 10px 15px 10px;
text-align: center;
}
h2{
color: #e600e6;
font-size: 35px;
font-weight: 600;
text-align: center
}
h3{
font-size: 20px;
font-weight: 700;
}
hr{
margin: 5px 500px 5px 500px;
}
img{
height: 300px;
weight: 450px;
}
p{
font-size: 20px;
text-align: center
}
li{
background-color: #ffffff;
border: 2px dashed #e600e6;
border-radius: 3%;
height: 480px;
margin: 15px 0px 15px 0px;
padding: 15px 10px 15px 10px;
width: 600px;
}
span{
color:#e600e6;
}
ul{
list-style-type:none;
}
.btn{
margin: 15px 100px 30px 50px;
height: 40px;
background-color: #e600e6;
color:#000000;
font-weight: 600;
text-align: center;
}
.imdb{
background-color: #cccccc;
color:#000000;
text-align: center;
transition: font-weight 50ms ease-in-out;
}
.imdb:hover{
font-weight:900;
}
.drama{
float: left;
}
.comedy{
float: right;
}
</style>
</head>
<body>
<h1>My Favorite TV Series</h1>
<p><em>by Mariana Costa</em></p>
<hr>
<br>
<br>
<p>One of my favorite hobbies is to watch <span>TV series</span>. Here, I list some of my favorite!!!</p>
<ul class='drama'>
<h2>Drama Series</h2>
<li>
<h3>Prison Break</h3>
<img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/81B830426805BFB41DCAC2E010EA45661FF55AC9F45D871DC0CEAF342376EFEF/scale?width=1200&aspectRatio=1.78&format=jpeg" alt = "Prison Break">
<br>
<div><strong><em>Prison Break</em></strong> tells the story about Michael Scofield, a regular guy who plans a bank assault to get himself in jail, to architect from the inside an escape that will save his inocent brother from death row.</div>
<br>
<a href="https://www.imdb.com/title/tt0455275/" target="_blank"><button class="imdb">IMBD webpage</button></a>
</li>
<br>
<br>
<li>
<h3>Breaking Bad</h3>
<img src="https://i2.wp.com/feriasdecinema.com/wp-content/uploads/2017/04/breaking-bad-capa.jpg?w=746&ssl=1" alt = "Breaking Bad">
<br>
<div> <strong><em>Breaking Bad</em></strong> follows the journey of Walter White, a high school chemistry teacher who decides to manufacture and sell methamphetamines after being diagnosed with terminal lung cancer, to leave his family safe after he dies.</div>
<br>
<a href="https://www.imdb.com/title/tt0903747/?ref_=nv_sr_1" target="_blank"><button class="imdb">IMBD webpage</button></a>
</li>
<br>
<br>
<li>
<h3>Stranger Things</h3>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Stranger_Things_logo.png" alt = "Stranger Things">
<br>
<div> <strong><em>Stranger Things</em></strong> is the story about a boy who mysteriously disappeared in the 80’s and the efforts of his mother, brother and friends to find him, by facing terrible forces from an alternative dimension created due to the secret paranormal experiments of US government.</div>
<br>
<a href="https://www.imdb.com/title/tt4574334/" target="_blank"><button class="imdb">IMBD webpage</button></a>
</li>
<br>
<br>
</ul>
<ul class='comedy'>
<h2>Comedy Series</h2>
<li>
<h3>The Middle</h3>
<img src="https://vignette.wikia.nocookie.net/themiddle/images/d/dc/The-Middle-Poster.jpeg/revision/latest/scale-to-width-down/640?cb=20180123193930" alt = "The Middle">
<br>
<div> <strong><em>The Middle</em></strong> tells the daily life stories of the of a typical a lower middle-class American family with 3 children: a popular teenage who is good at sports but bad at school, an effusive hard-working but unlucky girl and a weirdo kid who loves books. </div>
<br>
<a href="https://www.imdb.com/title/tt1442464/?ref_=fn_al_tt_1" target="_blank"><button class="imdb">IMBD webpage</button></a>
</li>
<br>
<br>
<li>
<h3>Community</h3>
<img src="http://seriesandtv.com/wp-content/uploads/2012/10/Community-netflix-latino.png" alt = "Community">
<br>
<div> <strong><em>Community</em></strong> is about the peculiar and misfit students and staff of a community college, and their stories are full of meta-humour and pop culture references. </div>
<br>
<a href="https://www.imdb.com/title/tt1439629/?ref_=nv_sr_1" target="_blank"><button class="imdb">IMBD webpage</button></a>
</li>
<br>
<br>
<li>
<h3>IT Crowd</h3>
<img src="https://img.maximummedia.ie/joe_ie/eyJkYXRhIjoie1widXJsXCI6XCJodHRwOlxcXC9cXFwvbWVkaWEtam9lLm1heGltdW1tZWRpYS5pZS5zMy5hbWF6b25hd3MuY29tXFxcL3dwLWNvbnRlbnRcXFwvdXBsb2Fkc1xcXC8yMDE1XFxcLzExXFxcLzI0MjIxMzIwXFxcL2l0Y3Jvd2RzcGxhc2guanBnXCIsXCJ3aWR0aFwiOjY0MCxcImhlaWdodFwiOjM2MCxcImRlZmF1bHRcIjpcImh0dHBzOlxcXC9cXFwvd3d3LmpvZS5pZVxcXC9hc3NldHNcXFwvaW1hZ2VzXFxcL2pvZVxcXC9uby1pbWFnZS5wbmc_dj01XCJ9IiwiaGFzaCI6ImIwNzI3OTNiZTYwMmFkNjhiODE3NTNhNjExMjhhZGJlMmVhNGM5NTEifQ==/itcrowdsplash.jpg" alt = "IT Crowd">
<br>
<div> <strong><em>IT Crowd</em></strong> is a British sitcom that tells the misadventures of the IT support team of a big corporation. </div>
<br>
<a href="https://www.imdb.com/title/tt0487831/" target="_blank"><button class="imdb">IMBD webpage</button></a>
</li>
</ul>
<button class="btn">Tell me about your favorite TV series</button>
<script>
document.querySelector('.btn').addEventListener('click', function() {
let seriesName = prompt('What\'s your favorite TV Series?').toLowerCase();
if (seriesName === 'prison break' || seriesName === 'breaking bad' || seriesName === 'stranger things'|| seriesName === 'the middle' || seriesName === 'community' || seriesName === 'it crowd'){
alert('That is one of my favorites TV series too!');
}else{
alert('Well, that one is not listed here, but I hope you enjoyed this page anyway!');
}
});
</script>
</body>
</html>