Fun responsive split layout

Developer
Laura Moraiti
Size
3,484 Kb
Views
30,360
  1. Fun responsive split layout Previews
  2. Fun responsive split layout HTML Codes
  3. Fun responsive split layout CSS Codes

How do I make an fun responsive split layout?

A simple experiment with flexbox (that could easily be done only with table-cell), but hey :). What is a fun responsive split layout? How do you make a fun responsive split layout? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Fun responsive split layout Previews
IQ Test

Fun responsive split layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fun responsive split layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/http___codepen_io_fixie_p.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="no-flexbox flex-split color-right color-skyblue"> <div class="flex-split-left"> <div class="flex-split-full-img"> <img src="http://41.media.tumblr.com/c9a17134313b4726fa01cf310784b34a/tumblr_nwixusAewb1u60tx6o1_1280.jpg" alt="" /> </div> </div> <div class="flex-split-right flex-split-content"> <h2>This is a nice title</h2> <p>Writing random stuff to fill up this space and make a nice block of text</p> <a href="#" class="btn">Learn more</a> </div>
</div>
<div class="no-flexbox flexbox no-flexbox flex-split color-left color-pink"> <div class="flex-split-left flex-split-content"> <h2>This is a nice title</h2> <p>Writing random stuff to fill up this space and make a nice block of text</p> <a href="#" class="btn">Learn more</a> </div> <div class="flex-split-right"> <div class="flex-split-full-img"> <img src="http://40.media.tumblr.com/ae1bd193167c4f6bb2808d582fa5bc00/tumblr_nwixmqWfIw1u60tx6o1_1280.jpg" alt="" /> </div> </div>
</div>
<div class="flexbox no-flexbox flex-split color-right color-yellow"> <div class="flex-split-left"> <div class="flex-split-full-img"> <img src="http://41.media.tumblr.com/d08c71f89483821716115fb28838f393/tumblr_ntnm32eQ5E1u60tx6o1_1280.jpg" alt="" /> </div> </div> <div class="flex-split-right flex-split-content"> <h2>This is a nice title</h2> <p>Writing random stuff to fill up this space and make a nice block of text</p> <a href="#" class="btn">Learn more</a> </div>
</div>
</body>
</html>

Fun responsive split layout - Script Codes CSS Codes

img { display: block;
}
.no-flexbox.flex-split > div { width: 50%; display: table-cell; vertical-align: middle;
}
@media (max-width: 650px) { .no-flexbox.flex-split > div { width: 100%; display: block; }
}
.flexbox.flex-split { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
@media (max-width: 650px) { .flexbox.flex-split { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}
.flexbox.flex-split > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 50%;
}
@media (max-width: 650px) { .flexbox.flex-split > div { width: 100%; }
}
.flex-split > div h2,
.flex-split > div p { color: #fff; margin: 0 0 1rem 0; text-align: left;
}
.flex-split > div h2 { font-size: 2em;
}
@media (min-width: 875px) { .flex-split > div h2 { font-size: 3em; }
}
.flex-split > div .btn { background-color: #fff; text-transform: uppercase; line-height: 40px; width: 270px; border-radius: 2em; text-align: center; text-decoration: none; display: block;
}
@media (max-width: 650px) { .flex-split > div .btn { width: 100%; }
}
.flex-split-content { padding: 2em;
}
@media (max-width: 650px) { .flex-split-content { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
}
@media (min-width: 875px) { .flex-split-content { padding: 0 10em 0 4em; }
}
.flex-split-full-img { overflow: hidden; width: 100%;
}
.flex-split-full-img img { width: 100%;
}
.color-skyblue > div { background-color: #42C0D0;
}
.color-skyblue .btn { color: #42C0D0;
}
.color-yellow > div { background-color: #FBAE17;
}
.color-yellow .btn { color: #FBAE17;
}
.color-pink > div { background-color: #FF007F;
}
.color-pink .btn { color: #FF007F;
}
.color-right .flex-split-left .flex-split-full-img { border-top-right-radius: 3em; border-bottom-right-radius: 3em;
}
@media (max-width: 650px) { .color-right .flex-split-left .flex-split-full-img { border-top-right-radius: 0; }
}
.color-left .flex-split-right .flex-split-full-img { border-top-left-radius: 3em; border-bottom-left-radius: 3em;
}
@media (max-width: 650px) { .color-left .flex-split-right .flex-split-full-img { border-top-left-radius: 0; }
}
Fun responsive split layout - Script Codes
Fun responsive split layout - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 3,484 Kb
Views 30,360
Do you need developer help for Fun responsive split layout?

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!

Laura Moraiti (Fixie) Script Codes
Name
Easy hover effect for videos
A Pen by Laura Moraiti
Dynamic prefix, transition and transform SASS mixins
Striped background for a container with more than one element
Unconventional slideshow
Music equalizer bars with jQuery
Breadcrumb made with jQuery
Poll
Simple and clean form
Text and headings flow for a health site, on the making
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!