Skip to content

Commit

Permalink
portfolio01
Browse files Browse the repository at this point in the history
  • Loading branch information
@anawcarol
anawcarol committed Dec 11, 2023
0 parents commit cc0ea56
Show file tree
Hide file tree
Showing 6 changed files with 368 additions and 0 deletions.
Binary file added .DS_Store
Binary file not shown.
Binary file added images/.DS_Store
Binary file not shown.
Binary file added images/perfil (1).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/projetos.webp
Binary file not shown.
125 changes: 125 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- código 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=Merriweather:ital,wght@0,300;0,400;0,900;1,300;1,700&family=Mukta:wght@200;300;400;500;700&display=swap" rel="stylesheet">
<!-- fim google fonts -->
<!-- icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- fim icons -->
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>

<header>
<div class="interface">
<div class="nome">
Ana Carolina
</div>

<nav class="menu">
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre mim</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Projetos</a></li>
</ul>
</nav>

<div class="contato">
<a href="#">
<button>Contato</button>
</a>
</div>
<!-- contato -->
</div>
<!-- interface -->
</header>

<main>
<section class="topo-do-site">
<div class="interface">
<div class="flex">
<div class="txt-topo-site">
<h1>Meu Portfólio</h1>
<p>Ola! Tenho 19 anos e sou uma desenvolvedora em ascenção,
meu maior objetivo como futura desenvolvedora é proporcionar mudanças significativas para a humanidade
através do meu trabalho.</p>
</div>
<!-- txt-topo-site -->

<div class="img-topo-site">
<img src="images/perfil (1).png" alt="">

</div>
<!-- img-topo-site -->
</div>
<!-- flex -->
</div>
<!-- interfae -->
</section>
<!-- topo-do-site -->

<section class="sobre-mim">
<div class="interface">
<div class="flex">
<h1>Sobre mim</h1>
<p>Meu nome é Ana Carolina Madeira Fialho, e estou cursando Engenharia de Software pela UnB (Unversidade de Braslia).
Tenho uma enorme paixão por sempre avançar novos horizontes na minha área. Meu sonho é me tornar
uma profissional desenvolvedora back-end e estou constantemente atrás de experiencia e habilidades para tal fim.
</p>
</div>
<!-- flex -->
</div>
<!-- interface -->
</section>
<!-- sobre-mim -->

<section class="skills">
<div class="interface">
<h1 class="titulo">Minhas Soft Skills</h1>
<div class="flex">
<div class="skills-box">
<i class="bi bi-filetype-html"></i>
</div>
<div class="skills-box">
<i class="bi bi-filetype-css"></i>

</div>
<div class="skills-box">
<i class="bi bi-filetype-py"></i>

</div>
</div>
</div>
</section>
<!-- skills -->

<section class="projetos">
<div class="interface">
<h1 class="titulo">Projetos</h1>
<div class="flex">
<div class="img-port" style="background-image: url(images/projetos.webp);">
<div class="overlay">PROJETO EM JAVA: inspirado no site letterbox, fiz esse projeto
em Java com o paradgma Orientação a Objetos.
</div>
</div>
</div>
</div>
</section>

<section class="contato">
<div class="interface">
<h1 class="titulo">Entre em contato comigo!</h1>
<h2> e-mail: [email protected]</h2>
</div>
</section>
</main>

</body>
</html>
243 changes: 243 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
/* Estilo geral */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Merriweather', serif;
background-color: rgb(233, 226, 216);
height: 100vh;
}

.interface {
max-width: 1280px;
margin: 0 auto;
}

.flex {
display: flex;
}

/* Estilo do cabeçário */

header {
padding: 40px 4%;
color: rgb(111, 21, 141);
}

header > .interface {
display: flex;
align-items: center;
justify-content: space-between;
}

header a {
color: rgb(0, 0, 0);
text-decoration: none;
display: block;
transition: .2s;
}

header a:hover {
color: rgb(171, 101, 223);
transform: scale(1.09);
}

header nav ul {
list-style-type: none;
}

header nav ul li {
display: inline-block;
padding: 0 40px;
}

header .contato button {
color: rgb(1, 2, 3);
padding: 10px 40px;
font-family: 'Merriweather', serif;
font-size: 15px;
font-weight: 600;
background-color: rgb(146, 75, 190);
border: 0;
border-radius: 30px;
}

h1.titulo{
color:rgb(139, 55, 167);
font-size: 28px;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 20px;
}

header .interface,
header .menu ul,
header .nome ul {
list-style-type: none;
display: flex;
}

header .menu li,
header .nome li {
margin-right: 20px;
}

header .nome {
font-family: 'Merriweather', serif;
font-size: 38px;
font-weight: 700;
}

/* Estilo do topo */

section.topo-do-site {
padding: 40px 4%;
}

section.topo-do-site .flex {
align-items: center;
justify-content: center;
gap: 90px;
}

.topo-do-site .img-topo-site {
flex-shrink: 0;
margin-top: -20px;
}

.topo-do-site img {
width: 100%;
max-width: 380px;
height: auto;
display: block;
}


.topo-do-site h1{
color:rgb(139, 55, 167);
font-size: 28px;
line-height: 40px;
}

.topo-do-site p{
color: #000000;
margin: 45px 0;
line-height: 1.8;
font-size: 18px;
}

.topo-do-site .img-topo-site img{
position: relative;
animation: flutuar 2s ease-in-out infinite alternate;
}

@keyframes flutuar {
0% {
top: 0;
}
100%{
top: 30px;
}
}

section.sobre-mim {
padding: 40px 4%;
}

section.sobre-mim .flex {
display: flex;
align-items: center;
justify-content: center;
gap: 200px; /* Ajuste conforme necessário para controlar o espaçamento entre h1 e p */
}

.sobre-mim h1{
color:rgb(139, 55, 167);
font-size: 28px;
line-height: 40px;
max-width: 1000px;


}

.sobre-mim p{
color: #000000;
line-height: 1.8;
font-size: 18px;
width: 800px;

}

/*estilo das skills*/

section.skills h1{
padding: 40px 4%;
margin-left: 14px;

}

.skills .skills-box i{
color: #000000;
padding: 175px;
font-size: 100px;

}

/*estilo projetos*/

section.projetos{
padding: 80px;
}

section.interface h1{
padding: 40px 4%;
}

.img-port{
width: 360px;
height: 460px;
background-size: cover;
background-position: 20% 80%;
transition: 3s;
cursor: pointer;
border-radius: 40px;
position: relative;
}

.img-port:hover{
background-position: 100%;
}

section.projetos .flex{
justify-content: center;
}

.overlay{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(3, 3, 3, 0.574);
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 400;
color: rgb(211, 170, 235);
}

/*estilo contato*/

section.contato h1{
margin-left: 50px;
margin-bottom: 50px;
}

section.contato h2{
margin-left: 50px;
}

0 comments on commit cc0ea56

Please sign in to comment.