Skip to content

Commit

Permalink
Update style.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@dylaNick
dylaNick authored Nov 9, 2024
1 parent 15b7f2b commit 6a23366
Showing 1 changed file with 164 additions and 174 deletions.
338 changes: 164 additions & 174 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,223 1,213 @@

.hammersmith-one-regular {
font-family: "Hammersmith One", sans-serif;
font-weight: 400;
font-style: normal;
}

font-family: "Hammersmith One", sans-serif;
font-weight: 400;
font-style: normal;
}

*{
margin: 0%;
padding: 0%;
color: aliceblue;
}

header{
background-color: #b5c3d2;
background-size: cover;
margin: 0%;
}

.logo{
width: 30%;
}

.logoo{
text-align: center;
}
.tuba{
width: 1000px;
height: 400px;
border: 1px solid #000000;
background-color: #000000;
opacity: 50%;
text-align: center;
margin: 100px;
padding: 10px;
font-family: hammersmith one;
font-size: 37px;
text-align: justify center;
display: grid;
justify-content: center;
margin: auto;
border-radius: 50px 0 20px 10;
border-radius: 50pt;
}

.voce-sabia{
text-align: center;
font-family: hammersmith one;
font-size: 100px;
padding: 10px;
color: #d7e7f5;
opacity: 60%;
}

.tipos{
text-align: center;
font-family: hammersmith one;
font-size: 100px;
padding: 10px;
color: #bccddd;
opacity: 70%;
}


@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

*{
margin: 0px;
padding: 0px;
* {
margin: 0%;
padding: 0%;
color: aliceblue;
}

.context {
width: 100%;
position: absolute;
top:50vh;

header {
background-color: #b5c3d2;
background-size: cover;
margin: 0%;
}

.context h1{
text-align: center;
color: #fff;
font-size: 50px;
.logo {
width: 30%;
}

.logoo {
text-align: center;
}

html, body{
background: -webkit-linear-gradient(to left, #c4c5db, #8d8fad);
width: 100%;
height:100vh;
font-family: 'Exo', sans-serif;
position: absolute;
background-repeat: no-repeat;
.tuba {
width: 1000px;
height: 400px;
border: 1px solid #000000;
background-color: #000000;
opacity: 50%;
text-align: center;
margin: 100px;
padding: 10px;
font-family: hammersmith one;
font-size: 37px;
text-align: justify center;
display: grid;
justify-content: center;
margin: auto;
border-radius: 50px 0 20px 10;
border-radius: 50pt;
}

.cor{
background-image: linear-gradient(to bottom,#8099b4,#192427);
.voce-sabia {
text-align: center;
font-family: hammersmith one;
font-size: 100px;
padding: 10px;
color: #d7e7f5;
opacity: 60%;
}

.tipos {
text-align: center;
font-family: hammersmith one;
font-size: 100px;
padding: 10px;
color: #bccddd;
opacity: 70%;
}

.alerta{
background-image: linear-gradient(to bottom, #abe6df,#4a6d69);
@import url("https://fonts.googleapis.com/css?family=Exo:400,700");

* {
margin: 0px;
padding: 0px;
}

.baleia{
text-align: center;
font-size: 50px;
.context {
width: 100%;
position: absolute;
top: 50vh;
}

.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
.context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}

.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;

html,
body {
background: -webkit-linear-gradient(to left, #c4c5db, #8d8fad);
width: 100%;
height: 100vh;
font-family: "Exo", sans-serif;
position: absolute;
background-repeat: no-repeat;
}

.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
.cor {
background-image: linear-gradient(to bottom, #8099b4, #192427);
}

.alerta {
background-image: linear-gradient(to bottom, #abe6df, #4a6d69);
}

.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
.baleia {
text-align: center;
font-size: 50px;
}

.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
.circles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}

.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}

.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

@keyframes animate {
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

0%{
transform: translateY(0) rotate(0deg);
opacity: 2;
border-radius: 100%;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}

100%{
transform: translateY(-1000px) rotate(720deg);
opacity: -5;
border-radius: 100%;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 2;
border-radius: 100%;
}

100% {
transform: translateY(-1000px) rotate(720deg);
opacity: -5;
border-radius: 100%;
}
}

0 comments on commit 6a23366

Please sign in to comment.