Slanted Div, Fixed Header

Developer
Andrew Bales
Size
3,455 Kb
Views
82,984
  1. Slanted Div, Fixed Header Previews
  2. Slanted Div, Fixed Header HTML Codes
  3. Slanted Div, Fixed Header CSS Codes
  4. Slanted Div, Fixed Header JS Codes

How do I make an slanted div, fixed header?

Skewed divs and parallax effect created by fixed header. Simple layout and instructions for modification in the JS!. What is a slanted div, fixed header? How do you make a slanted div, fixed header? This script and codes were developed by Andrew Bales on 03 October 2022, Monday.

Slanted Div, Fixed Header Previews
IQ Test

Slanted Div, Fixed Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slanted Div, Fixed Header</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="blue-bg"></div>
<div class="white-bg shadow"></div>
<div class="content"> <h1>Slanted & Enchanted</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna ex, elementum id convallis eu, elementum id justo. Maecenas dictum sagittis leo, ut ultrices risus mollis vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lectus felis. Vivamus eget velit erat. Vivamus condimentum augue sed lacus viverra imperdiet. Etiam quis lectus non libero hendrerit porta. In sit amet molestie lacus. Praesent ultricies, lectus eget porta porttitor, sem sapien facilisis arcu, eu tincidunt nulla odio ac ipsu.</p> <p>Praesent eu arcu convallis, faucibus turpis eu, rutrum nisi. Integer rutrum ipsum at aliquam consequat. In dignissim lorem nibh, nec iaculis est fermentum vitae. Maecenas sodales, nunc eget lacinia volutpat, nibh mi lobortis leo, id varius urna tellus ut magna. Sed porttitor nunc et luctus efficitur. Nam sit amet congue nulla. Praesent dapibus erat arcu, at scelerisque arcu faucibus vel. Morbi blandit venenatis elit. Nam feugiat bibendum suscipit. Donec viverra eu lorem eu venenatis. Nullam posuere nulla id libero rutrum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam molestie ac velit vel blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Slanted Div, Fixed Header - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
h1 { font-family: "Montserrat", sans-serif;
}
p { font-family: "Open Sans", sans-serif; text-align: justify;
}
.blue-bg { position: fixed; background: url(https://www.mangoafricansafaris.com/sites/www.mangoafricansafaris.com/files/styles/original/public/gallery/chumbe_bungallow_and_forest_overview_oskar_henriksson.jpg?itok=UXkgUC5y); background-size: cover; background-color: #58aff6; top: 0; height: 400px; width: 100vw; z-index: -1;
}
.white-bg { position: absolute; top: 0; background-color: #fff; min-height: 500px; margin: 210px 0px; width: 100vw; height: 100vh; -webkit-transform: skewY(5deg); transform: skewY(5deg); z-index: -1;
}
.content { position: absolute; top: 0; margin: 250px 10vw; max-width: 60vw; background-color: #fff;
}
.shadow { box-shadow: -2px -5px 5px 0px rgba(0, 0, 0, 0.3);
}

Slanted Div, Fixed Header - Script Codes JS Codes

/*-- Notes:
Header IMG: Change image by swapping out url in .blue-bg Make solid color by removing 'background' properties
Slant angle: Modify skewY degree in .white-bg
Top distance: Slant distance from top = margin in .white-bg Text distance from top = margin in .content
Fixed Header: 'turn off' with "position: absolute" in .blue-bg
--*/
Slanted Div, Fixed Header - Script Codes
Slanted Div, Fixed Header - Script Codes
Home Page Home
Developer Andrew Bales
Username agbales
Uploaded October 03, 2022
Rating 4.5
Size 3,455 Kb
Views 82,984
Do you need developer help for Slanted Div, Fixed Header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andrew Bales (agbales) Script Codes
Name
Daily Show Guest Stats
Polo, the flying squirrel
Cessna
Simon
Adopt Sweater Kitten
Video Portfolio
Jigsaw
Howie
ACRE Books
Open Weather Map API
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!