-
Notifications
You must be signed in to change notification settings - Fork 0
/
project_Mariana.html
176 lines (155 loc) · 6.32 KB
/
project_Mariana.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
<html>
<head>
<title> Mariana's Tv Series</title>
<style>
body{
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
button{
background-color: #cccccc;
color:#000000;
text-align: center;
transition: font-weight 50ms ease-in-out;
}
button:hover{
font-weight:900;
}
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;
}
.drama{
float: left;
}
.comedy{
float: right;
}
</style>
<script>
let seriesName = prompt('What is 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 check my webpage still!');
</script>
</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://canecasdosnerds.com.br/blog/wp-content/uploads/2016/11/prison-break.jpg" 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>Learn More</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, after being diagnosed with terminal lung cancer, decides to manufacture and sell methamphetamines, 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>Learn More</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>Learn More</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>Learn More</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 a the peculiar and misfit students and staff of a community college, and uses meta-humour and pop culture references. </div>
<br>
<a href="https://www.imdb.com/title/tt1439629/?ref_=nv_sr_1" target="_blank"><button>Learn More</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> IIs 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>Learn More</button></a>
</li>
</ul>
<!-- about me contacts event with email account -->
</body>
</html>