Responsive Split-Screen Layout HTML & CSS3 | XO PIXEL

Responsive Split-Screen Layout HTML & CSS3 | XO PIXEL


Hey, Pixels! This week, I’ll be showing you
how to create this split screen layout that also features a cool zoom-out animation with
CSS3. A creative spin on the trendy split screen layout. This responsive layout is made
with the latest flexbox techniques and simple CSS3 animation. Be sure to visit my website xopixel.com and
read the article, interact with a live demo, and download the source files for this tutorial.
Now, let’s jump right in! To begin, we’re going to use the section tag
as the container for all the following elements. Then, we’re going to create two divs for both
the left and right sides that will make up the split-screen layout. Finally, we’re going
to use the article tag to contain the headings. First, we’re going to make the layout full
height using the declaration height:100% to the HTML, body and section tags. We’re also
going to make all the text on the page white, and align all the text to the center. Now, we need to create the flexbox layout
by applying the display: flex declaration to entire container, and then to the div of
both sides of the split layout. The properties applied to the div tag are self-explanatory,
they set the direction of the flex into a column (so it’s vertical) and then it justifies
the content to the center (vertically from the top). We’re also going to apply flex:1
to the div classes. Now, we’re going to apply this really cool
CSS3 animation using the transform: scale declaration. This is going to apply the “zoom-out”
effect. Finally, we’re just going to style the heading
text and the buttons. If you want more info on how to style buttons and maybe even add
icons to the buttons, read the article on my blog—the link will be in the description
box below. That’s it! You’ve just coded a Responsive
Split-Screen Layout with CSS3. Give this video a big thumbs up if you liked it. Subscribe
to xopixel for more great coding videos just like this one. As always, I’ll see you in
next weeks video!


9 thoughts on “Responsive Split-Screen Layout HTML & CSS3 | XO PIXEL

  1. Enjoy this week's tutorial! Be sure to read the related blog post for all the code and source files: http://wp.me/p4GIAq-1D6

  2. Hello, I'm a new subscriber and enjoy your tutorials; It's very easy to follow. I was wondering if you can teach us beginners how to use animations on web design. This will be much appreciated. Good job and keep it going.
    Best regards,

  3. Hi,
    I was on the site but didn't really see a tutorial for smooth scrolling. if you have one can you put up the link?

  4. Great job! I needed to do a complete change to my login page and this helped me to get 90% of what I was looking for(I just removed the hover on the left and right sides)

Leave a Reply

Your email address will not be published. Required fields are marked *