zig zag Archives - Lena Design

How to create a responsive zig zag layout?

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!