This is the first time I am using sass, so, I don’t know is there any problem. I am using koala for compile scss
<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">
<link rel="stylesheet" href="./base.css">
<title>Anime</title>
</head>
<body>
<div id="mainView">
<div id="navigator">
<nav>
<div id="logo"><p>Anime</p></div>
<div id="navigation">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Community</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact us</li>
</ul>
</div>
</nav>
</div>
<main>
<p>We are the best group to provide news about Anime and Manga</p>
<p>There are more than 30 people in our ground who's working with anime production company like KyoAni</p>
<button>Discover Us</button>
</main>
</div>
<section id="types">
<div>
<img src="" alt="">
<p>Romance</p>
<p>Find romance anime which have awsome heart whelming story line</p>
</div>
<div>
<img src="" alt="">
<p>Shonen</p>
<p>Anime with epic fight and badass character</p>
</div>
<div>
<img src="" alt="">
<p>slice of life</p>
<p>Anime with beautiful story life and great character development</p>
</div>
</section>
<section id="manga">
<div><img src="" alt=""></div>
<div>
<p>Let's talk about manga</p>
<p>Manga is like a comic book and because it's created in japan, so we call it manga
many anime stroies are based on manga. If a manga gettin very popular then producar make it an anime.
So,yeah manga is very awesome thing
</p>
<button>Discover</button>
</div>
</section>
<section id="hub"></section>
<h3>Community hub</h3>
<p>This is the place where we find young talent. If you are a story writer or illustrator, then show us your taled</p>
<div>
<p>stories</p>
<p>Submit your stories here</p>
</div>
<div>
<p>illustrator</p>
<p>Submit your wounderful drawing</p>
</div>
<div>
<p>Discuss</p>
<p>talk with our professional about your carrer in japan anime world</p>
</div>
</body>
</html>
Scss
body,html{
height: 100%;
margin: 0;
}
@import "main";
_main.scss
#mainView{
margin: 0;
height: 80vh;
background-image: url("./image/Glassess.png");
}
// Navigation area
#navigator{
padding-top: 20px;
}
nav{
margin-top: 20px;
overflow: hidden;
width: 70%;
margin: auto;
background-color: white;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 30px;
align-items: center;
#logo{
padding-left: 20px;
font-size: 1.2rem;
}
#navigation ul{
display: flex;
justify-content: space-around;
list-style-type: none;
padding-right: 10px;
align-items: center;
}
#navigation ul li{
height: 100%;
display: block;
font-size: 1.1rem;
height: 100%;
}
}
// main text area
main{
text-align: center;
position: relative;
top: 30%;
p:nth-child(1){
font-size: 2.2rem;
}
p:nth-child(2){
font-size: 1.4rem;
}
button{
padding: 10px;
border-radius: 15px;
font-size: 0.9rem;
background-color: hsl(228, 100%, 63%);
box-sizing: border-box;
border:none;
color: white;
}
}