-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (57 loc) · 3.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
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Karla:ital,wght@0,200..800;1,200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Karla:ital,wght@0,200..800;1,200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{background-image:url(./Designs/image-jpeg.jpeg);background-repeat:no-repeat;background-size: cover;background-position: center;background-color:black;}
main{height:800px;width:100%;}
.nav-bar{width:100%;margin:auto;display: flex;justify-content: space-between;align-items: center;}
.nav-bar ul li{list-style: none;display: inline-block;margin:0px 80px;position:relative;}
.nav-bar ul li::after{content:'';height:3px;width:0;background:#2a6da8;position:absolute;left:0px;bottom:-10px;transition:0.5s;}
.nav-bar ul li:hover::after{width:100%;}
button{cursor:pointer;width:200px;height:40px;font-size:20px;margin-left:200px;border-radius:20px;padding:10px;text-align:center;font-weight:bold;border:none;}
button:hover{background-color:black;color:#2a6da8}
a{text-decoration:none;color:white}
a:hover{color:#2a6da8;}
h3{margin:200px 0px 0px 200px;color:#2a6da8;}
.text{margin-left:200px;color:#2a6da8;font-family:"bungee"sans-serif;font-size:40px;}
.text-1{line-height:0px;margin-left:200px;color:#2a6da8;}
.quote{color:white;margin-left:200px;font-size:30px;font-family:"Pacifico"sans-serif;}
</style>
<body>
<main>
<div class="nav-bar">
<ul>
<li><a href="#">Intro</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="recent.html">Recent work</a></li>
<li><a href="contact.html">Get in touch</a></li>
</ul>
<div style="display: flex;gap:10px;justify-content:end;">
<a href="https://www.facebook.com/david.kvng.372" target="_blank">
<img src="./Designs/icons8-facebook.svg" alt="facebook" style="height:25px;width:25px;background-color:white;margin-top:10px;">
</a>
<a href="https://www.linkedin.com/in/ntochukwu-david-565b97337" target="_blank">
<img src="./Designs/icons8-linkedin.svg" alt="linkedin" style="height:25px;width:25px;background-color:white;margin-top:10px;">
</a>
<a href="https://x.com/dntochukwu" target="_blank">
<img src="./Designs/icons8-x-50.png" alt="X" style="height:25px;width:25px;background-color:white;margin-top:10px;">
</a>
</div>
</div>
<div style="height:500px;display: flex;">
<div style="height:400px;width:50%;">
<h3>Hi there!</h3>
<h1 class="text">MY NAME IS NTOCHUKWU DAVID </h1>
<h2 class="text-1">I’m a front-end Web Developer</h2>
<p class="quote">"It’s not about perfect. It’s about effort. And when you bring that effort every single day, that’s where transformation happens. That’s how change occurs."</p>
<a href="about.html"><button>Let's get started ></button></a>
</div>
</div>
</main>
</body>
</html>