-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (106 loc) · 9.52 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!--my own css style -->
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body class="paralax">
<div class="container">
<nav class="navbar navbar-default navabar-fix-top" style="height:75px;" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img height=200% width=150px; src="logo.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find me <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Projects</a></li>
<li><a href="#">Aims</a></li>
<li><a href="#">Academic Background</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Cobtacts</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class=row>
<div class="col-md-7 col-sm-7" class="panel panel-primary" style="background-color:rgb(6, 6, 19);">
<section class="section" style=" font-weight:200; font-size:18px; ">
<div class="panel-heading" >
<h1 class="dispaly-1">Hello <small style="color:aliceblue;" >Welcome To My Potfolio</small></h1>
</div>
<div class="panel-body">
<p >Navigate through and know much about me,know much about my <br> educational backgrounds, my inspirations and aspirations.
You will also know much about my competence and my specialties.
</p>
</div>
</section>
</div>
<div class="col-md-5 col-sm-5" class="card" style="width:400px">
<img class="card-img-top" src="card.jpeg" alt="Card image" style="height:200px; width=300px;">
<div class="card-body">
<h4 class="card-title">Thomas Sarpong</h4>
<p class="card-text">Cureently a student at the umiversity of energy and natural resources...</p>
<a href="#" class="btn btn-primary">more...</a>
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, iste dolorum ipsum corporis qui explicabo tenetur aut laboriosam ratione! Suscipit reiciendis commodi autem nesciunt iste ipsam beatae similique quas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quisquam veritatis soluta incidunt magnam dignissimos labore. Sit eum laudantium, accusantium officia debitis, incidunt temporibus animi, assumenda quos aspernatur at! Nesciunt.
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>