-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (120 loc) · 6.81 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
<!DOCTYPE html>
<html lang = "pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="img/iconpicture.png" type="image">
<title> Carolina Veloso | Portifolio</title>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700;800&family=Poppins:ital,wght@0,100;0,400;0,800;1,700&family=Shippori+Mincho:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- nav bar -->
<div class="wrapper">
<header>
<nav>
<img class="logo-pessoal" src= "img/logobege.png" alt="Carolina Veloso's Logo">
<div class="menu">
<ul>
<li><a href="#home"> Home</a></li>
<li><a href="#information-section">About me</a></li>
<li><a href="#project-section">Projects </a></li>
<li><a href="#contact">Contact </a></li>
</ul>
</div>
</nav>
</header>
</div>
<!-- primeira tela -->
<section id="home">
<div class="home-area">
<div class="home-text">
<div class="imagem-inicio"><img src="img/CV.png" width="250" frameBorder="0"></div>
<p> Hi, i'm </p>
<h1> Carolina Veloso.</h1>
<p>Back-end Developer</p>
<div class="button"><a href="#information-section">About me </a></div>
<div class="socials">
<a href="https://www.linkedin.com/in/carolinacveloso/" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#644336" width="50" height="50" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="https://github.com/carolinacveloso" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#644336" width="50" height="50" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- About me tela -->
<section id="information-section">
<div class="information">
<br>
<h2> About me</h2>
<br><br><br>
<p>Meu nome é Carolina Veloso, tenho 24 anos e sou uma advogada apaixonada por tecnologia que decidiu trilhar o caminho da programação. Atualmente estou cursando Ciências da computação e iniciando os estudos de tecnologias voltadas ao Back-end.</p>
<br>
<p>Apesar disso já entendo tecnologias como JavaScript, HTML e CSS. </p>
</div>
<div class="headshot-container">
<img src="img/profilepicture.png" width="300" height="300" frameBorder="0" >
</div>
</section>
<!-- Projects tela -->
<section id="project-section">
<h2>Projects</h2>
<br>
<p class="legenda"> Projeto Encriptador </p>
<div class="project-container">
<a href="https://carolinacveloso.github.io/Encriptador-Challenge-1-ONE/challenge1.html">
<div class="project-card-encriptador">
</div>
</a>
<div class="project-card">
<p class="embreve">EM BREVE</p>
</div>
<div class="project-card">
<p class="embreve">EM BREVE</p>
</div>
</div>
<div class="project-container">
<div class="project-card">
<p class="embreve">EM BREVE</p>
</div>
<div class="project-card">
<p class="embreve">EM BREVE</p>
</div>
<div class="project-card">
<p class="embreve">EM BREVE</p>
</div>
</div>
</section>
<!-- quarta tela -->
<section id="contact"></section>
<div class="contact-info">
<h2>Contact Info</h2>
<br>
<p> Se interessou pelo meu trabalho e quer entrar em contato? <br>
Só seguir abaixo:</p><br>
<div class="socials-footer">
<a href="https://www.linkedin.com/in/carolinacveloso/" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#644336" width="50" height="50" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
</div>
</div>
<footer>
<img class="logo-footer" src= "img/logobege.png" alt="Carolina Veloso's Logo">
</footer>
<script scr="app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(window).scroll(function() {
if($(window).scrollTop()){
$("nav").addClass("brown");
}
else {
$("nav").removeClass("brown");
}
});
</script>
</body>
</html>