-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (103 loc) · 3.59 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
<!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" />
<link
rel="stylesheet"
href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<link rel="stylesheet" href="/css/style.css" />
<title>Portafolio UI & UX Designer</title>
</head>
<body>
<header id="mainheader">
<nav class="navbar">
<div class="container">
<div class="logo"><img src="/images/icon.png" alt="" /></div>
<ul>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="showcase">
<div class="container">
<h1 class="display-1">UI & UX Designer</h1>
<a href="#work"><span class="material-symbols-outlined">expand_more </span></a>
</div>
</div>
</header>
<section id="work">
<div class="container">
<div class="subtitle">
<h2>Latest Work</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed consequuntur sunt id autem nesciunt delectus
hic eum quod similique mollitia!
</p>
</div>
<div class="flex-3">
<img src="/images/work-1.jpg" alt="" />
<img src="/images/work-2.jpg" alt="" />
<img src="/images/work-3.jpg" alt="" />
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="subtitle">
<h2>Hi, I'm Francis</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed consequuntur sunt id autem nesciunt delectus
hic eum quod similique mollitia!
</p>
</div>
<div class="flex-2">
<img src="/images/about.png" alt="" />
<div class="about-text">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita quidem omnis saepe molestias, culpa
nobis voluptate laudantium reiciendis tempora laboriosam dolorem nihil enim commodi iusto obcaecati? Cum
voluptate est porro esse numquam aliquam ut. Eveniet facere fugit libero doloremque exercitationem vel,
aperiam iste odit minus adipisci, voluptate qui aspernatur possimus necessitatibus numquam fugiat animi
corrupti laborum culpa quod! Quasi iusto sunt ipsa obcaecati vel esse perferendis veritatis! Aperiam
similique quod odit molestias ea libero cupiditate! Cum commodi maiores facere doloribus!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolore earum nisi possimus non
voluptas? At dicta vel quos ea recusandae, amet magni quidem doloremque modi quisquam. Nam, iste eum,
molestiae exercitationem tempore, modi nesciunt dolorum in minima esse dolorem.
</p>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="flex-3">
<img src="/images/logo.png" alt="" />
<div class="social">
<img src="/images/icon-ig.png" alt="" />
<img src="/images/icon-tw.png" alt="" />
<img src="/images/icon-ln.png" alt="" />
</div>
<div class="contact-detail">
<p>portfolio@mail.com</p>
<p>+1 456 7896 789</p>
</div>
</div>
</div>
</section>
<footer id="mainfooter">
<div class="container">
<a href="https://twitter.com/irimaya?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false"
>Follow @irimaya</a
>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</footer>
</body>
</html>