-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (61 loc) · 2.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hannah Collins</title>
<!-- googlefonts -->
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet">
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- header section -->
<header id="header">
<div class="left-section">
<a class="logo" href="#">Hannah.</a>
</div>
<nav>
<a class="nav-item active" href="#">Home</a>
<a class="nav-item" href="#">Service</a>
<a class="nav-item" href="#">Projects</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contacts</a>
</nav>
</header>
<!-- Hero section -->
<section id="hero">
<div class="hero-left">
<div class="content">
<h1>Hi, I'm Hannah Collins</h1>
<h3>Creative Web Designer</h3>
<p>
I’m Hannah Collins, a creative web designer passionate about building innovative digital experiences. With a
focus on clean design, intuitive user experiences, and the latest web technologies, I help brands and
businesses transform their online presence. Whether you're looking to revamp your current site or build
something from the ground up, I’m here to bring your ideas to life. Let’s create something amazing together!
</p>
<div class="cta">
<button class="cta-1">Hire Me</button>
<button class="cta-2">Contact Me</button>
</div>
<div class="social-icon">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-tiktok"></i>
</div>
</div>
</div>
<div class="hero-right"></div>
</section>
<!-- CodeGenWeb 2024 -->
</body>
</html>