This is the code I am pasting down below, when I am trying to compile this using sass compiler, I'm getting an error which states:-
"Error: Invalid CSS after "�": expected 1 selector or at-rule, was "��$"
on line 1 of sass/c:\Users\shain\Desktop\udemy assignments and other stuffs\advanced css and sass\starter- NAtours\sass\main.scss
>> ��$
^
"
I tried using the command line(power shell to compile and live compile sass extension in vs code both aren't working for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours | Exhilarating tours for venturesome humans</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="../starter- NAtours/img/logo-white.png" alt="logo" class="header__logo" >
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">NATURE</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
<a href="#" class="btn btn--white btn--animated">Discover the tours </a>
</div>
</header>
</body>
</html>
css:-
$color-primary-light: #e75d8b;
$color-primary-dark: #8a1d52;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
/*font-size: 1.6rem ; */
line-height: 1.7;
color: #777;
padding: 3rem;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.8),
rgba($color-primary-dark, 0.8)) ,
url(../myimg/nature.jpg);
background-size: cover;
background-position: top;
position: relative;
clip-path: polygon(0% 80vh, 0% 0%, 100% 0%, 100% 99%);
}
.header__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.header__logo {
height: 3.5rem;
}
.header__text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: beige;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
.heading-primary--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.heading-primary--sub
{
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
animation-name: moveInRight;
animation-duration: 1s;
animation-timing-function: ease-out;
}
/* to animate the stuff (its amazing!) */
@keyframes moveInLeft{
0% {
opacity: 0;
transform: translateX(-10rem);
}
80%{
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight{
0% {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInBottom{
0% {
opacity: 0;
transform: translateY(3rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.btn:link, .btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
.btn:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2);
}
.btn:active{
transform: translateY(-1px);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.btn--white {
background-color: beige;
color: #777;
}
.btn::after{
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.btn--white::after{
background-color: beige;
}
.btn:hover::after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
.btn--animated
{
animation: moveInBottom .5s ease-out .75s;
animation-fill-mode: backwards;
}
- posting an image :- https://i.stack.imgur.com/n95kH.jpg
