Flexbox Split Screen

Developer
Juwan Petty
Size
1,934 Kb
Views
24,288
  1. Flexbox Split Screen Previews
  2. Flexbox Split Screen HTML Codes
  3. Flexbox Split Screen CSS Codes

How do I make an flexbox split screen?

First installment in the Flexbox Adventure Series where we look into making and explaining how to use flexbox when you are coding your next website.. What is a flexbox split screen? How do you make a flexbox split screen? This script and codes were developed by Juwan Petty on 12 October 2022, Wednesday.

Flexbox Split Screen Previews
IQ Test

Flexbox Split Screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Split Screen</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <h1>Flexbox Split Screen</h1>
</div>
<div class="container"> <div id="split_left" class="parent"> <div class="child">Left Content</div> </div> <div id="split_right" class="parent"> <div class="child">Right Content</div> </div>
</div>
</body>
</html>

Flexbox Split Screen - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Rubik');
* {-webkit-transition: 250ms;transition: 250ms;}
body { font-family: 'Rubik', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.header { margin: 50px 0;
}
.container { border: 5px solid #5856D6; border-radius: 5px; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.parent { border: 5px solid #4CD964; border-radius: 5px; padding: 20px; margin: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex;
}
.child { border-radius: 5px; padding: 50px; margin: 5px; background: #007AFF; color: white; text-align: center; font-weight: 600; font-size: 75%;
}
Flexbox Split Screen - Script Codes
Flexbox Split Screen - Script Codes
Home Page Home
Developer Juwan Petty
Username juwanpetty
Uploaded October 12, 2022
Rating 3
Size 1,934 Kb
Views 24,288
Do you need developer help for Flexbox Split Screen?

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!

Juwan Petty (juwanpetty) Script Codes
Name
SVG Background on Scroll
Simple Navigation Bar
Toggle Buttton
Udacity Button Style
Animated Random Phrase
Flexbox Card Layout
A Fun Little Button
Subtle Parallax on Entrance
A CSS Menu Toggle using jQuery
A Pen by Juwan Petty
Create amazing web content 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!