-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
166 lines (163 loc) · 10.7 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en" prefix="og:http://ogp.me/ns#">
<head>
<title>Book Landing Page Template - Free HTML 5/Bootstrap 4 Landing Page Template by BostonianAdam</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.min.css?bootstrap=4.3.1">
<link rel="stylesheet" href="css/main.css">
<link rel="canonical" href="">
</head>
<body id="home" data-spy="scroll" data-target="#main-nav">
<nav id="main-nav" class="navbar navbar-expand-md navbar-light fixed-top py-4" role="navigation" aria-label="primary">
<div class="container">
<h1 class="d-inline align-middle"><a href="#home" class="navbar-brand" title="Book Title">Book Title</a></h1>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"><span class="navbar-toggler-icon"></span></button>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#home" class="nav-link" title="Home">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link" title="About">About</a></li>
<li class="nav-item"><a href="#author" class="nav-link" title="Author">Author</a></li>
<li class="nav-item"><a href="#contact" class="nav-link" title="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<main role="main">
<section id="book" class="mb-4" role="region">
<div class="overlay">
<div class="container pt-4">
<div class="row">
<div class="col-lg-6 text-center">
<h1 class="display-3">Book Title Here</h1>
<h2 class="d-inline h5 font-weight-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare leo eget purus viverra, non sagittis est ullamcorper. Vestibulum tincidunt est dui, quis semper lectus malesuada pulvinar. Morbi accumsan mollis nulla, ac aliquet leo. Aliquam erat volutpat.</h2>
<p class="mt-3"><a href="#" class="btn btn-outline-secondary btn-lg font-weight-bold mr-2">Buy Digital</a> <a href="#" class="btn btn-outline-secondary btn-lg font-weight-bold">Buy Paperback</a></p>
</div>
<div class="col-lg-6"><img src="img/book-933280_640.jpg" class="img-fluid d-none d-lg-block" alt="Book Title image" title="Book Title"></div>
</div>
</div>
</div>
</section>
<section id="about" class="mb-4" role="region">
<h2 class="display-4 text-center">About the Book</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card text-center border-primary">
<div class="card-body">
<h3 class="text-primary">Info About Book</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center bg-primary">
<div class="card-body">
<h3 class="text-white">More Book Info</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center border-primary">
<div class="card-body">
<h3 class="text-primary">Even More Info</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="author" class="bg-secondary text-white mb-4" role="region">
<h2 class="display-4 text-center">Meet the Author</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="mb-2 text-center">
<!--Note: switch out the below icon to an image of the author
<img src="" class="card-img" alt="Author Image" title="Author Name">-->
<i class="fas fa-user fa-10x"></i>
</div>
</div>
<div class="col-md-9">
<div class="card-body pt-0">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare leo eget purus viverra, non sagittis est ullamcorper. Vestibulum tincidunt est dui, quis semper lectus malesuada pulvinar. Morbi accumsan mollis nulla, ac aliquet leo. Aliquam erat volutpat.</p>
<p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id enim posuere, gravida leo vel, dictum arcu. Nulla convallis lobortis massa, eu sodales urna interdum eget.</p>
<div class="social-icons">
<h3 class="d-inline mr-2">Follow</h3>
<a href="#" title="Facebook"><i class="fab fa-facebook-f fa-2x"></i></a>
<a href="#" title="Instagram"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#" title="LinkedIn"><i class="fab fa-linkedin-in fa-2x"></i></a>
<a href="#" title="Twitter"><i class="fab fa-twitter fa-2x"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="mb-4" role="region">
<h2 class="display-4 text-center">Contact the Author</h2>
<div class="container">
<div class="row">
<div class="col">
<form action="#" method="post">
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="field1-icon"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Name" id="txtName" aria-label="Name" aria-describedby="field1-icon">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="field2-icon"><i class="fas fa-envelope"></i></span>
</div>
<input type="email" class="form-control" placeholder="Email" id="txtEmail" aria-label="Email" aria-describedby="field2-icon">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="field3-icon"><i class="fas fa-edit"></i></span>
</div>
<textarea class="form-control" placeholder="Your message" id="txtMessage" aria-label="Your message" aria-describedby="field3-icon"></textarea>
</div>
<div>
<input type="submit" id="btnSubmit" class="btn btn-primary btn-block btn-lg" value="Submit">
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-secondary text-white mt-4 pt-4" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-sm-6 footer-col-1">
<h4>Credits</h4>
<p>Book image by <a href="https://pixabay.com/users/tookapic-1386459/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=933280" target="_blank">tookapic</a> from <a href="https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=933280" target="_blank">Pixabay</a><br>Background image from <a href="https://www.pexels.com/photo/adventure-calm-clouds-dawn-414171/" target="_blank">Pexels</a></p>
</div>
<div class="col-sm-6 footer-col-2"><a href="#" class="small">Privacy</a> <span class="ml-2 mr-2">|</span> <a href="#" class="small">Terms of Use</a></div>
</div>
<div class="row">
<div class="col text-center mt-2">
<p class="small mb-1">Copyright © 2019 Book Landing Page Template by <a href="https://hub.bostonianadam.com/">BostonianAdam Hub</a></p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" 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>
<script>
//for the nav scrolling to each section
$("#main-nav a").click(function(e) {
e.preventDefault();
var position = $($(this).attr("href")).offset().top;
$("body, html").animate({ scrollTop: position - 110 }, 800);
});
</script>
</body>
</html>