JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<header>
<div class="logo"></div>
<nav>
<ul>
<li>work</li>
<li>services</li>
<li>about</li>
<li>news</li>
<li>contact</li>
</ul>
</nav>
<div class="social_media_icons"></div>
</header>
<div class="container-fluid">
<section class="background-fixed">
<h1 class="title_desc">Company Name</h1>
</section>
<section class="description_slide">
<h2>Partnering with forward-thinking companies to build brands and design the products, services and digital experiences that bring them to life.</h2>
</section>
<section class="featured_work">
<h1>Featured Work</h1>
<p>Lorem ipsum dolor sit amet, dolorem splendide pri ne, habeo petentium hendrerit sit cu. Usu cibo dolores ei, duo id omnium definiebas, quo te esse illum dissentias. Soleat concludaturque sea at. Illum nobis putent per ex, nec tibique molestiae te, te sea sint quidam. In eum principes consulatu, hinc nemore nominavi his ei.
Nec elitr invidunt et, te exerci elaboraret usu, in dicit noluisse pri. Qui cu facete nostrum, et dico veniam pri. An sit eros velit, commune conclusionemque ius an. Choro molestie sit no, democritum disputando ne has.
Mazim efficiendi voluptatibus sea ne, vitae intellegam adversarium nam ex. Ex habeo libris everti mel, eum et putent nemore utroque. Alii doming aliquip quo et, sed novum discere mediocritatem ei. Te cum agam causae consetetur, qui accusam albucius placerat an, nec at eius phaedrum.
Populo nemore persecuti per et, amet theophrastus ius cu. Eruditi vocibus cu sed, alia erroribus assueverit usu in, his ne meliore rationibus. Malorum laoreet sed in, impetus aperiam et pro. Pro et ludus iriure efficiantur.
Purto lorem scriptorem ei vel, usu invidunt accusata dignissim id. Feugiat constituam et vix, putant platonem per ad. Erat posse ridens sit te, iisque labores eu ius. Ex pri quodsi impetus phaedrum, in dicant...
CSS
/* Body */
body{
margin-top: 90px;
}
.container-fluid {
padding: 0px;
}
/* Header section */
header{
top: 0px;
height: 90px;
background-color: blue;
position: fixed;
width: 100%;
z-index: 10;
border-bottom: 1px solid black;
}
nav{
margin-top: 35px;
text-align: center;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin-right: 30px;
}
nav ul li:last{
margin-right: 0px;
}
/* Background slide */
h1.title_desc{
top: 160px;
font-size: 70px;
}
section{
height: 510px;
width: 100%;
z-index: 5;
background-color: white;
padding: 0px;
margin: 0px;
}
.background-fixed{
position: fixed;
top: 90px;
z-index: -2;
background-color: blue;
text-align: center;
}
/* Slide over bottom slide */
.description_slide{
background: transparent url('../imgs/trans.png') repeat;
color: white;
z-index: 0;
opacity: 1;
text-align: center;
}
.description_slide > h2{
top: 200px;
position: relative;
}
/* Rest of the slides */
/* Featured work */
/* Footer */
footer{
background-color: black;
color: white;
height: 100px;
}
h1 {
margin-top: 0px;
}