-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolioWithSimpleCSS.html
136 lines (119 loc) · 4.77 KB
/
portfolioWithSimpleCSS.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
<html>
<head>
<title>Frodo Baggins</title>
<link rel="icon" href="FrodoBaggins3.png" type="image/x-icon">
<style>
@import url(//fonts.googleapis.com/css?family=Lato:300:400);
body {
margin: 0;
}
h1 {
font-family: "Lato", sans-serif;
font-weight: 300;
letter-spacing: 2px;
font-size: 48px;
}
h4 {
font-family: "Lato", sans-serif;
font-weight: 100;
font-size: 20px;
text-align: justify;
}
p {
font-family: "Lato", sans-serif;
letter-spacing: 1px;
font-size: 14px;
color: #333333;
}
.box {
padding: 50 50 50 50;
}
.header {
position: relative;
text-align: center;
background: linear-gradient(60deg,
rgba(84, 58, 183, 1) 0%,
rgba(0, 172, 193, 1) 100%);
color: white;
}
.content {
position: relative;
text-align: center;
background-color: white;
}
.image {
border-radius: 50%;
max-width: 100%;
max-height: 100%;
width: 250px;
height: 250px
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
h1 {
font-size: 24px;
}
h4{
font-size: 16px;
}
}
</style>
</head>
<body>
<!--Hey! This is the original version
of Simple CSS Waves-->
<div class="header">
<div class="box">
<img src="FrodoBaggins3.png" class="image" alt="Frodo Baggins">
<h1>Frodo Baggins</h1>
<h3><em>"I will take the Ring, though I do not know the way."</em></h3>
</div>
</div>
<!--Header ends-->
<!--About Me starts-->
<div class="box" style="margin: 50 100 10 100">
<h1 style="text-align: center;">About Me</h1>
<h4>Frodo Baggins, son of Drogo Baggins, was a hobbit of the Shire in the late Third Age. He was, and still is,
Tolkien's
most renowned character for his leading role in the Quest of the Ring, in which he bore the One Ring to
Mount Doom,
where it was destroyed. He was a Ring-bearer, best friend to his gardener, Samwise Gamgee, and one of the
three hobbits
who sailed from Middle-earth to the Uttermost West at the end of the Third Age.</h4>
<h4>
Frodo, as described by Gandalf, was "taller than some and fairer than most, (with) a cleft in his chin:
perky chap with
a bright eye." (The Fellowship of the Ring, Chapter 10, "Strider") He was a shy, young hobbit with thick,
curly brown
hair like most other hobbits, and had lighter-than-usual skin due to his Fallohide ancestry through his
Brandybuck
mother. He could be described as fairly good looking for a hobbit. Frodo is described as appearing
thirty-three, even
when he is fifty, due to the influence of the Ring. Bilbo and Frodo shared a common birthday on September
22, but Bilbo
was 78 years Frodo's senior. At the opening of The Fellowship of the Ring, Frodo and Bilbo were celebrating
their
thirty-third and eleventy-first (111th) birthdays, respectively. Frodo, like Bilbo, was considered by many
others in
Hobbiton to be a little odd. His curiosity of the outside world, fascination with Elves and faraway places
(like those
to which Bilbo traveled in The Hobbit) did not fit the general content personality of most Hobbits. This
curiosity was
also attributed to his Took ancestry. He was very kind and compassionate, pitying Gollum and allowing him to
guide him
and Sam to Mordor despite Sam's distrust of the creature. This act of kindness later proved to be a factor
in the
quest's success in destroying the Ring. The influence of the Ring and the wound by the Morgul-Blade seems
combined to
have given him the ability to see into the spirit world, for instance he sees faraway events in his dreams
on several
occasions. He also can see the ring of power worn by Galadriel and he seems to be able to sense danger.
</h4>
</div>
<!--Content starts-->
<div class="content">
<p>Frodo Baggins | 2021 </p>
</div>
<!--Content ends-->
</body>
</html>