Stripe Header Grid

Developer
Simon Codrington
Size
4,140 Kb
Views
36,432
  1. Stripe Header Grid Previews
  2. Stripe Header Grid HTML Codes
  3. Stripe Header Grid CSS Codes

How do I make an stripe header grid?

What is a stripe header grid? How do you make a stripe header grid? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Stripe Header Grid Previews
IQ Test

Stripe Header Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stripe Header Grid</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="header-banner"> <div class="stripe-grid blue"> <div class="stripe zero"></div> <div class="stripe first"></div> <div class="stripe second"></div> <div class="stripe third"></div> <div class="stripe fourth"></div> </div> <div class="content-wrap row cf"> <section class="content"> <h1 class="hero-title"><span>Stripe Fancy Grid</h1> <p class="hero-subtitle">Here we can see how using several layers with gradients and transforms can give an awesome looking effect to our layouts.</p> <div class="button-group"> <a href="#"> <div class="button primary-button">Primary Action</div> </a> <a href="#"> <div class="button secondary-button">Secondary Action</div> </a> </div> </section> <!-- https://beyond.dev.elevate360.com.au/wp-content/uploads/2017/02/brain.png --> <section class="image"><img src="https://image.ibb.co/b598MQ/Git_Icon_White.png"></section> </div>
</section>
<section class="main-content row"> <h2>Secondary Title Here</h2> <p>Here we have secondary content for the page, we outline some content along with other stuff and things. Here's some lorem ipsum</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere lorem et commodo sollicitudin. Donec viverra mattis dolor. Fusce eu tincidunt ex. Mauris id orci volutpat, ultrices ligula porttitor, hendrerit odio. </p> <p>Sed quis ligula porta, posuere nibh et, lobortis leo. Curabitur eros justo, molestie id sapien eu, molestie tempor sem. Vestibulum pretium laoreet scelerisque. Praesent eget purus facilisis, posuere mauris vitae, bibendum mauris. Sed rhoncus, elit in tempor pulvinar.</p>
</section>
<section class="footer"> <div class="row"> <p>Copyright goes here</p> </div>
</section>
</body>
</html>

Stripe Header Grid - Script Codes CSS Codes

body { padding: 0px;
}
.row { position: relative; max-width: 1024px; margin: auto; padding-left: 15px; padding-right: 15px;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}
.header-banner { position: relative; padding-top: 0px;
}
.header-banner .stripe-grid { position: absolute; top: 0px; left: 0%; width: 100%; height: 100%; transform: skewY(-11deg);
}
.header-banner .stripe-grid:after { position: absolute; width: 100%; height: 1px; background-color: #fff; bottom: -1px; content: ''; left: 0%;
}
.header-banner .stripe-grid .stripe { position: absolute; height: 22%; width: 100%;
}
.header-banner .stripe-grid .stripe.zero { top: -50%; height: 50%;
}
.header-banner .stripe-grid .stripe.first { width: 75%; left: 0%;
}
.header-banner .stripe-grid .stripe.second { right: 0%; width: 25%; top: 25%;
}
.header-banner .stripe-grid .stripe.third { bottom: 0%; width: 50%; right: 0px;
}
.header-banner .stripe-grid .stripe.fourth { bottom: 0%; width: 50%; left: 0%;
}
.header-banner .stripe-grid.blue { background: #00c5d7;
}
.header-banner .stripe-grid.blue .zero { background-color: #00c5d7;
}
.header-banner .stripe-grid.blue .first { background-color: #00c5d7; background: linear-gradient(90deg, #1ADFF1, #00c5d7);
}
.header-banner .stripe-grid.blue .second { background-color: #00c5d7; background: linear-gradient(90deg, #00c5d7, #7aecf7);
}
.header-banner .stripe-grid.blue .third { background-color: #00c5d7; background: linear-gradient(90deg, #00c5d7, #009dab);
}
.header-banner .stripe-grid.blue .fourth { background-color: #eeeeee; background: linear-gradient(90deg, #eeeeee, #f6f9fc);
}
.header-banner .content-wrap { position: relative; padding-top: 50px; padding-bottom: 50px;
}
.header-banner .content-wrap .content { float: left; width: 65%;
}
.header-banner .content-wrap .content .hero-title { font-size: 2.8rem; margin-bottom: 1.9rem; color: #fff;
}
.header-banner .content-wrap .content .hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; color: #eee;
}
.header-banner .content-wrap .content .button-group { margin-bottom: 10px;
}
.header-banner .content-wrap .content .button { float: left; margin-right: 15px; padding: 10px 17px; background: #2c3e50; color: #fff; transition: all 220ms ease-out;
}
.header-banner .content-wrap .content .button:focus { background: #34495e;
}
.header-banner .content-wrap .image { float: left; width: 35%; padding: 0px 10px;
}
.header-banner .content-wrap .image img { max-width: 100%; height: auto;
}
.main-content { padding-bottom: 60px;
}
.main-content h2 { margin-bottom: 30px;
}
.footer { background-color: #2c3e50; padding-top: 15px; padding-bottom: 15px; color: #fff;
}
.footer p { margin-bottom: 0px;
}
@media screen and (max-width: 768px) { .header-banner .content-wrap .image { display: none; border: solid 1px red; } .header-banner .content-wrap .content { width: 100%; }
}
Stripe Header Grid - Script Codes
Stripe Header Grid - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 4,140 Kb
Views 36,432
Do you need developer help for Stripe Header Grid?

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!

Simon Codrington (simoncodrington) Script Codes
Name
Foundation 6 - Flex Grid
Foundation 6 - Motion UI
Mobile Navigation Menus - Menu slide from left
CSS Snap Scroll Points - Full Screen Scroller
CSS animations on scroll - Fade from bottom up
Video API Interactive Showcase
Fancy Card Animation
Animated border lines on hover
Foundation 6 Interchange
CSS Pulsating Sonar
Create amazing sales emails 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!