mypub/block-content-cards-2.html at main · romell491/mypub · GitHub

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
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="author" content="romellsweb">
	<meta name="description" content="Get romellsweb to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">

	<!-- Font Imports -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

	<!-- Core Style -->
	<link rel="stylesheet" href="style.css">

	<!-- Font Icons -->
	<link rel="stylesheet" href="css/font-icons.css">

	<!-- Custom CSS -->
	<link rel="stylesheet" href="css/custom.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Document Title
	============================================= -->
	<title>Cards | romellsweb</title>

</head>

<body class="stretched">

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper">

		<!-- Content
		============================================= -->
		<section id="content">
			<div class="content-wrap d-flex min-vh-100 align-items-center">
				<div class="container">
					<div class="row col-mb-50 justify-content-center">

						<div class="col-xl-6 col-lg-8 text-center">
							<h3 class="h1 fw-bold mb-3">Overlay Image Card</h3>
						</div>

						<div class="clear"></div>

						<div class="col-xl-4 col-md-6">
							<div class="card border-0 dark shadow-sm h-shadow shadow-ts p-3" style="background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.4)), url('images/blocks/preview/card-2/1.jpg') no-repeat top center / cover;">
								<div class="card-body">
									<h6 class="fw-normal text-uppercase ls-2 text-white-50 mb-2">Category</h6>
									<h3 class="card-title h2 fw-bold mb-4 text-white">Card Overlay Dark</h3>
									<p class="card-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, est blanditiis id aut enim consequuntur. Voluptates error dicta assumenda voluptatem!</p>
									<a href="#"><i class="bi-arrow-right h4 icon-stacked text-center rounded-circle bg-white text-dark"></i></a>
								</div>
							</div>
						</div>

						<div class="col-xl-4 col-md-6">
							<div class="card border-0 shadow-sm h-shadow shadow-ts p-3" style="background: url('images/blocks/preview/card-2/2.jpg') no-repeat top center / cover;">
								<div class="card-body">
									<h6 class="fw-normal text-uppercase ls-2 text-black-50 mb-2">Category</h6>
									<h3 class="card-title h2 fw-bold mb-4">Card Overlay Light</h3>
									<p class="card-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, est blanditiis id aut enim consequuntur. Voluptates error dicta assumenda voluptatem!</p>
									<a href="#"><i class="bi-arrow-right h4 icon-stacked text-center rounded-circle bg-dark text-white"></i></a>
								</div>
							</div>
						</div>

						<div class="col-xl-4 col-md-6">
							<div class="card border-0 dark shadow-sm h-shadow shadow-ts p-3" style="background: url('images/blocks/preview/card-2/3.jpg') no-repeat center center / cover;">
								<div class="card-body">
									<h6 class="fw-normal text-uppercase ls-2 text-white-50 mb-2">Category</h6>
									<h3 class="card-title h2 fw-bold mb-4 text-white">Card Overlay Bg</h3>
									<p class="card-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, est blanditiis id aut enim consequuntur. Voluptates error dicta assumenda voluptatem!</p>
									<a href="#"><i class="bi-arrow-right h4 icon-stacked text-center rounded-circle bg-white text-dark"></i></a>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</section><!-- #content end -->


	</div><!-- #wrapper end -->

	<!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="uil uil-angle-up"></div>

	<!-- JavaScripts
	============================================= -->
	<script src="js/plugins.min.js"></script>
	<script src="js/functions.bundle.js"></script>

</body>
</html>