SASS Crush Course - Create a travel website with SASS
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Japan Visit</title>
<link rel="stylesheet" href="styles/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div id="whole-body-img">
<div id="whole-body-color">
<!-- MENU BEGAIN -->
<div id="menu">
<div class="icon"><i class="fa fa-motorcycle fa-2x"></i></div>
<div class="menu-item">
<ul>
<li>Home</li>
<li>About</li>
<li>Turism</li>
<li>Visa</li>
</ul>
</div>
<div class="lang">
<strong>EN</strong> 日本語
</div>
</div>
<!-- MENU ENDS -->
<!-- LANDING BEGAIN -->
<div id="landing">
<div class="land-header">
<h2>Japan <br> Visit</h2>
<p>Welcome to Japan national turism</p>
</div>
<div class="essential-knowledge">
<div class="ek">
<div class="location-icon"><i class="fa fa-location-arrow fa-3x"></i></div>
<div class="ek-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam assumenda laboriosam
praesentium in culpa excepturi sed explicabo ex consectetur eum tempora nemo quaerat
quidem iste </p>
</div>
</div>
<div class="ek">
<div class="time-icon"><i class="fa fa-history fa-3x"></i></div>
<div class="ek-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam assumenda laboriosam
praesentium in culpa excepturi sed explicabo ex consectetur eum tempora nemo quaerat
quidem iste </p>
</div>
</div>
<div class="ek">
<div class="life-icon"><i class="fa fa-life-ring fa-3x"></i></div>
<div class="ek-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam assumenda laboriosam
praesentium in culpa excepturi sed explicabo ex consectetur eum tempora nemo quaerat
quidem iste </p>
</div>
</div>
</div>
</div>
<!-- LANDING ENDS -->
<!-- <hr> -->
<!-- SPOTS BEGAIN -->
<div id="favorite-spots">
<div class="spots-header">
<p>Japan is an island country in East Asia.</p>
<h4>Favorite Spots</h4>
</div>
<br>
<div class="spots">
<div class="spots-1">
<div class="spot-item">
<h3 class="spot-title">Spot One</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="spots-2">
<div class="spot-item">
<h3 class="spot-title">Spot Two</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="spots-3">
<div class="spot-item">
<h3 class="spot-title">Spot Three</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="spots-4">
<div class="spot-item">
<h3 class="spot-title">Spot Four</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<!-- SPOTS ENDS -->
</div>
</div>
</body>
</html>
styles/style.scss
@import "./variable";
@import './menu';
@mixin container{
width: 80%;
margin-left: 10%;
}
@mixin flexPro($jc, $ai, $fw, $fd) {
display: flex;
justify-content: $jc;
align-items: $ai;
flex-wrap: $fw;
flex-direction: $fd;
}
@mixin fontStyle($ff, $fs, $lh){
font-family: $ff;
font-size: $fs;
line-height: $lh;
}
@mixin setBackground($h, $w, $bg){
height: $h;
width: $w;
background: $bg;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#whole-body-img{
@include setBackground(100%, 100%, url(../img/japan.jpg));
#whole-body-color{
background: $grediantClr;
#menu{
@include flexPro(space-around, center, wrap, row);
border-bottom: 1px solid white;
text-transform: uppercase;
@include fontStyle($menuText, 1.2rem, 1em);
text-shadow: $shadow;
.menu-item{
ul{
text-decoration: none;
display: flex;
li{
list-style: none;
padding: 0 10px;
}
}
}
}
#landing{
@include container();
.land-header{
h2{
@include fontStyle($heading, 4.5rem, 3.5rem);
padding: 2rem 0 0 0;
}
p{
@include fontStyle($bodyText, 1.7rem, 0);
}
}
.essential-knowledge{
margin-top: 15%;
@include flexPro(space-around, center, nowrap, row);
.ek{
margin: 1rem;
border-style: solid;
border-width: 1px;
padding: 1em;
}
}
}
#favorite-spots{
@extend #landing;
margin-top: 12em;
.spots-header{
text-align: center;
p{
@include fontStyle($bodyText, 1rem, 0);
}
h4{
@include fontStyle($heading, 2.5rem, 0);
}
}
.spots{
@include flexPro(space-between, center, wrap, row);
.spots-1{
@include setBackground(300px, 250px, url(../img/japan.jpg));
}
.spots-2{
@include setBackground(300px, 250px, url(../img/landscape-architecture-sky-building-chateau-palace-826338-pxhere.com.jpg));
}
.spots-3{
@include setBackground(300px, 250px, url(../img/landscape-grass-plant-sky-field-meadow-1110475-pxhere.com.jpg));
}
.spots-4{
@include setBackground(300px, 250px, url(../img/pedestrian-architecture-road-street-town-building-1004450-pxhere.com.jpg));
}
.spot-item{
padding: 1em 0 0 1em;
text-shadow: $shadow;
}
}
}
}
}
styles/_variable.scss
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tinos&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
$grediantClr : linear-gradient(
to bottom,
#0a002c00,
#0a002c2d 15%,
#0a002c 85%,
);
$bodyText : 'Tinos', serif;
$menuText: 'DM Serif Display', serif;
$heading: 'Bebas Neue', cursive;
$shadow : 2px 2px 5px rgb(18, 22, 18);
No comments: