Skip to content

Commit 838e4e8

Browse files
Henrique-CSSHenrique-CSS
authored
Add files via upload
1 parent 4baa349 commit 838e4e8

File tree

12 files changed

+492
-0
lines changed

12 files changed

+492
-0
lines changed

‎API/send_mail.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?php
2+
$number = "11977998923";
3+
$msg = '"'.$_POST['msg-submit'].'"';
4+
5+
header:"https://api.whatsapp.com/send?phone=".$number."&text=".$msg;

‎about.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<!--CSS-->
10+
<link rel="stylesheet" href="css/style.css">
11+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
12+
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
13+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
14+
<script src="js/waypoint.js"></script>
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
16+
17+
<title>Henrique.css - About me</title>
18+
</head>
19+
20+
<body>
21+
<header class="am-header">
22+
<h2><img src="img/perfil.png" alt="Henrique" width="64px" style="border-radius: 50%;"> Henrique Souza Oliveira
23+
</h2>
24+
</header>
25+
<div class="container">
26+
<br>
27+
<br>
28+
<br>
29+
<div class="msg-me">
30+
<h1>My name is Henrique,</h1>
31+
</div>
32+
<div class="msg-me">
33+
<h2> I'm a Full-stack and I'm currently working as a
34+
freelancer
35+
but I'm
36+
looking for new opportunities to work.</h2>
37+
</div>
38+
<div class="msg-you">
39+
<h3>How old are you?</h3>
40+
</div>
41+
<div class="msg-me">
42+
<h3>I'm 16</h3>
43+
</div>
44+
<div class="msg-you">
45+
<h3>What programming languages did you know?</h3>
46+
</div>
47+
<div class="msg-me">
48+
<h3>I know C#, C, CSS, JS, PHP, Assembly Language, Bash, Batch, PowerShell</h3>
49+
</div>
50+
<div class="msg-you">
51+
<h3>Are you able to work outside of Brazil?</h3>
52+
</div>
53+
<div class="msg-me">
54+
<h3>Of course</h3>
55+
</div>
56+
<div class="msg-you">
57+
<h3>What the most popular project that you worked on?</h3>
58+
</div>
59+
<div class="msg-me">
60+
<h3><a href="https://github.com/Eric-Mendes/unexpected-isaves/">Unexpected Isaves</a></h3>
61+
</div>
62+
<br><br><br><br>
63+
</div>
64+
<footer class="am-contact text-center">
65+
<form action="API/send_mail.php" method="post">
66+
<div class="row"><input type="text" name="message" id="msg-am"
67+
placeholder="Send an email message with your name and your message">
68+
<button type="submit" id="msg-submit"><i class="bi bi-arrow-right-short"
69+
style="font-size: 30px;"></i></button>
70+
</div>
71+
</form>
72+
</footer>
73+
</body>
74+
75+
</html>

‎css/style.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
2+
3+
.container {
4+
max-width: 960px;
5+
margin: 0 auto;
6+
margin-top: 20px;
7+
font-family: 'IBM Plex Sans', sans-serif;
8+
}
9+
10+
#title {
11+
font-family: 'IBM Plex Mono', monospace;
12+
}
13+
14+
.Dev-image {
15+
width: 300px;
16+
height: auto;
17+
margin-top: 40px;
18+
}
19+
20+
.card {
21+
margin-top: 20px;
22+
}
23+
.title {
24+
display: grid;
25+
width: 100%;
26+
height: 100vh;
27+
}
28+
.msg-you {
29+
text-align: right;
30+
background-color: #f7f7f7;
31+
padding: 20px;
32+
margin-top: 20px;
33+
margin-left: 40px;
34+
border-radius: 20px 0 20px 20px;
35+
}
36+
.msg-me {
37+
text-align: left;
38+
background-color: #9deccf;
39+
padding: 20px;
40+
margin-top: 20px;
41+
margin-right: 40px;
42+
border-radius: 20px 20px 20px 0;
43+
width: fit-content;
44+
}
45+
.am-header{
46+
background-color: #6ab9b9;
47+
padding: 10px 20px;
48+
width: 100%;
49+
margin-top: -20px;
50+
position: fixed;
51+
border: 0;
52+
}
53+
.am-contact {
54+
background-color: #6ab9b9;
55+
padding: 10px 20px;
56+
width: 100%;
57+
margin-top: -20px;
58+
position: fixed;
59+
bottom: 0;
60+
}
61+
#msg-am {
62+
width: 80%;
63+
padding: 13px;
64+
margin: 0 auto;
65+
border-radius: 40px;
66+
border: 0;
67+
margin-bottom: 10px;
68+
}
69+
#msg-submit {
70+
height: fit-content;
71+
width: fit-content;
72+
border-radius: 40px;
73+
border: 0;
74+
background-color: #9deccf;
75+
}
76+
.skills{
77+
height: 10px;
78+
width: 10px;
79+
border-radius: 20px;
80+
background-color: #9deccf;
81+
}
82+
.skills[value="10"]{
83+
height: 10px;
84+
width: 10%;
85+
border-radius: 20px;
86+
background-color: #9deccf;
87+
}
88+
.skills[value="20"]{
89+
height: 10px;
90+
width: 20%;
91+
border-radius: 20px;
92+
background-color: #9deccf;
93+
}
94+
.skills[value="30"]{
95+
height: 10px;
96+
width: 30%;
97+
border-radius: 20px;
98+
background-color: #9deccf;
99+
}
100+
.skills[value="40"]{
101+
height: 10px;
102+
width: 40%;
103+
border-radius: 20px;
104+
background-color: #9deccf;
105+
}
106+
.skills[value="50"]{
107+
height: 10px;
108+
width: 50%;
109+
border-radius: 20px;
110+
background-color: #9deccf;
111+
}
112+
.skills[value="60"]{
113+
height: 10px;
114+
width: 60%;
115+
border-radius: 20px;
116+
background-color: #9deccf;
117+
}
118+
.skills[value="70"]{
119+
height: 10px;
120+
width: 70%;
121+
border-radius: 20px;
122+
background-color: #9deccf;
123+
}
124+
.skills[value="80"]{
125+
height: 10px;
126+
width: 80%;
127+
border-radius: 20px;
128+
background-color: #9deccf;
129+
}
130+
.skills[value="90"]{
131+
height: 10px;
132+
width: 90%;
133+
border-radius: 20px;
134+
background-color: #9deccf;
135+
}
136+
.skills[value="100"]{
137+
height: 10px;
138+
width: 100%;
139+
border-radius: 20px;
140+
background-color: #9deccf;
141+
}
142+
.skill-container{
143+
border-radius: 20px;
144+
width: 100%;
145+
margin-bottom: 20px;
146+
background-color: rgb(224, 224, 224);
147+
}

