i'm working on a website and i have a probleme, here is my code
Html :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Purpl5Rain - Website</title>
<link rel="stylesheet" href="css/firstPage.css">
<link rel="stylesheet" href="css/secondPage.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="header">
<p class="Oswald rightTextHeader">BeatMaker</p>
</div>
<div class="firstPage">
<div class="middleTitle">
<h1 class="bigTitle Oswald">PURPL5RAIN</h1>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="secondPage">
</div>
</body>
</html>
Css:
* {
margin: 0;
scroll-behavior: smooth;
}
@font-face {
font-family: "Oswald";
src: url("font/Oswald-VariableFont_wght.ttf") format('truetype');
}
.firstPage {
height: 90vh;
width: 100vw;
background-color: #ffffff;
}
.box {
margin-top: 40vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box span {
display: block;
width: 30px;
height: 30px;
border-bottom: 1.5px solid #000;
border-right: 1.5px solid #000;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotate(45deg) translate(-10px, -10px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(10px, 10px);
}
}
.bigTitle {
font-size: 100px;
letter-spacing: 2px;
}
.Oswald {
font-family: "Oswald";
}
.middleTitle {
display: flex;
justify-content: center;
position: relative;
top: 43%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.rightTextHeader {
margin-left: 3vh;
margin-top: 1.5vh;
font-size: 20px;
transition: all 300ms;
}
.header {
background-color: #fff;
height: 8.5vh
}
.secondPage {
height: 100vh;
width: 100vw;
background-color: #000;
}
my probleme is : why secondPage doesn't appear on my website ?
I tried so many thing but nothing works, i need help, i didn't find help on internet
sorry if my english are very bad i'm french and i don't speak english very well
thanks for everybody who will help me
Aucun commentaire:
Enregistrer un commentaire