Responsive Skew

Developer
Retrofuturistic
Size
2,351 Kb
Views
4,048
  1. Responsive Skew Previews
  2. Responsive Skew HTML Codes
  3. Responsive Skew CSS Codes

How do I make an responsive skew?

Two column skewed elements that respond in tablet view by shifting from two column lateral layout to one column layout and change in skew angle.. What is a responsive skew? How do you make a responsive skew? This script and codes were developed by Retrofuturistic on 19 January 2023, Thursday.

Responsive Skew Previews
IQ Test

Responsive Skew - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Skew</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <section class="news"> <div class="newsContainer"> <h4>NEWS</h4> <h3>Deep v meh wolf readymade sartorial, narwhal hoodie next level salvia banh mi.</h3> <p>VHS Thundercats squid trust fund kitsch, Intelligentsia banh mi cray. Pitchfork +1 swag salvia, tote bag retro cray distillery. Kogi literally sustainable four loko ethical deep v Banksy single-origin coffee.</p> <a href="#">Learn More &#10095;&#10095;</a> </div> </section><section class="tweet"> <div class="tweetContainer"> <h4>TWITTER</h4> <h3>@Enterprise</h3> <p>VHS Thundercats squid trust fund kitsch, Intelligentsia banh mi cray. Pitchfork +1 swag salvia, tote bag retro cray distillery. Kogi literally sustainable four loko ethical deep v Banksy single-origin coffee.</p> <h4>Two Days Ago</h4> </div> </section>
</div>
</body>
</html>

Responsive Skew - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,300,600);
body { font-family: 'Raleway', sans-serif; font-size:15px; color:#ffffff;
}
h3 { font-size:25px; font-weight:300;
}
h4 { font-size:15px; line-height:25px; margin:0px; padding:0;
}
p { line-height:20px;
}
a { text-decoration:none; color:#ffffff;
}
.row { width:100%; box-sizing:border-box; overflow:hidden; /*border:1px solid black;*/
}
.row section { width:calc(50% + 90px); height:400px; margin:0; display:inline-block; padding:50px; box-sizing:border-box; -webkit-transform: skewx(22deg);
}
.row section div { -webkit-transform: skewx(-22deg);
}
.row .news { position:absolute; background-color:#67a49d; padding-left:130px; padding-right:80px; left:-90px; box-sizing:border-box;
}
.row .tweet { position:absolute; right:-90px; padding-left:80px; padding-right:130px; background-color: #548379; box-sizing:border-box;
}
@media only screen and (max-width: 768px) { .row { overflow:hidden; box-sizing:border-box; background-color: #548379; height:800px; } .row section { display:block; width:calc(100%); height:auto; } .row .news { position:relative; padding-left:5%; padding-right:5%; padding-bottom:250px; left:auto; -webkit-transform:translateY(-140px) skewy(11deg); } .row .news .newsContainer { -webkit-transform: translateY(140px) skewy(-11deg); } .row .tweet { position:relative; -webkit-transform:translateY(-140px) skewy(11deg); right:auto; padding-left:5%; padding-right:5%; padding-top:0px; padding-bottom:120px; } .row .tweet .tweetContainer{ -webkit-transform:translateY(0px) skewy(-11deg); }
}
Responsive Skew - Script Codes
Responsive Skew - Script Codes
Home Page Home
Developer Retrofuturistic
Username retrofuturistic
Uploaded January 19, 2023
Rating 3
Size 2,351 Kb
Views 4,048
Do you need developer help for Responsive Skew?

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!

Retrofuturistic (retrofuturistic) Script Codes
Name
Nonresponsive Cards
Newton Balls Loading Animation
Box Shadow Effects
Expandable Left Side Bar with jQuery animate
Responsive Skewed Text with Images
CSS-Centered Modal Window
A Pen by retrofuturistic
Expandable Left Sidebar
Inverted Border Radius Sidebar
CSS Multicolor Trefoil
Create amazing love letters 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!