You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
2.9 KiB
CSS
236 lines
2.9 KiB
CSS
@font-face {
|
|
font-family: "CothamSans";
|
|
src: url("../assets/fonts/CothamSans.otf");
|
|
}
|
|
|
|
:root{
|
|
font-family:"CothamSans";
|
|
--reg:4vw;
|
|
--tit:6vw;
|
|
--green:#00ff00;
|
|
--pink:#ff00d9;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
|
|
html {
|
|
margin: 0;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
width: 300%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
|
|
|
|
img{
|
|
width: 15%;
|
|
position: absolute;
|
|
}
|
|
|
|
#container{
|
|
|
|
}
|
|
|
|
|
|
#img1{
|
|
animation: infinite cycle1 3s ;
|
|
margin-left: 50%;
|
|
}
|
|
|
|
#img2{
|
|
animation: infinite cycle2 3s ;
|
|
margin-left: 30%;
|
|
margin-top: 30%
|
|
}
|
|
|
|
#img3{
|
|
animation: infinite cycle3 3s ;
|
|
margin-top: 30%;
|
|
margin-left: 70%
|
|
}
|
|
|
|
|
|
|
|
|
|
p, a{
|
|
font-size: var(--reg);
|
|
}
|
|
|
|
|
|
|
|
|
|
.texts{
|
|
margin: 1.5%;
|
|
}
|
|
|
|
.texts .left,.center,.right{
|
|
float: left;
|
|
width: 33%;
|
|
}
|
|
|
|
.left{
|
|
text-align: left;
|
|
}
|
|
|
|
.center{
|
|
text-align: center;
|
|
}
|
|
|
|
.right{
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#practical{
|
|
font-size: var(--tit);
|
|
color: var(--pink);
|
|
}
|
|
|
|
|
|
|
|
|
|
.left{
|
|
margin-top: -4%;
|
|
}
|
|
|
|
.left p{
|
|
padding: 20% 5%;
|
|
}
|
|
|
|
.center p{
|
|
padding: 20% 5%;
|
|
}
|
|
|
|
.right p{
|
|
padding: 20% 0 ;
|
|
}
|
|
|
|
.center{
|
|
margin-top: 28%;
|
|
}
|
|
|
|
.right{
|
|
margin-top: 50% ;
|
|
}
|
|
|
|
|
|
.left div{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* border: red solid 3px; */
|
|
/* margin-top: 50%; */
|
|
/* position: absolute÷; */
|
|
/* margin-top:-50% */
|
|
}
|
|
|
|
|
|
|
|
|
|
#descriptio{
|
|
width: 10%;
|
|
/* margin-left: 60%; */
|
|
z-index: 20;
|
|
border: var(--pink) solid 3px;
|
|
background-color: rgba(255, 0, 242, 0.5);
|
|
}
|
|
|
|
#descriptio p{
|
|
padding: 0 1vw;
|
|
font-size: 40px;
|
|
color: white
|
|
}
|
|
|
|
#descriptio > a{
|
|
padding: 0 1vw;
|
|
font-size: 40px;
|
|
color: var(--pink)
|
|
}
|
|
|
|
|
|
a{
|
|
color:var(--green);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--pink);
|
|
-webkit-text-decoration-color:var(--pink);
|
|
text-shadow: 10px 10px 4px rgba(51, 255, 0, 0.1)
|
|
}
|
|
|
|
p{
|
|
text-shadow: 10px 10px 5px rgba(0,0,0, 0.1)
|
|
}
|
|
|
|
span2{
|
|
color:var(--green);
|
|
text-shadow: 10px 10px 4px rgba(51, 255, 0, 0.1)
|
|
}
|
|
|
|
.testa{
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* font-size: 3px; */
|
|
width: 10%;
|
|
/* margin-left: 5%; */
|
|
margin: 10px 0
|
|
}
|
|
|
|
|
|
|
|
button{
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
display: inline-block;
|
|
margin: .3vw 1vw;
|
|
padding: .5vw;
|
|
min-width: 8vw;
|
|
min-height: 2.5vw;
|
|
background-color: rgb(255);
|
|
border-radius: 40px;
|
|
box-shadow: 5px 8px 30px var(--pink);
|
|
}
|
|
|
|
.testa button:nth-child(2){margin-bottom: 30vh;}
|
|
|
|
button a{
|
|
font-family: "CothamSans";
|
|
text-decoration: none;
|
|
font-size: .8vw;
|
|
color: var(--pink)
|
|
|
|
|
|
}
|
|
|
|
@keyframes cycle1 {
|
|
0% { transform: rotate(88deg); }
|
|
50% {transform: rotate(121deg);}
|
|
100% {transform: rotate(88deg); }
|
|
}
|
|
|
|
@keyframes cycle2 {
|
|
0% { transform: rotate(1deg)}
|
|
50% {transform: rotate(33deg)}
|
|
100 {transform: rotate(1deg);}
|
|
}
|
|
|
|
@keyframes cycle3 {
|
|
0% { transform: rotate(185deg)}
|
|
50% {transform: rotate(151deg)}
|
|
100% {transform: rotate(185deg);}
|
|
} |