Landing Page 3 columns oblique

Developer
Kévin Joffard
Size
3,251 Kb
Views
10,120
  1. Landing Page 3 columns oblique Previews
  2. Landing Page 3 columns oblique HTML Codes
  3. Landing Page 3 columns oblique CSS Codes
  4. Landing Page 3 columns oblique JS Codes

How do I make an landing page 3 columns oblique?

What is a landing page 3 columns oblique? How do you make a landing page 3 columns oblique? This script and codes were developed by Kévin Joffard on 30 September 2022, Friday.

Landing Page 3 columns oblique Previews
IQ Test

Landing Page 3 columns oblique - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Landing Page 3 columns oblique</title> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="http://addtocalendar.com/atc/1.5/atc-style-blue.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> HUBSPOT FORM HERE<div class="container home"> <h1>The future of AEC begins here</h1> <p>Register to be part of the Revolution</p> <form action=""> <input type="email" /> </form> <span class="addtocalendar atc-style-blue"> <var class="atc_event"> <var class="atc_date_start">2017-06-01 2:00:00</var> <var class="atc_date_end">2017-06-01 4:00:00</var> <var class="atc_timezone">Europe/London</var> <var class="atc_title">Meeting avec Jimmy</var> <var class="atc_description">May the force be with you</var> <var class="atc_location">GLV</var> <var class="atc_organizer">Jimmy's Bot</var> <var class="atc_organizer_email">[email protected]</var> </var> </span>
</div>
<div class="container-main"> <div class="container container-details"> <h1></h1> <div class="container--left"> <h2>Header 2</h2> <div class="container-content"> <p>Lorem ipsum ecetera</p> </div> </div> <div class="container--center"> <h2>Header 2</h2> <div class="container-content"> <p>Lorem ipsum ecetera</p> </div> </div> <div class="container--right"> <h2>Header 2</h2> <div class="container-content"> <p>Lorem ipsum ecetera</p> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Landing Page 3 columns oblique - Script Codes CSS Codes

/*
=== GLOBAL
*/
* { margin: 0; padding: 0; font-size: 0
}
body, html { padding: 0; margin: 0; min-height: 100%; width: 100%;
}
.container { height: 100vh; width: 100%;
}
.home { background: url(https://www.finalcad.com/hubfs/LP%20May%202017/LP_bg-FC7.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 600px;
}
.container-details { width: 1320px; margin: 0 auto; height: 100%;
}
.container-main { background: #071D49;
}
h1 { font: 900 64px 'Titillium Web'; text-transform: uppercase; text-align: center; padding: 50px 0 100px 0; color: #FFF;
}
.home p { font: 24px 'Roboto'; color: #FFF; text-align: center; margin-bottom: 40px;
}
/*
=== Main Layer
*/
input { width: 200px; height: 46px; margin: 0 auto; display: Block; margin-bottom: 50px; font-size: 16px;
}
.addtocalendar { width: 240px; margin: 0 auto; text-align: center; display:block;
}
.atc-style-blue .atcb-link,
.atc-style-blue .atcb-link:hover,
.atc-style-blue .atcb-link:active, .atc-style-blue .atcb-link:focus { padding: 20px; font-family: "Roboto"; font-weight: 700; text-transform: uppercase; background: #FFC72C; box-shadow: 0 0; border-radius: 0;
}
.atc-style-blue .atcb-list { width: 240px; border: 0; box-shadow: 0 0;
}
.atc-style-blue .atcb-item.hover,
.atc-style-blue .atcb-item:hover { background: #FFC72C;
}
.atc-style-blue .atcb-item-link,
.atc-style-blue .atcb-item-link:hover, .atc-style-blue .atcb-item-link:active, .atc-style-blue .atcb-item-link:focus { color: #071D49; font: 16px "Roboto";
}
.container-details h2 { font: 900 40px 'Titillium Web'; color: #FFF; transform: skewX(25deg); text-align: center; opacity: 1;
}
.container-content p { font: 500 16px 'Roboto'; transform: skewX(25deg);
}
.container--left,
.container--center,
.container--right { opacity: 0.3; transition: opacity .5s ease; height: 460px; width: calc(100%/3); display: inline-block; margin: 0 auto; transform: skewX(-25deg); background: grey;
}
.container--left:hover,
.container--center:hover,
.container--right:hover { opacity: 1; background: #FFF;
}
.container--left:hover > h2,
.container--center:hover > h2,
.container--right:hover > h2 { color: #071D49;
}
.container-content { width: 320px; margin: 0 auto;
}
/*
=== Second Layer
*/
/*
=== MEDIA
*/
@media screen and (max-width: 1570px) { .container-details { width: 1000px; }
}
@media screen and (max-width: 1300px) { .container-details { width: 700px; }
}
@media screen and (max-width: 960px) { h1 { font-size: 44px; padding-bottom: 16px } .container-main { height: 100%; } .container--left, .container--center, .container--right { width: 100%; transform: skewX(0deg); margin-bottom: 16px; } .container-details h2, .container-details p { transform: skewX(0deg); }
}
@media screen and (max-width: 960px) { .container-details { width:100vw; }
}

Landing Page 3 columns oblique - Script Codes JS Codes

// ADD TO CALENDAR
(function () { if (window.addtocalendar)if(typeof window.addtocalendar.start == "function")return; if (window.ifaddtocalendar == undefined) { window.ifaddtocalendar = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript';s.charset = 'UTF-8';s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http')+'://addtocalendar.com/atc/1.5/atc.min.js'; var h = d[g]('body')[0];h.appendChild(s); }})();
Landing Page 3 columns oblique - Script Codes
Landing Page 3 columns oblique - Script Codes
Home Page Home
Developer Kévin Joffard
Username kejoff
Uploaded September 30, 2022
Rating 3
Size 3,251 Kb
Views 10,120
Do you need developer help for Landing Page 3 columns oblique?

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!

Kévin Joffard (kejoff) Script Codes
Name
Footer Grid
Footer new generation
Grid 2 columns test
Vertical Accordeon Menu
Product Page
Experimentation - Gmaps Colors
Aframe - Hello Metaverse Testing
Animation iFrame Google maps - Vanilla Javascript
Create amazing art & images 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!