Responsive Skewed Text with Images

Developer
Retrofuturistic
Size
2,197 Kb
Views
6,072
  1. Responsive Skewed Text with Images Previews
  2. Responsive Skewed Text with Images HTML Codes
  3. Responsive Skewed Text with Images CSS Codes

How do I make an responsive skewed text with images?

Skewed Text Element remains pinned to the left while a series of images sit flush to the right. The images can resize while the text stays stationary. Until small size, when the image area is pushed below the text.. What is a responsive skewed text with images? How do you make a responsive skewed text with images? This script and codes were developed by Retrofuturistic on 19 January 2023, Thursday.

Responsive Skewed Text with Images Previews
IQ Test

Responsive Skewed Text with Images - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Skewed Text with Images</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="intro"> <div class="introContainer"> <p>Deep v meh wolf readymade sartorial, narwhal hoodie next level salvia banh mi. &#10095;&#10095;</p> </div> </div> <div class="imgContainer"> <img src="https://futureofwebdesign.com/new-york-2011/images/content/logo_salesforce.png"> <img src="https://futureofwebdesign.com/new-york-2011/images/content/logo_salesforce.png"> <img src="https://futureofwebdesign.com/new-york-2011/images/content/logo_salesforce.png"> </div> </div>
</body>
</html>

Responsive Skewed Text with Images - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,300,600);
body { font-family: 'Raleway', sans-serif; color:#ffffff;
}
p { line-height:25px;
}
.row { position:relative; width:100%; min-heigth:100px; margin:auto; background-color: #43484c; overflow:hidden;
}
.intro { position:absolute; left:-200px; width:400px; height:1000px; background-color: #34383b; -webkit-transform: skewx(-22deg);
}
.introContainer { padding-top:35px; padding-left:55px; padding-right:60px; -webkit-transform: skewx(22deg);
}
.imgContainer { position:relative; width: calc(100% - 450px); left:420px; height:180px; line-height:180px;
}
.imgContainer img { position:relative; width:32%; max-width:275px; vertical-align:middle;
}
@media only screen and (max-width: 768px) and (min-device-width : 531px) { .intro { left: -300px; } .introContainer { padding-left:145px; padding-right:23px; } .imgContainer { width: calc(100% - 280px); left: 280px; }
}
@media only screen and (max-width: 530px) {
.intro { position:relative; padding:40px 0 50px; left:auto; width:100%; height:auto; -webkit-transform: translatey(-70px) skewy(11deg);
}
.introContainer { padding-left:20px; -webkit-transform: skewy(-11deg);
} .imgContainer { position:relative; width: 100%; height: auto; left:0px; } .imgContainer img { display:block; margin:20px auto; width:auto; }
}
Responsive Skewed Text with Images - Script Codes
Responsive Skewed Text with Images - Script Codes
Home Page Home
Developer Retrofuturistic
Username retrofuturistic
Uploaded January 19, 2023
Rating 3
Size 2,197 Kb
Views 6,072
Do you need developer help for Responsive Skewed Text with Images?

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
Newton Balls Loading Animation
CSS Multicolor Trefoil
Expandable Left Side Bar with jQuery animate
A Pen by retrofuturistic
Dynamically Generated Country List
Box Shadow Effects
Country List with Pagination
Nonresponsive Cards
Responsive Horizontally Centered Cards
Slide Toggle Menu
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!