-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (135 loc) · 5.9 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
<!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>Portfolio - Manuel Salazar</title>
<meta name="description" content="Manuel Salazar Portfolio">
<link rel="icon" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-container">
<header>
<nav class="navbar flex">
<a href="index.html" class="navbar__logo">
<img class="logo" src="images/coding-logo.png" alt="A coding logo">
</a>
<ul class="navbar__list flex">
<li class="list--item">
<a href="index.html" class="item__link">
Home
</a>
</li>
<li class="list--item">
<a href="pages/about-me.html" class="item__link">
About
</a>
</li>
<li class="list--item">
<a href="pages/projects.html" class="item__link">
Projects
</a>
</li>
<li class="list--item">
<a href="pages/contact.html" class="item__link">
Contact
</a>
</li>
</ul>
<div class="navbar__hamburger">
<span class="hamburger--bar"></span>
<span class="hamburger--bar"></span>
<span class="hamburger--bar"></span>
</div>
</nav>
</header>
</div>
<main>
<section class="welcome-section flex column y-center">
<div class="welcome-section__text">
<p class="welcome-text__1">Hey there!</p>
<h1 class="welcome-text__2">I'm</p>
<h1 class="welcome-text__3">Manuel Salazar</h1>
<p class="welcome-text__4">Web Developer and Designer</p>
<p class="welcome-text__5">I love to build and design amazing things with web technologies.</p>
</div>
<a class="welcome-section__btn flex center" href="pages/contact.html">
Let's build your project!
</a>
</section>
<section class="about-me-introduction flex column center">
<a href="pages/about-me.html" class="about-me-introduction__title title">
About Me
</a>
<div class="about-me-introduction__content flex column center">
<p class="content--text-1">
Hi, my name is Manuel Salazar, based in Medellín, Colombia.
</p>
<p class="content--text-2">
In the middle of 2021, I decided to specialize in <span>web development</span>, and since then I have been learning new things every single day.
</p>
</div>
<div class="about-me-introduction__btn">
<a class="btn btn--1" href="pages/about-me.html">
Click here to learn more about me
</a>
<i class="arrow-icon fas fa-arrow-right"></i>
</div>
</section>
<section class="projects-introduction flex column center">
<a href="pages/projects.html" class="projects-introduction__title title">
Projects
</a>
<div class="projects-introduction__content flex column">
<p class="content--text-3">
I constantly build projects to <span>strengthen</span> my skills and <span>learn</span> new things at the same time.
</p>
<p class="content--text-4">
Take a look at my latest projects.
</p>
</div>
<img class="projects-introduction__image" src="images/projects-bg.png" alt="Some of my projects Screenshots">
<div class="projects-introduction__btn">
<a class="btn btn--2" href="pages/projects.html">
See more
</a>
<i class="arrow-icon fas fa-arrow-right"></i>
</div>
</section>
<section class="contact-me-introduction flex column center">
<a href="pages/contact.html" class="contact-me-introduction__title title">
Contact Me
</a>
<p class="contact-me-introduction__text">
Feel free to get in touch with me. I'm waiting for your message!
</p>
<div class="contact-me-introduction__btn">
<a class="btn btn--3" href="pages/contact.html">
Get in touch with me
</a>
<i class="arrow-icon fas fa-arrow-right"></i>
</div>
</section>
</main>
<footer class="flex column center">
<div class="footer__logos flex center">
<a href="https://github.com/Norwyx">
<i class="footer-logo logos--github fab fa-github"></i>
</a>
<a href="https://twitter.com/norwyx">
<i class="footer-logo logos--twitter fab fa-twitter"></i>
</a>
</div>
<p class="footer__text">
Coded with <span><i class="heart-icon fas fa-heart"></i></span> by <a class="text--link" href="https://github.com/Norwyx">Manuel Salazar</a>
</p>
</footer>
<script src="index.js"></script>
<script src="https://kit.fontawesome.com/5e989be09d.js"
crossorigin="anonymous"></script>
</body>
</html>