‎img/giselle.png

54.5 KB
Loading

‎img/perfil.png

493 KB
Loading

‎img/portifolio.png

14.6 KB
Loading

‎img/startshop.png

425 KB
Loading

‎img/todo-list.png

6.84 KB
Loading

‎img/unexpected.png

47.7 KB
Loading

‎index.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<!--CSS-->
10+
<link rel="stylesheet" href="css/style.css">
11+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
12+
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
13+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
14+
<script src="js/waypoint.js"></script>
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
16+
17+
<title>Henrique.css - Home</title>
18+
</head>
19+
20+
<body>
21+
<div class="container">
22+
<div class="title">
23+
<div class="title-content">
24+
<h2 style="font-weight: 700;">Welcome to my</h2>
25+
<h1 id="title"></h1>
26+
27+
<div class="row">
28+
<div id="social-media"><i class="bi bi-github"></i> <i class="bi bi-instagram"></i> <i
29+
class="bi bi-dribbble"></i> <i class="bi bi-linkedin"></i> <i class="bi bi-discord"></i> <i
30+
class="bi bi-twitch"></i> <i class="bi bi-code"></i></div>
31+
</div>
32+
</div>
33+
<div class="scrow">
34+
<i class="bi bi-mouse-fill" style="font-size: 40px;"></i><i class="bi bi-arrow-down"
35+
style="font-size: 40px;"></i>
36+
</div>
37+
</div>
38+
39+
<script>
40+
var i = 0;
41+
var txt = 'Personal portiflio';
42+
var speed = 50;
43+
44+
function typeWriter() {
45+
if (i < txt.length) {
46+
document.getElementById("title").innerHTML += txt.charAt(i);
47+
i++;
48+
setTimeout(typeWriter, speed);
49+
}
50+
}
51+
typeWriter();
52+
</script>
53+
<br><br>
54+
<h3>A little bit about me</h3>
55+
<div class="row">
56+
<div class="col-md-6">
57+
<div class="card shadow">
58+
<div class="card-body">
59+
<img src="img/perfil.png" alt="My image" class="card-image rounded mx-auto d-block"
60+
width="300px" style="margin: auto; border-radius: 10px;">
61+
<br>
62+
<h5 class=" card-title">About me</h5>
63+
<p class="card-text">
64+
I'm a Full-stack developer, designer and Social Media based in Brazil. I'm passionate
65+
about
66+
creating
67+
beautiful and functional websites and Cyber Security. I'm currently working as a
68+
freelancer
69+
and
70+
I'm
71+
looking for new opportunities to work.
72+
</p>
73+
<a href="about.html" class="btn btn-primary">Read more</a>
74+
</div>
75+
</div>
76+
</div>
77+
<div class="col-md-6">
78+
<div class="card shadow">
79+
<div class="card-body">
80+
<h5 class="card-title">My works</h5>
81+
<p class="card-text">
82+
All of my most inportant works
83+
</p>
84+
<a href="portifolio.html" class="btn btn-primary">Read more</a>
85+
</div>
86+
</div>
87+
<div class="card shadow">
88+
<div class="card-body">
89+
<h5 class="card-title">Skills</h5>
90+
<p class="card-text">
91+
Some of my skills
92+
</p>
93+
<a href="skills.html" class="btn btn-primary">Read more</a>
94+
</div>
95+
</div>
96+
97+
</div>
98+
</div>
99+
</body>
100+
101+
</html>

0 commit comments

Comments
 (0)