JSFiddle - React, Tailwind, and code Playground
by thailangodoy
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Awax</title>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght@100;400&family=Open+Sans&family=Raleway&family=Roboto&display=swap" rel="stylesheet">
<!--- template-->
<link href="assets/css/style.css" rel="stylesheet">
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/js/eventos.js" type="text/javascript"></script>
</head>
<body>
<section id="home" class="default">
<div class="menu-fixo">
<header>
<div class="container">
<div class="logo">
<div class="logoimg"></div>
</div><!-- // logo -->
<nav>
<ul>
<li><a href="#home" class="scroll">home</a></li>
<li><a href="#about" class="scroll">about us</a></li>
<li><a href="#services" class="scroll">services</a></li>
<li><a href="#projects" class="scroll">our projects</a></li>
<li><a href="#team" class="scroll">our team</a></li>
<li><a href="#clients" class="scroll">happy clients</a></li>
<li><a href="#price" class="scroll">price</a></li>
<li><a href="#facts" class="scroll">some facts</a></li>
<li><a href="#contact" class="scroll">contact us</a></li>
</ul>
</nav>
</div><!-- // container -->
</header>
</div>
<div class="banner">
<div class="slider">
<div class="slide"></div>
</div>
</div><!--// banner -->
</section><!-- // default-->
<main>
<section id="about" class="default about light">
<div class="container">
<div class="title"><h2>about us</h2><p>Who we are</p></div>
<div class="content">
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit porta augue eget eleifend. Pellentesque ut lorem quis felis faucibus vulputate. Morbi eget convallis justo. Cras lacinia sem sed nulla congue, a faucibus magna viverra. Nam porta...CSS
::selection {background:#b28756;color:#fff;}
::-webkit-scrollbar-track {background-color:#ccc;border-radius:50px;}
::-webkit-scrollbar{width:10px;background:#ccc;}
::-webkit-scrollbar-thumb{background:#b28756;border-radius:50px;}
/*template*/
*{margin:0;padding:0;border:0;box-sizing:border-box}
body, button{font-family:'Montserrat'; font-size:13px;}
ul, li{list-style:none;}
a{text-decoration:none;color:inherit;}
h2{font-size:30px; text-transform:uppercase;font-weight:600;}
.container{width:990px;margin:auto;}
.default{width:100%;height:100vh}
.light{background-color:#f7f7f7;}
.light .title h2{color:#000000;}
.light .title p{color:#bcbcbc;}
.dark .title h2{color:#fff;}
.dark .title p{color:#6e6e6e;}
.dark{background-color:#000;}
.light .container, .dark .container{padding:20px 0 20px 0}
.light .title, .dark .title{margin-bottom:20px;}
.button{background-color:#b98b59; padding:3px 20px; border-radius:30px; margin-top:20px;text-transform:uppercase; font-weight:600;}
/*header*/
.menu-fixo{position:fixed;display:flex;width:100%;}
header{background-color:#000000;width:100%; height:100px;display:flex;justify-content:center;}
header .container{align-items:center;display:flex;justify-content:space-between; }
.logoimg{width:80px;height:80px;background-color:green;border-radius:50%;}
header .container ul{display:flex;}
header nav li{border-bottom:3px solid #000000;height:100px;margin-right:15px;display:flex;justify-content:center; align-items:center;}
header nav li:last-child{margin-right:0}
header nav li:hover{border-bottom:3px solid #b98a56}
header nav li a{color:#fff; text-transform:uppercase}
/*banner*/
section .banner{background-color:blue;height:100vh;width:100%;}
.banner .slide{background-image:url(../images/bg.jpg); height:100vh;background-size:cover;background-position:center}
/*about*/
.about .title{display:flex;justify-content:center;align-items:center;flex-direction:column;}
.about .content{display:flex; justify-content:center;}
.about .left{padding-right:50px;...JavaScript
jQuery(document).ready(function(){
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
});
});