-
Notifications
You must be signed in to change notification settings - Fork 1
/
basic.html
163 lines (151 loc) · 7.8 KB
/
basic.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/bootstrap-quotes.min.css" />
</head>
<body>
<!-- Start your project here-->
<style>
.gradient-custom {
/* fallback for old browsers */
background: #f6d365;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1))
}
</style>
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card">
<div class="card-body py-5">
<!-- Carousel wrapper -->
<div id="carouselDarkVariant" class="carousel slide carousel-dark" data-mdb-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators mb-0">
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1" aria-label="Slide 1"></button>
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2" aria-label="Slide 1"></button>
</div>
<!-- Inner -->
<div class="carousel-inner pt-2 pb-5">
<!-- Single item -->
<div class="carousel-item active">
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90">
</div>
<div class="flex-grow-1 ms-4 ps-3">
<figure>
<blockquote class="blockquote mb-4">
<p>
<i class="fas fa-quote-left fa-lg text-warning me-2"></i>
<span class="font-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere, molestias quisquam impedit inventore.</span>
</p>
</blockquote>
<figcaption class="blockquote-footer">
Miranda Smith in <cite title="Source Title">The Guardian</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90">
</div>
<div class="flex-grow-1 ms-4 ps-3">
<figure>
<blockquote class="blockquote mb-4">
<p>
<i class="fas fa-quote-left fa-lg text-warning me-2"></i>
<span class="font-italic">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</span>
</p>
</blockquote>
<figcaption class="blockquote-footer">
Annie Hall <cite title="Source Title">New York Times</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90">
</div>
<div class="flex-grow-1 ms-4 ps-3">
<figure>
<blockquote class="blockquote mb-4">
<p>
<i class="fas fa-quote-left fa-lg text-warning me-2"></i>
<span class="font-italic">At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint amet dolore.</span>
</p>
</blockquote>
<figcaption class="blockquote-footer">
Jason More in <cite title="Source Title">Smash Magazine</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>