Skew bg mainpage

Developer
Kenz
Size
2,930 Kb
Views
4,048
  1. Skew bg mainpage Previews
  2. Skew bg mainpage HTML Codes
  3. Skew bg mainpage CSS Codes

How do I make an skew bg mainpage?

What is a skew bg mainpage? How do you make a skew bg mainpage? This script and codes were developed by Kenz on 26 January 2023, Thursday.

Skew bg mainpage Previews
IQ Test

Skew bg mainpage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>skew bg mainpage</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body{width:100%;height:100%;}
*,*:before,*:after{box-sizing:border-box;}
.section{ position:relative; overflow:hidden; height:100%; padding:0 15%;
background: linear-gradient(to right, #c7172b 0%,#ea8944 100%);
}
.skew2 { backface-visibility: hidden; transform: skew(-16deg, 0); overflow: hidden; display: block; width:25%; height:100%; position:absolute; float:right; right:-5%; border-width:1px; border-style:solid; transition: all 0.3s; cursor:pointer; opacity:0.9; box-shadow:0 0 18px -18px #000;
}
.skew { backface-visibility: hidden; transform: skew(16deg, 0); overflow: hidden; display: block; width:25%; left:-5%; height:100%; position:absolute; float:left; border-width:1px;
}
.skew + .skew{margin-left:-1px;}
.skew:nth-child(1){background-color:#1d71b9 ;color:#1d71b9}
.skew2:nth-child(2){background-color:#c7172b;color:#c7172b}
.skew:nth-child(3){background-color:#f7b84e;color:#f7b84e}
.skew:nth-child(4){background-color:#1cb78d;color:#1cb78d}
.section.active .skew{width:20%}
.section.active:not(.open) .skew:hover{ width:40%; opacity:1; box-shadow:0px 0px 18px -4px #000; z-index:99;
}
.section.open .skew{width:1%}
.section.open .skew:not(.open) > .straight{pointer-events:none;}
.section.open .skew.open{ width:97%; opacity:1; box-shadow:0px 0px 18px -4px #000; z-index:99;
}
.straight{ position:absolute; color:#fff; font-family:courier; text-shadow:0 0px 1px #000; transform: translate(-50%, -50%) skew(16deg,0); display:inline-block; top:50%; left:50%; transition: transform 0.2s, opacity 0.4s; z-index:10;
}
/*noisy background image*/
.noise:before{ position:absolute; z-index:0; content:""; top:0;left:0; bottom:0;right:0; background-image:url();} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="section noise row"> <div class="skew noise col-sm-4"> <span class="straight">Marketers</span> </div> <div class="skew noise col-sm-4"> <span class="straight">Marketers</span> </div> <div class="skew2 noise col-sm-4"> <span class="straight">Designers</span> </div>
</section>
</body>
</html>

Skew bg mainpage - Script Codes CSS Codes

html, body{width:100%;height:100%;}
*,*:before,*:after{box-sizing:border-box;}
.section{ position:relative; overflow:hidden; height:100%; padding:0 15%;
background: linear-gradient(to right, #c7172b 0%,#ea8944 100%);
}
.skew2 { backface-visibility: hidden; transform: skew(-16deg, 0); overflow: hidden; display: block; width:25%; height:100%; position:absolute; float:right; right:-5%; border-width:1px; border-style:solid; transition: all 0.3s; cursor:pointer; opacity:0.9; box-shadow:0 0 18px -18px #000;
}
.skew { backface-visibility: hidden; transform: skew(16deg, 0); overflow: hidden; display: block; width:25%; left:-5%; height:100%; position:absolute; float:left; border-width:1px;
}
.skew + .skew{margin-left:-1px;}
.skew:nth-child(1){background-color:#1d71b9 ;color:#1d71b9}
.skew2:nth-child(2){background-color:#c7172b;color:#c7172b}
.skew:nth-child(3){background-color:#f7b84e;color:#f7b84e}
.skew:nth-child(4){background-color:#1cb78d;color:#1cb78d}
.section.active .skew{width:20%}
.section.active:not(.open) .skew:hover{ width:40%; opacity:1; box-shadow:0px 0px 18px -4px #000; z-index:99;
}
.section.open .skew{width:1%}
.section.open .skew:not(.open) > .straight{pointer-events:none;}
.section.open .skew.open{ width:97%; opacity:1; box-shadow:0px 0px 18px -4px #000; z-index:99;
}
.straight{ position:absolute; color:#fff; font-family:courier; text-shadow:0 0px 1px #000; transform: translate(-50%, -50%) skew(16deg,0); display:inline-block; top:50%; left:50%; transition: transform 0.2s, opacity 0.4s; z-index:10;
}
/*noisy background image*/
.noise:before{ position:absolute; z-index:0; content:""; top:0;left:0; bottom:0;right:0; background-image:url();}
Skew bg mainpage - Script Codes
Skew bg mainpage - Script Codes
Home Page Home
Developer Kenz
Username Ken88
Uploaded January 26, 2023
Rating 3
Size 2,930 Kb
Views 4,048
Do you need developer help for Skew bg mainpage?

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!

Kenz (Ken88) Script Codes
Name
A Pen by Kenz
Navigation
Bootstrap
Pop Up
The new WEbsite
Create amazing video scripts 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!