Scribd
Upload
4 views4 pages

Comprovante PDF

The document is an HTML webpage designed to display a biography with a video background and a card interface. It includes styled elements such as a bubble image, buttons for interaction, and a link to an Instagram profile. The layout is responsive and visually appealing, utilizing CSS for animations and effects.

Uploaded by

gabrielferrarilima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views4 pages

Comprovante PDF

The document is an HTML webpage designed to display a biography with a video background and a card interface. It includes styled elements such as a bubble image, buttons for interaction, and a link to an Instagram profile. The layout is responsive and visually appealing, utilizing CSS for animations and effects.

Uploaded by

gabrielferrarilima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>BIOGRAFIA</title>
<style>
body {
background-color: rgb(14, 13, 13);
color: rgb(255, 255, 255);
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden; /* Esconde o excesso do vídeo */
}

/* Fundo de vídeo */
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Coloca o vídeo atrás do conteúdo */
object-fit: cover; /* Garante que o vídeo ocupe toda a tela */
filter: blur(2px); /* Reduz o desfoque para melhorar o desempenho */
}

.card {
position: relative;
width: 450px;
height: 600px;
background: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
border-radius: 20px;
backdrop-filter: blur(15px);
border: 1px solid rgb(95, 95, 95);
box-shadow: 0 15px 35px rgba(41, 41, 41, 0.459);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 100px;
z-index: 1; /* Garante que o card fique acima do vídeo */
}

.bubble {
position: absolute;
top: -80px;
width: 170px;
height: 170px;
background: rgba(50, 51, 59, 0.2);
border-radius: 50%;
animation: bubble-animation 6s ease-in-out infinite;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Garante que a imagem não ultrapasse a bolha */
}

.bubble img {
width: 100%;
height: 100%;
object-fit: cover; /* Garante que a imagem se ajuste ao tamanho da
bolha */
border-radius: 50%; /* Mantém o formato circular */
}

.custom-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #29292e;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s ease;
}

.custom-button:hover {
transform: scale(1.1);
}

.instagram-button {
background-color: #29292e;
color: white;
border: none;
border-radius: 15px;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.6s ease;
text-decoration: none;
margin-top: 20px;
}

.instagram-button img {
width: 24px;
height: 24px;
margin-right: 5px;
}

.instagram-button:hover {
transform: scale(1.1);
}

.player {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
animation: float 6s ease infinite;
margin-top: 30px;
}

.image-text {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.image {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}

.text {
text-align: left;
}

.text h3 {
margin: 0;
font-size: 16px;
}

.text p {
margin: 0;
font-size: 14px;
color: rgb(200, 200, 200);
}

.controls {
display: flex;
align-items: center;
justify-content: center;
}

.play-pause-button {
background: transparent;
border: none;
color: white;
font-size: 25px;
cursor: pointer;
outline: none;
transition: transform 0.2s ease;
margin-right: 10px;
}

.play-pause-button:hover {
transform: scale(1.1);
}

.volume-control {
width: 150px;
appearance: none;
background: white;
height: 3px;
border-radius: 5px;
outline: none;
cursor: pointer;
}

.volume-control::-webkit-slider-thumb {
appearance: none;
width: 15px;
height: 15px;
background: white;
border-radius: 50%;
cursor: pointer;
}

@keyframes bubble-animation {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
</style>
</head>
<body>
<!-- Fundo de vídeo -->
<video class="video-background" autoplay loop muted id="backgroundVideo">
<source src="waves.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>

<!-- Card principal com animação -->


<div class="card">
<div class="bubble">
<img src="eu.jpeg" alt="Imagem na bolha">
</div>
<button class="custom-button">Clique Aqui</button>
<a href="https://www.instagram.com/gab.soarss" target="_blank"
class="instagram-button">
<img
src="https://static.vecteezy.com/system/resources/thumbnails/018/930/460/small_2x/
instagram-logo-instagram-icon-transparent-free-png.png" alt="Instagram">
Instagram
</a>
</div>
</body>
</html>

You might also like