
To create the CSS responsive zig zag layout follow the steps below:
Demo:
Step1.
Add HTML
<div class="content-container" style="background-color: #cbaba6;">
<div class="col-container">
<div class="column-one">
<h1 class="xl-font"><b>HTML</b></h1>
<h1 class="l-font"><b>Gives content structure.</b></h1>
<button class="button">Learn HTML</button>
</div>
<div class="column-two">
<img src="https://lenadesign.org/wp-content/uploads/2021/04/Sequence-01.gif" width="335" height="471">
</div>
</div>
</div>
<div class="content-container" style="background-color: #945b5d;">
<div class="col-container">
<div class="column-two">
<img src="https://lenadesign.org/wp-content/uploads/2021/04/css.gif" alt="CSS" width="335" height="471">
</div>
<div class="column-one">
<h1 class="xl-font"><b>CSS</b></h1>
<h1 class="l-font"><b>Describes how HTML elements are displayed on the website.</b></h1>
<button class="button">Learn CSS</button>
</div>
</div>
</div>
<div class="content-container" style="background-color: #ebdbcb";>
<div class="col-container">
<div class="column-one">
<h1 class="xl-font"><b>JavaScript</b></h1>
<h1 class="l-font"><b>What can't do CSS, JavaScript does.</b></h1>
<button class="button">Learn JavaScript</button>
</div>
<div class="column-two">
<img src="https://lenadesign.org/wp-content/uploads/2021/04/js-corrected.gif" width="335" height="471" >
</div>
</div>
</div>
Step2.
Add CSS
* {
box-sizing:border-box;
}
body {
margin: 0;
font-family: tahoma;
}
.content-container {
padding: 75px;
}
.col-container:after {
content: "";
display: table;
clear: both;
}
.column-one {
float: left;
width: 66.66666%;
padding: 25px;
}
.column-two {
float: left;
width: 33.33333%;
padding: 25px;
}
.l-font {
font-size: 45px;
color: #03071e;
}
.xl-font {
font-size: 65px;
color: #03071e;
}
.button {
border: 5px solid #03071e;
background-color: transparent;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
color: #03071e;
font-weight: bold;
transition: .2s;
}
.button:hover {
background-color: #03071e;
color: white;
}
img {
display: block;
height: auto;
max-width: 100%;
}
Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):
@media screen and (max-width: 800px) {
.column-one,
.column-two {
width: 100%;
text-align: center;
}
img {
margin: auto;
}
}
Enjoy coding!
Read also:
How to create equal height columns with CSS?