-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (142 loc) · 4.5 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
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRAFT | Ngobar Week 3</title>
<link rel="stylesheet" href="./styles/app.css" />
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header data-aos="fade-down" class="container">
<nav class="navigation__wrapper">
<div class="navigation__title">
<h3>Craft</h3>
</div>
<div class="navigation__menus">
<a href="/#" class="navigation__link">Work</a>
<a href="/#" class="navigation__link">About</a>
<a href="/#" class="navigation__link">Service</a>
<a href="/#" class="navigation__link">Contact</a>
</div>
<div class="navigation__action">
<a href="/#" class="navigation__button">Hire Me</a>
<button type="button" class="navigation__toggler">
<svg
width="22"
height="13"
viewBox="0 0 22 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 2H20M2 11H20"
stroke="black"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</nav>
</header>
<!-- HEADER -->
<!-- ASIDE -->
<aside id="sidebar" class="sidebar__content">
<!-- BUTTON CLOSER SIDEBAR -->
<button type="button" class="navigation__closer">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x"
width="28"
height="28"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
<!-- BUTTON CLOSER SIDEBAR -->
<!-- SIDEBAR MENU -->
<div class="sidebar__menus">
<a href="/#" class="navigation__link">Work</a>
<a href="/#" class="navigation__link">About</a>
<a href="/#" class="navigation__link">Service</a>
<a href="/#" class="navigation__link">Contact</a>
</div>
<!-- SIDEBAR MENU -->
</aside>
<!-- ASIDE -->
<!-- MAIN CONTENT -->
<main class="container">
<article class="content__article">
<h1 data-aos="fade-up-right" data-aos-delay="400" class="content__hero__title">
Crafting digital products, <span>Brands & Experience</span>
</h1>
</article>
<div class="content__banner">
<img
src="./assets/images/hero-banner.webp"
alt="craft-banner"
loading="lazy"
/>
</div>
<section class="content__information">
<div class="content__item__value">
<div>
<h3 id="value-project-complete"></h3>
<p>Project complete</p>
</div>
<div>
<h3 id="year-experience"></h3>
<p>Year of experience</p>
</div>
</div>
<div class="content__item__information">
<p>
Stay Informed, Stay Ahead: Unveiling the Future of Technology,
Gadgets, and Innovation.
</p>
<div class="content__item__side">
<div class="content__avatar">
<img
class="content__item__avatar"
src="./assets/images/avatar-icon.webp"
alt="avatar"
loading="lazy"
/>
<img
class="content__item__avatar"
src="./assets/images/avatar-icon.webp"
alt="avatar"
loading="lazy"
/>
<img
class="content__item__avatar"
src="./assets/images/avatar-icon.webp"
alt="avatar"
loading="lazy"
/>
</div>
<button class="content__item__button">Watch Our Videos</button>
</div>
</div>
</section>
</main>
<!-- MAIN CONTENT -->
<!-- SCRIPT -->
<script src="./scripts/app.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>