-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (118 loc) · 6.36 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!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>Jairo Euzebio | Web Designer and Developer</title>
<meta name="description" content="I create digital experiences to promote products, services, and events.">
<!-- Preload large image -->
<!-- Stylesheets -->
<link rel="stylesheet" href="https://lunevedy.com/assets/2.0/css/lunevedy.min.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
<!-- Google Fonts -->
<!-- Font Awesome 6 icons. Delete if not using. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
header .col-text h2 { line-height: 1.8 }
.col-1 > h3 { line-height: 1.8 }
</style>
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="manifest" href="assets/img/site.webmanifest">
</head>
<body>
<!-- menu and 'hero block' header -->
<nav class="theme-dark"><div class="container-menu">
<a href="#" class="brand">
<img src="assets/img/logo.png" alt="Sample website logo">
</a>
<div class="container-menu-links">
<div class="nav-toggle" id="nav-toggle-btn">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
</div>
<ul class="links-wrapper">
<li><a href="#">Home</a></li>
<li><a href="portfolio/index.html">Portfolio</a></li>
<li><a href="store/index.html">Store</a></li>
<li><a class="btn btn-solid btn-soft" id="btn-cta" href="contact/index.html"><span>Contact</span> <i class="fa-regular fa-envelope"></i></a></li>
</ul>
</div></div></nav>
<!-- header starts here -->
<header class="theme-dark cols-2-half text-center-mobile">
<div class="col-2 col-text">
<div class="badge">WELCOME</div>
<h1>Jairo Euzebio</h1>
<h2>I am an innovative front-end developer who loves to build human-friendly interfaces.</h2>
<div class="container-btn">
<a href="portfolio/index.html" class="btn btn-solid btn-soft"><span>View my work</span><i class="fa-regular fa-folder-open"></i></a><a href="contact/index.html" class="btn btn-outline btn-soft"><span>Get in touch</span><i class="fa-regular fa-envelope"></i></a>
</div>
</div>
<div class="col-2 col-visual">
<figure>
<img src="assets/img/me.jpeg" alt="Placeholder image">
</figure>
</div>
</header>
<!-- header ends here -->
<!-- main content with sections -->
<main>
<!-- section starts here -->
<section class="theme-dark section-selector-1 w-1356px">
<div class="col-1 text-center w-820px">
<h2>Recent projects</h2>
<h3>Below you can see some examples of my recent work. Check out my complete portfolio of <a href="portfolio/index.html">web design</a> projects. Have a project you would like to discuss? <a href="contact/index.html">Let's make something great together!</a> </h3>
</div>
<!-- Begin three-column flexbox grid -->
<div class="flex-cols-3 cols-gap-4">
<div class="col-3">
<figure class="photos-zoom photos-brightness" style="overflow: hidden;">
<a href="portfolio/Project-hero/index-1.html"><img src="assets/img/project-hero.png" alt="Hero block gallery project"></a>
</figure>
<h3>Hero Block Gallery</h3>
<p>A gallery of hero block elements with split-screen layouts and duotone images.</p>
<a href="portfolio/Project-hero/index-1.html" class="btn btn-solid btn-soft"><span>View project</span><i class="fas fa-arrow-right"></i></a>
</div>
<div class="col-3">
<figure class="photos-zoom photos-brightness" style="overflow: hidden;">
<a href="portfolio/fashion/index.html"><img src="assets/img/project-fashion.jpg" alt="Fashion retailer project"></a>
</figure>
<h3>Snazzy Fashion</h3>
<p>A web page for a fashion retailer with a background video that plays in a continuous loop.</p>
<a href="portfolio/fashion/index.html" class="btn btn-solid btn-soft"><span>View project</span><i class="fas fa-arrow-right"></i></a>
</div>
<div class="col-3">
<figure class="photos-zoom photos-brightness" style="overflow: hidden;">
<a href="portfolio/smoothies/index.html"><img src="assets/img/project-smoothie.jpg" alt="Placeholder image"></a>
</figure>
<h3>Smooth Smoothies</h3>
<p>A multi-column, flexbox-based page layout and hero image with a tinted overlay.</p>
<a href="portfolio/smoothies/index.html" class="btn btn-solid btn-soft"><span>View project</span><i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- End three-column flexbox grid -->
</section>
<!-- section ends here -->
</main>
<!-- footer -->
<footer class="theme-dark text-center-desktop text-center-mobile">
<h2>Jairo Euzebio</h2>
<h3>Front-end designer and developer</h3>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="portfolio/index.html">Portfolio</a></li>
<li><a href="store/index.html">Store</a></li>
<li><a href="contact/index.html">Contact</a></li>
</ul>
<ul class="footer-icons">
<li><a href="https://www.linkedin.com/in/jairoeuzebio" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://github.com/JairoEuzebio" target="_blank"><i class="fab fa-github-square"></i></a></li>
</ul>
<p class="privacy"><a href="privacy.html">Privacy & Legal</a></p>
</footer>
<script src="https://lunevedy.com/assets/js/lunevedy.js"></script>
</body>
</html>