-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (120 loc) · 5.96 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
<!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>Svendev</title>
<meta property="og:title" content="Svendev" />
<meta property="og:image"
content="https://cdn.discordapp.com/attachments/1104493897746493451/1168297566711074826/BxQ4PIPXE5mjAAAAAElFTkSuQmCC.png?ex=655140e5&is=653ecbe5&hm=58c639bc818bb2b248a7da97b9b3e3ca7efd4a5a2100a74631bb490819333e91&" />
<meta property="og:type" content="website" />
<meta property="og:description" content="My website come visit!" />
<meta property="og:image:width" content="50%" />
<meta property="og:image:height" content="50%" />
<link rel="icon" type="image/x-icon"
href="https://cdn.discordapp.com/attachments/1104493897746493451/1168297566711074826/BxQ4PIPXE5mjAAAAAElFTkSuQmCC.png?ex=655140e5&is=653ecbe5&hm=58c639bc818bb2b248a7da97b9b3e3ca7efd4a5a2100a74631bb490819333e91&">
<!-- MAIN CSS -->
<link rel="stylesheet" text="text/css" href="assets/css/style.css">
</head>
<body>
<header id="header">
<div class="container">
<a href="/" class="logo">
<h1>Sven.</h1>
</a>
<ul class="menu">
<li class="menu_item">
<a href="/#hero" class="menu_link active-link">Home</a>
</li>
<li class="menu_item">
<a href="/#about" class="menu_link">About</a>
</li>
<li class="menu_item">
<a href="/#portofolio" class="menu_link">Resume</a>
</li>
<li class="menu_item">
<a href="/#portfolio" class="menu_link">Portfolio</a>
</li>
<li class="menu_item">
<a href="/#services" class="menu_link">Services</a>
</li>
<li class="menu_item">
<a href="/#contact" class="menu_link">Contact</a>
</li>
<ion-icon name="close-outline" class="close_icon"></ion-icon>
</ul>
<ion-icon name="menu-outline" class="toggle_icon"></ion-icon>
<ion-icon name="moon-outline" class="switch dark_mode active_switch"></ion-icon>
<ion-icon name="sunny-outline" class="switch light_mode"></ion-icon>
</div>
</header>
<main>
<!-- HERO SECTION -->
<section class="hero section" id="hero">
<div class="hero_container container grid">
<div class="hero_content">
<h4>Hi there,</h4>
<h1>I'm a
<span class="typed" data-typed-items="Developer, Designer, Configurator"></span>
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias rem maxime velit ducimus quaerat
esse et atque sequi blanditiis eligendi.
</p>
<div class="hero_social">
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#"><ion-icon name="logo-discord"></ion-icon></a>
<a href="#"><ion-icon name="logo-github"></ion-icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
</div>
<a href="#contact" class="btn">
Read more
<ion-icon name="chevron-forward-outline"></ion-icon>
</a>
</div>
<div class="hero_img">
<img src="https://images.creativemarket.com/0.1.0/ps/4354066/910/607/m1/fpnw/wm0/developer-preview-01-.png?1524634780&s=db2717ecada59f8387d85fd2cef9ce8f&fmt=webp"
alt="" class="img-fluid">
</div>
</div>
</section>
<!-- ABOUT SECTION
<section class="about section" id="about">
<h2 class="section_title">About Me</h2>
<div class="about_container container grid">
<div class="about_img">
<img src="./earth.png" alt="ALT">
</div>
<div class="about_content">
<h1>Pro website developer</h1>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur voluptatibus perferendis
ipsum, dolore porro corporis. Et velit culpa ea voluptate rerum totam quo repudiandae ad quaerat
voluptatem magni numquam repellendus quas incidunt id provident eveniet similique, veritatis
facilis perspiciatis amet. At reprehenderit nesciunt ipsa rem et esse alias laudantium corporis?
</p>
<div class="about_info">
<div>
<span class="number">200</span>
<br>
<span class="text">Complete <br>projects</span>
</div>
<div>
<span class="number">120</span>
<br>
<span class="text">Posetive <br>reviews</span>
</div>
</div>
</div>
</div>
</main>
-->
<!-- Type js -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!-- 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>
<!-- Main Script -->
<script src="assets/js/main.js"></script>
</body>
</html>