-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (120 loc) · 4.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template-02</title>
<!-- ===STYLES=== -->
<link rel="stylesheet" href="/css/globals.css">
<link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/landing.css">
<!-- ===ICONS=== -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- ===FONTS=== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/css/services.css">
</head>
<body>
<!-- ===HEADER=== -->
<header class="header">
<div class="container">
<a class="logo" href="#"><img src="/images/logo.png" alt="Company Logo"></a>
<nav class="main-nav">
<ul class="main-nav-list">
<li><a class="main-nav-link active" href="#home">Home</a></li>
<li><a class="main-nav-link" href="#service">Service</a></li>
<li><a class="main-nav-link" href="#portfolio">Portfolio</a></li>
<li><a class="main-nav-link" href="#about">About</a></li>
<li><a class="main-nav-link" href="#pricing">Pricing</a></li>
<li><a class="main-nav-link" href="#contact">Contact</a></li>
<li><a class="main-nav-link" search-icon" href="#"><ion-icon name="search-outline"></ion-icon></li></a>
</ul>
</nav>
</div>
</header>
<!-- ===LANDING=== -->
<section class="landing">
<div class="landing-text">
<div class="landing-content">
<h2>HELLO WORLD!
WE ARE KASPER,WE MAKE ART.</h2>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt
nibh
pulvinar a. Curabitur aliquet quam. Accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit,
eget
tincidunt.</p>
</div>
</div>
<ion-icon class="right" name="chevron-forward-outline"></ion-icon>
<ion-icon class="left" name="chevron-back-outline"></ion-icon>
<ul class="bullets">
<li></li>
<li class="active"></li>
<li></li>
</ul>
</section>
<!-- ===SERVICES=== -->
<section>
<div class="main-heading">
<div class="head">
<h1>services</h1>
<span></span>
</div>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt.
</p>
<div class="container">
<div class="services-box">
<!-- SERVICE 01 -->
<div class="service">
<div>
<ion-icon class="service-icon" name="hardware-chip-outline"></ion-icon>
</div>
<div>
<h2>Vorem amet intuitive</h2>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget
tincidunt nibh pulvinar a. Curabitur aliquet quam.</p>
</div>
</div>
<!-- SERVICE 02 -->
<div class="service">
<div>
<ion-icon class="service-icon" name="camera-outline"></ion-icon>
</div>
<div>
<h2>Vorem amet intuitive</h2>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget
tincidunt nibh pulvinar a. Curabitur aliquet quam.</p>
</div>
</div>
<!-- SERVICE 03 -->
<div class="service">
<div>
<ion-icon class="service-icon" name="desktop-outline"></ion-icon>
</div>
<div>
<h2>Vorem amet intuitive</h2>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget
tincidunt nibh pulvinar a. Curabitur aliquet quam.</p>
</div>
</div>
<!-- SERVICE 04 -->
<div class="service">
<div>
<ion-icon class="service-icon" name="desktop-outline"></ion-icon>
</div>
<div>
<h2>Vorem amet intuitive</h2>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget
tincidunt nibh pulvinar a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>