-
Notifications
You must be signed in to change notification settings - Fork 0
/
site.html
95 lines (90 loc) · 3.84 KB
/
site.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
<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="/css/index.css">
<title>My Portfolio</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar justify-between text-white navbar-primary>
<div class="container">
<h1 class="site-title">Shinobi 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="">
</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 Shinobi 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>
<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="">
<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="">
<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="">
<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="">
<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 Shinobi Designs
</div>
</footer>
</body>
</html>