-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
54 lines (52 loc) · 2.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="output.css" />
<!-- <link rel="stylesheet" href="overlay.css" /> -->
<!-- Bootstrap CSS -->
<!-- <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/> -->
<title>SCSS card tutorial</title>
</head>
<body class="bg-midnightblue d-flex container-fluid justify-content-center align-items-center min-vh-100 text-white">
<div id="card" class="bg-darkslateblue d-flex flex-lg-row flex-column rounded-3 overflow-hidden w-75 flex-column-reverse">
<div id="card-text" class="col-lg-6 col-12 p-5 d-flex flex-column justify-content-between">
<div class="w-100">
<h1 class="fs-1 fw-bold">Get <span class="color-midnightblue">insights</span> that help your business grow.</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="stats" class="d-flex flex-lg-row flex-column justify-content-between align-items-center">
<div class="mb-4 mb-lg-0 d-flex flex-column align-items-center align-items-lg-start">
<p class="fw-bold fs-3 mb-1">10k+</p>
<p class="m-0">COMPANIES</p>
</div>
<div class="mb-4 mb-lg-0 d-flex flex-column align-items-lg-start align-items-center">
<p class="fw-bold fs-3 mb-1">314</p>
<p class="m-0">TEMPLATES</p>
</div>
<div class="d-flex flex-column align-items-lg-start align-items-center">
<p class="fw-bold fs-3 mb-1">12M</p>
<p class="m-0">QUERIES</p>
</div>
</div>
</div>
<div id="card-image" class="position-relative col-lg-6 col-12">
<img class="col-6 w-100 h-100" style="object-fit: cover" src="./images/office-people.jpg" alt="office people" />
<div class="overlay"></div>
</div>
</div>
</body>
</html>