-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblock-bootstrap.html
79 lines (71 loc) · 3.55 KB
/
block-bootstrap.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
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.container-fluid{
background-color:hotpink;
}
.mybox{
background-color: lightsteelblue;
min-height: 200px;
margin: 20px 10px;
padding: 20px;
}
body{
background-image: linear-gradient(grey, steelblue);
}
.mybox1{
background-color: lightseagreen;
min-height: 200px;
margin: 20px 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col">
<div class="mybox">Logo</div>
</div>
<div class="col">
<div class="mybox">Nav</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="mybox">Hero Box
<p class="mytext">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eos earum tenetur saepe molestias nihil error voluptate possimus dignissimos. Aspernatur exercitationem alias facere. Explicabo fuga reiciendis, quos, exercitationem facere distinctio voluptatum totam itaque, qui corrupti iure nihil sapiente provident veritatis nulla officiis architecto. Alias rerum accusamus veritatis repudiandae expedita nesciunt perspiciatis tempore nulla doloribus quia possimus ipsam quidem, quis laudantium eligendi repellat animi consequatur recusandae, aliquam, molestias omnis? Asperiores facilis saepe alias, illo labore reprehenderit assumenda, architecto quia a blanditiis impedit, esse eos qui enim hic earum numquam veritatis ab dicta eius dignissimos. Nemo nisi ad pariatur itaque natus? Placeat!</p>
<div class="row">
<div class="col mybox1">Nested 1</div>
<div class="col mybox1">Nested 2</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mybox">feature 1</div>
</div>
<div class="col">
<div class="mybox">feature 2</div>
</div>
<div class="col">
<div class="mybox">feature 3</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</html>