-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (85 loc) · 4 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
<!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="icon" href="https://res.cloudinary.com/supremevillad/image/upload/v1663040086/icons/coffee_fvyizg.svg"/>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Prototype Site of JVillad</title>
</head>
<body>
<!-- NAV BAR -->
<nav>
<div class="logo">
<h3><a href="index.html">Supreme John</a></h3>
</div>
<ul class="nav-links sidebar">
<li><a href="#about">ABOUT</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!-- END OF NAV -->
<section class="intro flex scroll" id="intro">
<div class="row">
<div class="column img">
<img src="https://res.cloudinary.com/supremevillad/image/upload/v1663032209/akuma_hrobpo.gif" alt="Street fighter character akuma"/>
</div>
<div class="column col-w">
<h1>Hi, I am <span class="name">Lorem, ipsum </span> lorem dolor sit amet consectetur adipisicing elit. Cumque ea porro in, alias ullam amet ..
</h1>
</div>
</div>
</section>
<main>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div class="about-section" id="about">
<h2>About me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repudiandae laborum voluptatem voluptatum? Accusamus, sequi aliquid. Ex similique saepe quo in! Sed minima, omnis maxime vel iure esse assumenda ipsam voluptas, architecto sit, non distinctio? Labore modi adipisci id eaque.</p>
</div>
<section class="skills-section scroll" id="skills">
<h2>Tools and Skills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorum delectus sint quasi tempora! Tenetur.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section class="projects scroll" id="projects">
<h2>Projects</h2>
<!-- TO DO: ADD PROJECTS -->
<p>Lorem, ipsum dolor.</p>
<p>Lorem, ipsum dolor.</p>
<p>Lorem, ipsum dolor.</p>
<p>Lorem, ipsum dolor.</p>
<p>Lorem, ipsum dolor.</p>
</section>
<section class="contact-section scroll" id="contact">
<div class="get-in-touch">
<h2>Get in touch</h2>
<p>My inbox is always open for opportunities and project collaboration!</p>
<a href="mailto:jyvillad@gmail.com" class="email-button">Send me an email</a>
</div>
</section>
<div class="social-links">
<a href="https://www.linkedin.com/" target="_blank" class="link">LinkedIn</a>
<a href="https://www.facebook.com/" target="_blank" class="facebook">Facebook</a>
<a href="https://github.com/" target="_blank" class="github">GitHub</a>
<a href="https://instagram.com/" target="_blank" class="instagram">Instagram</a>
</div>
</main>
<footer class="footer">
<p>Made by John Villad ☕</p>
</footer>
<script src="site.js"></script>
</body>
</html>