index.html
<!DOCTYPE html>
<html lang="pt-br">
<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</title>
<link rel="stylesheet" href="style.css" />
<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=Krona+One&family=Rubik+Glitch&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header></header>
<main>
<div class="content-container">
<div class="text-content">
<h1 class="title">
Eleve seu negócio digital a outro nível
<strong>com um Front-end de qualidade!</strong>
</h1>
<p class="text-description">
Olá! Sou Raiane Batista, desenvolvedora Front-end com especialidade
em
<strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e
designers a colocarem em prática boas ideias. Vamos conversar?
</p>
<div class="card-buttom">
<button >
<a class="social-button" href="https://www.linkedin.com/in/raiane-batista-developer/">LinkedIn</a>
</button>
<button >
<a class="social-button" href="https://www.instagram.com/raianebtsilva/">Instagram</a>
</button>
<button >
<a class="social-button" href="https://github.com/RaianeBatista">Github</a>
</button >
</div>
</div>
<img
class="card-image"
src="./assets/images/Imagem.png"
alt="Foto da Joana programando"
/>
</div>
</main>
<footer></footer>
</body>
</html>
style.css
body {
background-color: #000;
font-family: "Krona One", serif;
font-weight: 400;
font-style: normal;
}
h1,
p {
color: #f6f6f6;
}
strong {
color: #22d4df;
}
.content-container {
display: flex;
align-items: center;
gap: 30px; /* Espaçamento entre os elementos */
margin: 0 300px;
}
.text-content {
/* max-width: 60%; /* Ajuste conforme necessário */
width: 520px;
height: 482px;
margin-top: 150px;
}
.title {
margin-bottom: 40px;
}
.text-description {
margin-bottom: 51px;
}
.card-image {
width: 466px;
height: 526px;
}
button {
background-color: #22d4fd;
font-size: 1.5rem;
width: 180px;
height: 79px;
border-radius: 16px;
transition: background-color 0.3s ease, transform 0.3s ease; /* Adiciona uma transição suave */
}
button:hover {
background-color: #1ca3c9; /* Cor de fundo ao passar o mouse */
transform: scale(1.05); /* Aumenta ligeiramente o tamanho do botão */
}
.card-buttom {
display: flex;
gap: 30px;
height: 10px;
}
a {
color: #000;
text-decoration: none;
padding: 10px 5px;
}
.card-image {
margin-top: 150px;
height: 480px;
}
/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
.content-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px; /* Espaçamento entre os elementos */
margin: 0; /* Remove margens */
}
.title {
font-size: 1rem;
}
.text-content {
width: 100%;
height: auto;
margin: 0;
text-align: center; /* Centraliza o texto */
}
.card-image {
width: 100%;
height: auto;
margin-top: -150px;
}
button {
width: 100%;
margin: 20px 0; /* Adiciona margem superior e inferior */
align-self: flex-end; /* Alinha o botão ao final do contêiner */
}
.card-buttom {
display: flex;
flex-direction: column; /* Coloca os botões um abaixo do outro */
width: 100%;
margin-top: 150px; /* Adiciona margem superior para separar da imagem */
padding-bottom: 20px; /* Adiciona um pouco de espaço na parte inferior */
}
}
