forked from marc-rosenau/YouLearnDay
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathYouLearnDayWebsite.html
64 lines (60 loc) · 2.31 KB
/
YouLearnDayWebsite.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #E20074; /* Magenta */
color: #ffffff;
}
.bg-2 {
background-color: #ffffff; /* White */
color: #555555;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
</head>
<body>
<!-- First Container - Who Am I section -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin" id="who">Who Am I?</h3>
<h3> test I'm an adventurer</h3>
</div>
<!-- Second Container - What Am I doing section -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin" id="what">What Am I doing?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<!-- Third Container (Grid) - Facts about me section -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin" id="facts">Three facts about me</h3><br>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
</html>