-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
119 lines (112 loc) · 4.46 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width-device,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>ABOUT</title>
<style>
header{
background-color: blueviolet;
margin:auto;
}
body > div{
background-image: url(images/about/about2.jpeg);
width: 100%;
height: 20em;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin:auto;
}
footer a{
text-decoration: none;
color:white;
}
ul{
display: flex;
}
ul li{
font-size: 1.2em;
border-style: double;
border-radius: 0.5em;
margin-right: 0.1em;
}
ul li a{
color:white;
}
ul li a:hover{
text-decoration: none;
}
@media screen and (max-width:370px){
ul li{
width: 100%;
}
body>div{
margin-top: 0.5em;
margin-bottom: 1em;
height: 10em;
background-attachment: scroll;
}
section div{
margin-top: 0;
padding-top: 0;
}
}
@media screen and (min-width:480px){
ul li{
font-size: 1.5em;
padding-left: 0.1em;
padding-right: 0.1em;
margin-right: 0.1em;
padding-top: 0;
padding-bottom: 0;
border-style: solid;
border-color: indigo;
border-radius: 0.5em;
}
ul li[class="active"]{
border-color: white;
}
ul li a{
text-decoration: none;
color: white;
padding-top: 0;
padding-bottom: 0;
}
ul li a:hover{
color: skyblue;
text-decoration: none;
}
}
</style>
</head>
<body>
<header class="col-md-12">
<ul class="nav nav-tabs">
<li role="presentation"><a href="index.html">LUMOS</a></li>
<li role="presentation"><a href="projects.html">Projects</a></li>
<li role="presentation"><a href="photo.html">Photography</a></li>
<li role="presentation" class="active"><a href="#">About</a></li>
</ul>
</header>
<div>
</div>
<section class="text-center" style="padding-top:2em;">
<div>
<h2>And here is some motivational thought.</h2>
<p style="padding-left:1.5em;padding-right:1.5em;">Morbi ac lectus fermentum ipsum porta blandit in eu lectus. Phasellus id purus non quam scelerisque semper nec condimentum turpis. Nam vitae libero quis ipsum facilisis lacinia eu et diam. Nunc egestas, elit nec imperdiet accumsan, lacus metus volutpat arcu, nec aliquam urna turpis sed tortor. Ut tempor dapibus ipsum vel interdum. Vestibulum mi eros, lobortis viverra nisl vitae, fringilla euismod nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ex velit, hendrerit vitae orci sed, dignissim aliquet dui. Aenean aliquet, sem sollicitudin pharetra interdum, metus ipsum pretium mauris, sit amet elementum lorem urna vitae mi. Nulla euismod interdum lorem, at egestas quam luctus a. Nam pharetra sagittis augue eu ultrices. Nullam et nisl egestas, volutpat neque nec, varius massa. Quisque vitae porta libero. Morbi quis ex massa. Fusce cursus urna turpis, eu laoreet tortor tincidunt euismod.<br>
Etiam suscipit arcu nec dui ullamcorper, in egestas ligula sagittis. Donec vitae enim ac ligula rutrum molestie. In at diam vitae ante blandit molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend eleifend felis, a sodales sem auctor et. Fusce nec erat ac ipsum varius sollicitudin. Vestibulum auctor diam sed pretium sagittis. Proin sed orci quis leo feugiat rutrum vel vitae nulla. Nullam dictum diam sit amet massa commodo malesuada. Phasellus nec ipsum justo. I sed bibendum velit, euismod finibus dui. </p>
</div>
<br> <br>
<h2 class="jumbotron" style="padding:1em;">GET IN TOUCH :)</h2>
</section>
<footer style="padding-top:0.1em;display:flex;flex-wrap:wrap;justify-content:space-evenly;font-size:2em;background-color:blueviolet;">
<a href="http://www.facebook.com"><span class="fa fa-facebook"></span></a>
<a href="http://www.twitter.com"><span class="fa fa-twitter"></span></a>
<a href="http://www.youtube.com"><span class="fa fa-youtube"></span></a>
<a href="http://www.instagram.com"><span class="fa fa-instagram"></span></a>
</footer>
</body>
</html>