-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (108 loc) · 4.5 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
<!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 | Natalie Cabral</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body onresize="changedSize()" onload="carregaMenu()">
<header class="header" id="home">
<button class="change-theme" id="btn"><span class="material-icons">dark_mode</span></button>
<div class="burguer_menu">
<i id="burguer" class="material-icons">menu</i>
<menu class="menu">
<ul>
<li><a href="./#home">Home</a></li>
<li><a href="./#about">About</a></li>
<li><a href="./#projects">Projects</a></li>
<li><a href="./#contact">Contact</a></li>
</ul>
</menu>
</div>
</header>
<main>
<section class="home">
<h1>Hi, I'm Natalie Cabral. Good to see you here.</h1>
<div class="photo"></div>
</section>
<section class="about" id="about">
<div class="introduction">
<h2>Who am I?</h2>
<p class="introduction-text">
I'm brazilian and I've always had interest in art, design and creation. Determined to discover
new areas around technology besides design and illustration, I decided to delve deeper into the universe of programming.</p>
</div>
<div class="skills">
<div class="developer">
<h3>Web Developer</h3>
<h4>Languages and Tools:</h4>
<ul>
<li>JavaScript</li>
<li>ReactJS</li>
<li>Python</li>
<li>HTML</li>
<li>CSS</li>
<li>Scss</li>
<li>C</li>
</ul>
</div>
</div>
</section>
<section class="projects" id="projects">
<h3>Projects</h3>
<div class="project">
<img src="images/project1.png" alt="">
<div class="project-container">
<h4>GardenGuru</h4>
<p>This project was made with HTML and CSS, to practice forms and responsive design. The project contains a login and a sign up page, with options to sign in with Google and Facebook and a "forgot password" option (buttons with no function). The idea of the project is to create a minimalistic and monocromatic layout that follows the purpose of the app.</p>
<a href="#" target="_blank">Check it Out</a>
</div>
</div>
<div class="project">
<img src="images/project2.png" alt="">
<div class="project-container">
<h4>Project Title</h4>
<p>Landing Page made with HTML, CSS and JavaScript, to show the projects created by an independent artist, their prices and their specifications.</p>
<a href="#" target="_blank">Check it Out</a>
</div>
</div>
</section>
<section class="contact" id="contact">
<h3>Contact Me!</h3>
<fieldset>
<form action="" method="post" autocomplete="on">
<p>
<label for="iname">Name</label><br>
<input type="text" name="name" id="iname" placeholder="Enter your Name" required><br>
</p>
<p>
<label for="iemail">Email</label><br>
<input type="email" name="email" id="iemail" placeholder="Enter your Email" required><br>
</p>
<p>
<label for="imsg">Message</label><br>
<textarea name="msg" id="imsg" cols="40" rows="10" placeholder="Type your message..."></textarea><br>
</p>
<p><input type="submit" value="Send" id="button" class="button"></p>
</form>
</fieldset>
</section>
<a href="./#home"><span class="material-icons" id="go-up">arrow_upward</span></a>
</main>
<footer>
<nav>
<a href="https://www.linkedin.com/in/natalie-c-118432110/" target="_blank"><i class="devicon-linkedin-plain"></i></a>
<a href="https://github.com/nataliegcabral" target="_blank"><i class="devicon-github-original"></i></a>
<a href="https://www.behance.net/nataliegc" target="_blank"><i class="devicon-behance-plain"></i></a>
</nav>
<p> © Natalie Cabral 2022</p>
</footer>
<script src="main.js"></script>
<script src="darkmode.js"></script>
</body>
</html>