-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
133 lines (122 loc) · 5.82 KB
/
home.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
<!doctype html>
<html lang="en">
<head>
<title>HOME</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<link href = "home.css" rel = "stylesheet">
<body>
<!--Navigation-->
<nav class = "navbar fixed-top navbar-expand-md navbar-light bg-light">
<div class = "container">
<a class = "navbar-brand" href="home.html">REINSPIRE</a>
<button class = "navbar-toggler" data-toggle="collapse" data-target = "#navbarNav"><span class = "navbar-toggler-icon"></span></button>
<div class = "collapse navbar-collapse" id = "navbarNav">
<ul class = "navbar-nav">
<li class = "nav-item dropdown">
<a href = "#" class = "nav-link dropdown-toggle" data-toggle="dropdown">Self-Empowerment</a>
<div class = "dropdown-menu">
<a href="#" class = "dropdown-item">Becoming a Tech Guru</a>
<a href="#" class = "dropdown-item">Sales is Life</a>
<a href="#" class = "dropdown-item">Finance Dummy</a>
<a href="#" class = "dropdown-item">Personal Relfections</a>
</div>
</li>
<li class = "nav-item">
<a class = "nav-link" href="#">About</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Carousel with Pictures-->
<div class = "container-fluid">
<div id="slider4" class = "carousel slide mb-5" data-ride = "carousel">
<ol class = "carousel-indicators">
<li class = "active" data-target="#slider4" data-slide-to="0"></li>
<li class = "active" data-target="#slider4" data-slide-to="1"></li>
</ol>
<div class = "carousel-inner item " role = "listbox">
<div class = "carousel-item item active">
<img class = "d-block img-fluid" src="Photos/pexels-photo-745204.jpeg" alt="Second Slide">
<div class = "carousel-caption test">
<h1 class = "display-3">REINSPIRE</h1>
<p>Breaking the Stigmas of Society with Self-Empowerment</p>
</div>
</div>
<div class = "carousel-item item">
<img class = "d-block img-fluid" src="Photos/pexels-photo-731625.jpeg" alt="First Slide">
<div class = "carousel-caption test">
<h1 class = "display-3">REINSPIRE</h1>
<p class>Engineering Through Life With Words and Thoughts to Empower</p>
</div>
</div>
</div>
<a href = "#slider4" class = "carousel-control-prev" data-slide="prev">
<span class = "carousel-control-prev-icon"></span>
</a>
<a href = "#slider4" class = "carousel-control-next" data-slide="next">
<span class = "carousel-control-next-icon"></span>
</a>
</div>
</div>
<!-- Search Bar -->
<div class = "container">
<h1 class = "display-4 text-center"></h1>
</div>
<!--Media Card With Purpose-->
<br></br>
<div class = "container">
<div class = "row justify-content-center">
<div class = "col-sm">
<a href = "#">
<img class="card-img-top" src="Photos/pexels-photo-736507.jpeg" alt="The new purpose of Reinspire.">
</a>
</div>
<div class = "col-sm">
<div class="card">
<div class = "card-header">
REINSPIRE
</div>
<div class="card-body">
<h4 class="card-title">A New Purpose</h4>
<p class="card-text">It's been a while since I wrote a post for Reinspire. I took some time off to figure out where I wanted to take this site, and I'm taking it in a new completely different direction. First off, I didn't want to pay $300+ to have the original website up through Squarespace so I decided to make my own. Secondly, it would help me learn how to code, and lastly it would help me customize my site better. Anyways, click the "Read More" button below for the full post to hear about the new purpose of Reinspire.</p>
<a href="#" class="btn btn-outline-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<br></br>
<!-- Footer -->
<div class = "container-fluid">
<div class="row justify-content-center bg-dark text-light mt-3 p-5">
<div class="col text-center">
<ul style="list-style-type:none;">
<li>This website is currently under construction.</li>
<li class = "text-secondary">@Joshua D'Souza 1/3/2018</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval:8000,
keyboard:true,
pause:'hover',
wrap:true
});
</script>
</body>
</html>