I'm doing a tutorial from DesignCourse on YouTue about SVG Clip Path and in my .scss file i have many styles but styles after line 38 are not even applying and when i checked code with his, i saw that his code is the same as mine and i don't know why those styles are not applying. I tried switching into Incognito mode and switching browsers but none of that helped (I do not get any errors in Visual Studio Code and in browser console).
Here is my .scss file:
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
body, html {
height: 100%;
}
body {
margin: 0;
font-family: "Nunito";
background: #220954;
}
.wrapper {
position: relative;
overflow: hidden;
nav {
width: 20%;
float: right;
background-color: #5923c6;
height: calc(100vh - 4em);
font-size: 1.4em;
line-height: 1.5em;
color: white;
padding: 2em;
//clip-path: url("#clipPath");
ul {
list-style-type: none;
padding: 0;
a {
text-decoration: none;
display: block;
padding: 1em 0;
font-weight: bold;
color: white;
}
p {
color: red;
}
}
}
h1 {
color: white;
margin: 2em;
font-size: 5em;
position: absolute;
top: 0;
left: 0;
}
button {
position: absolute;
top: 0;
right: 0;
margin: 2em;
font-size: 1.4em;
background: none;
border: 3px solid purple;
color: white;
padding: 1em;
cursor: pointer;
outline: none;
&:hover {
background: rgba(0, 0, 0, 01);
}
}
}
And here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CLIPPY</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<button id="open">Open Nav</button>
<div class="wrapper">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem recusandae aperiam est nulla veritatis magnam dolores, totam perspiciatis unde, mollitia vel exercitationem quas reprehenderit qui deserunt? Illum ipsam eveniet exercitationem?</p>
</nav>
</div>
<h1>Bro, wooooooahh</h1>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire