-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (107 loc) · 6.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Portfolio | Luiz Guilherme</title>
</head>
<body>
<header>
<nav class="navigation-bar">
<h1>L<span class="last-letter">G</span></h1>
<ul class="items">
<li><a class="item" href="#page-knowledge">Skills</a></li>
<li><a class="item" href="#page-projects">Projects</a></li>
<li><a class="item" href="#page-aboutme">About</a></li>
<li><a class="item" href="#page-contact">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<div class="div-main">
<scroll-page id="page-aboutme">
<img class="perfil" src="./images/me.png" alt="my-photo">
</scroll-page>
<h1>Hi, my name is Luiz Guilherme</h1>
<h2>About me</h2>
<scroll-page id="page-knowledge"> </scroll-page>
<p class="summary">
I have 18 years old, I'm from Brazil and I'm a Front-end Developer,
have knowledge, with HTML and CSS and actually studing
<abbr title="Programming language responsible for user interaction">Javascript</abbr>.
I'm looking for my first job, why believe that the practice is that build a profissional.
</p>
</div>
<h2>Knowledge</h2>
<article class="knowledge">
<img class="dev-icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original-wordmark.svg" alt="html">
<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="html">
<p class="summary">HTML is a markup language for the creation and structure of web pages, consisting of a series of elements that define for the browser the content and the meaning it has.</p>
<img class="dev-icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original-wordmark.svg" alt="css">
<img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="css">
<p class="summary">CSS is a markup language for styling web pages, describing the browser how should show the HTML. It makes it possible that the pages won't be only black and white and adapt to different screen sizes.</p>
<scroll-page id="page-contact"></scroll-page>
<img class="dev-icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="javascript" />
<img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E" alt="css">
<p class="summary">Javascript is a Programming Language responsible for the interactive pages, is the native language for web browse.</p>
<button id="test" onclick="sayHello()">test javascript</button>
<p id="test-p"></p>
</article>
<h2>Contacts</h2>
<div class="contacts">
<a href="https://www.linkedin.com/in/luiz-guilherme-78905323a/" target="_blank" rel="external">
<img src="https://img.shields.io/badge/LINKEDIN-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
</a>
<a href="https://instagram.com/luizgmelo_" target="_blank" rel="external">
<img src="https://img.shields.io/badge/Instagram-%23E4405F?style=for-the-badge&logo=instagram&logoColor=white" alt="Instagram">
</a>
<scroll-page id="page-projects"></scroll-page>
<a href="https://discord.gg/fAGCKMw4sH" target="_blank" rel="external">
<img src="https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white" alt="Discord">
</a>
<a href="https://twitter.com/luizgmelo_" target="_blank" rel="external">
<img src="https://img.shields.io/badge/TWITTER-00BFFF?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter">
</a>
<a href="https://www.github.com/luizgmelo" target="_blank" rel="external">
<img src="https://img.shields.io/badge/GITHUB-000000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
</a>
</div>
<h2>My Projects</h2>
<div class="div-project">
<h3>Calculator</h3>
<iframe src="https://luizgmelo.github.io/calculator/" referrerpolicy="no-referrer">
Your device does not support this.
</iframe>
<a href="https://luizgmelo.github.io/calculator/" target="_blank">Access here!</a>
</div>
<div class="div-project">
<h3>Memory Game</h3>
<iframe src="https://luizgmelo.github.io/memory-game/" referrerpolicy="no-referrer">
Your device does not support this.
</iframe>
<a href="https://luizgmelo.github.io/memory-game" target="_blank">Access here!</a>
</div>
<div class="div-project">
<h3>Crunchyroll Clone</h3>
<iframe src="https://luizgmelo.github.io/crunchyroll-clone/" referrerpolicy="no-referrer">
Your device does not support this.
</iframe>
<a href="https://luizgmelo.github.io/crunchyroll-clone/" target="_blank">Access here!</a>
</div>
<div class="div-project">
<h3>Pokedex</h3>
<iframe src="https://luizgmelo.github.io/pokedexjs/" referrerpolicy="no-referrer">
Your device does not support this.
</iframe>
<a href="https://luizgmelo.github.io/pokedexjs/" target="_blank">Access here!</a>
</div>
</main>
<footer>
<p>Developed by <a href="https://www.github.com/luizgmelo" target="_blank">luizgmelo</a></p>
</footer>
<script src="./js/script.js"></script>
</body>
</html>