generated from seahagcafe/bootstrap-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (107 loc) · 5.29 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- stylesheet -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Event Template</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="jumbotron d-flex flex-column text-center align-items-center m-0 mt-5 cutom-background">
<h1 class="display-6 mt-4">Puppy Therapy and Mimosas</h1>
<hr class="my-4">
<p class="lead">More info and details about why you should go to this event.</p>
<hr class="my-4">
<a class="btn btn-dark btn-lg mb-2" href="#" role="button">Register</a>
</div>
</div>
</div>
<div class="row d-flex justify-content-center mt-4">
<div class="col col-7 text-center">
<h2>The Puppies</h2>
<h6 class="mt-3">Some info the adorable puppies that attendees will get to meet. </h6>
<div class="my-4"></div>
</div>
</div>
<div class="card-deck"></div>
<div class="row d-flex justify-content-center px-2">
<div class="card col-sm-7 col-md-5 col-xl-3 border-0 puppies">
<div class="card-img-top rounded center-cropped tiny-tank"></div>
<div class="card-body">
<h5 class="card-title">Tiny Tank</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn text-secondary">@insta-handle</a>
</div>
</div>
<div class="card col-sm-7 col-md-5 col-xl-3 border-0 puppies">
<div class="card-img-top rounded center-cropped smiley-sunshine"></div>
<div class="card-body">
<h5 class="card-title">Smiley Sunshine</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn text-secondary">@insta-handle</a>
</div>
</div>
<div class="card col-sm-7 col-md-5 col-xl-3 border-0 puppies">
<div class="card-img-top rounded center-cropped rolly-ruben"></div>
<div class="card-body">
<h5 class="card-title">Rolly Ruben</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn text-secondary">@insta-handle</a>
</div>
</div>
<div class="card col-sm-7 col-md-5 col-xl-3 border-0 puppies">
<div class="card-img-top rounded center-cropped serious-simone"></div>
<div class="card-body">
<h5 class="card-title">Serious Simone</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn text-secondary">@insta-handle</a>
</div>
</div>
</div>
<hr>
<div class="row d-flex justify-content-center">
<div class="col col-7 text-center">
<h2 class="mt-4">Get Your Tickets Today!</h2>
<h6 class="mt-5 text-black-50">Each ticket includes: <b>20</b> puppy cuddles, <b>1000</b> participants, <b>15</b> sessions, <b>5</b> puppy wstrolls</h6>
<a class="btn btn-dark btn-lg mt-5 mb-4" href="#" role="button">Register</a>
</div>
</div>
<hr class="mt=8">
<div class="row d-flex justify-content-left mt-5">
<div class="col-lg">
<h2>The Venue</h2>
<h6 class="mt-4 mb-4 text-black-50">The event will take place at <b class="text-dark">123 Fake St., Spingfield, City.</b></h6>
<div class="container d-flex justify-content-left px-0 mb-3" id="h1">
<iframe class="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3316.440329835275!2d-118.1542795848046!3d33.77512558068233!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dd31a5cb4b8e11%3A0x10bb6adfde4e5de7!2s3412%20E%207th%20St%2C%20Long%20Beach%2C%20CA%2090804!5e0!3m2!1sen!2sus!4v1622919588537!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
<div class="col-lg mb-3">
<div class="container px-0">
<img src="https://images.unsplash.com/photo-1578161467910-11ca4025aa0e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="rounded text-right w-100" alt="...">
</div>
</div>
</div>
<hr>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>