-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhomepage.html
133 lines (124 loc) · 4.46 KB
/
homepage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Homepage</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar justify-between">
<div class="container">
<h1 class="site-title">Velocity Designs</h1>
<ul class="display-f">
<li class="ml-1 text-hover-secondary">
<a href="#work">Our Work</a>
</li>
<li class="ml-1 text-hover-secondary">
<a href="#about">About Us</a>
</li>
</ul>
</div>
</nav>
<!-- intro -->
<div class="container mt-5">
<div class="row justify-center">
<div class="col-12-xs col-5-md">
<h2>
<div class="font-xxl">Black-Belt</div>
<div class="font-xxl text-secondary">Your Website</div>
</h2>
<p class="text-gray mt-2 mb-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<a
href="#work"
class="btn-outlined-secondary text-secondary text-hover-white"
>View Our Work</a
>
</div>
<div class="col-12-xs col-5-md">
<img src="/img/laptop.svg" alt="laptop" />
</div>
</div>
</div>
<!-- about -->
<section id="about" class="bg-secondary-light-9 mt-5 pt-4 pb-4">
<div class="container">
<h2 class="mb-2">About Velocity Designs</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsam
animi aliquid sequi fuga, nam nesciunt dolore libero dolorem
exercitationem aliquam cupiditate atque illo, quae dicta doloribus et?
Ab ipsam inventore quam asperiores, sequi unde tenetur accusamus,
distinctio magni necessitatibus quis deserunt id alias. Iste eum ea
labore rerum voluptatibus.
</p>
<p class="mt-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta nam,
corrupti dolorum inventore perspiciatis id illum repellat iste amet
sapiente ducimus nihil molestias quasi, totam, ratione minima
molestiae blanditiis iure consequatur praesentium debitis. Nulla
maiores doloremque tempore nobis dolorum amet!
</p>
</div>
</section>
<!-- work section -->
<section id="work" class="mt-5">
<div class="container">
<h2 class="mb-2">Some of Our Work</h2>
<!-- Everything below is grid system -->
<div class="row gap-2">
<div class="col-12-xs col-6-md col-3-lg">
<div class="card p-0">
<h3 class="card-title m-1">Mario Club</h3>
<img src="/img/mario.png" alt="mario" />
<p class="m-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam,
hic!
</p>
</div>
</div>
<div class="col-12-xs col-6-md col-3-lg">
<div class="card p-0">
<h3 class="card-title m-1">Ninja Food</h3>
<img src="/img/food.png" alt="food" />
<p class="m-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam,
hic!
</p>
</div>
</div>
<div class="col-12-xs col-6-md col-3-lg">
<div class="card p-0">
<h3 class="card-title m-1">Just Add Marmite</h3>
<img src="/img/marmite.png" alt="marmite" />
<p class="m-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam,
hic!
</p>
</div>
</div>
<div class="col-12-xs col-6-md col-3-lg">
<div class="card p-0">
<h3 class="card-title m-1">Ninja Notes</h3>
<img src="/img/notes.png" alt="notes" />
<p class="m-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam,
hic!
</p>
</div>
</div>
</div>
<div class="row justify-center mt-2">
<button class="btn-secondary text-white font-md">View All</button>
</div>
</div>
</section>
<!-- footer -->
<footer class="bg-gray-light-7 pt-3 pb-3 mt-5">
<div class="container">copyright 2021 Velocity Designs</div>
</footer>
</body>
</html>