-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (143 loc) · 4.84 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
<!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" />
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Bootstrap Page</title>
</head>
<!-- body is 100vh and the banner is 25vh of the body-->
<body class="h-100">
<!-- background-color: lightblue(info); display: flex; justify-content: center; align-items: center; -->
<div
class="banner bg-info d-flex flex-column justify-content-center align-items-center p-4"
>
<p class="fs-1">Bootstrap page</p>
<p class="fs-4">Create this</p>
</div>
<!-- navbar -->
<nav
class="h-5 navbar navbar-dark bg-light fw-bolder d-flex align-content-center border"
>
<div class="container-fluid d-flex justify-content-center">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</div>
</nav>
<div style="height: 30vh" class="container d-flex mt-5">
<div class="row">
<div class="col">
<h5>Column 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt
architecto suscipit nisi odio praesentium minima sunt voluptates sed
fugiat. Pariatur.
</p>
</div>
<div class="col">
<h5>Column 2</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
iusto adipisci vel asperiores unde magni amet quam voluptatem rerum
ipsam.
</p>
</div>
<div class="col">
<h5>Column 3</h5>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. At illo
sit itaque impedit perspiciatis rerum accusamus ratione tempora ut
optio?
</p>
</div>
</div>
</div>
<!-- cards are buttons -->
<!-- <div
style="height: 25vh"
class="container-lg d-flex flex-row justify-content-evenly"
>
<button style="width: 18rem; height: 4rem" class="btn btn-primary">
First Card
</button>
<button style="width: 18rem; height: 4rem" class="btn btn-warning">
Second Card
</button>
<button style="width: 18rem; height: 4rem" class="btn btn-success">
Third Card
</button>
<button style="width: 18rem; height: 4rem" class="btn btn-danger">
Fourth Card
</button>
</div> -->
<!-- create cards only with card-body -->
<div style="height: 30vh" class="container d-flex justify-content-between">
<!-- each card is with width: 18rem and height: 14rem-->
<div class="card border-0" style="width: 18rem; height: 4rem">
<div
class="card-body rounded-2 bg-primary d-flex justify-content-center"
>
First card
</div>
</div>
<!-- border none to remove the gray outline for each card-body -->
<div class="card border-0" style="width: 18rem; height: 4rem">
<!-- rounded edges of the boxes with rounded-2 for each card-->
<div
class="card-body rounded-2 bg-warning d-flex justify-content-center"
>
Second card
</div>
</div>
<div class="card border-0" style="width: 18rem; height: 4rem">
<div
class="card-body rounded-2 bg-success d-flex justify-content-center"
>
Third card
</div>
</div>
<div class="card border-0" style="width: 18rem; height: 4rem">
<div
class="card-body rounded-2 bg-danger d-flex justify-content-center"
>
Fourth card
</div>
</div>
</div>
<!-- <div
style="height: 25vh"
class="d-flex flex-row justify-content-around"
></div>
<div class="card bg-primary" style="width: 18rem; height: 4rem">
First card
</div>
<div class="card bg-warning" style="width: 18rem; height: 4rem">
Second Card
</div>
<div class="card bg-success" style="width: 18rem; height: 4rem">
Third Card
</div>
<div class="card bg-danger" style="width: 18rem; height: 4rem">
Fourth Card
</div> -->
<!-- this is footer -->
<div
class="bg-info d-flex flex-column justify-content-center align-items-center fs-3 p-3 mt-5"
>
Footer!
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>