Item: A Pen by Greg J Bales
Rating: 3.4
Author: -Infamous

0 Downloads
24 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Greg J Bales</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <div class="container-fluid main-wrap">
  <div class="row step-wrap">
    <div class="step-contain">
      <div class="step-img"></div>
      <div class="step-spacer"></div>
      <div class="step-text"></div>
    </div>
  </div>
  <div class="row step-wrap">
    <div class="step-contain">
      <div class="step-text"></div>
      <div class="step-spacer"></div>
      <div class="step-img"></div>      
    </div>
  </div>
  <div class="row step-wrap">
    <div class="step-contain">
      <div class="step-img"></div>
      <div class="step-spacer"></div>
      <div class="step-text"></div>
    </div>
  </div>
  <div class="row step-wrap">
    <div class="step-contain">
      <div class="step-text"></div>
      <div class="step-spacer"></div>
      <div class="step-img"></div>      
    </div>
  </div>  
</div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/-Infamous/a-pen-by-greg-j-bales-NMBPyM */
.main-wrap {
  background-color: #283593;
}

.step-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3f51b5;
  margin-top: 30px;
}

.step-contain {
  display: flex;
  width: 750px;
}

.step-img {
  width: 150px;
  height: 150px;
  background-color: #03a9f4;
}

.step-text {
  width: 500px;
  background-color: #4caf50;
}

.step-spacer {
  width: 100px;
}

/* mobile */

@media (max-width: 768px) {
  .step-contain {
    display: block;
    height: 300px;
    background-color: #607d8b;
  }
  
  .step-img {
    width: 750px;
  }
  
  .step-text {
    width: 750px;
  }
  
  step-spacer {
    width: 0px;
  }
}

Comments

More from -Infamous

A Pen by Greg J Bales

Technologies

Comments

More from -Infamous

A Pen by Greg J Bales

A Pen by Greg J Bales

A Pen by Greg J Bales

get a string after a specific character js

You Might Also Like

FreeCodeCamp Camper Leaderboard 2

#Codevember - Dynamic Article Timeline (ES6)

Flexbox - "fixed" withs

mixins

A Pen by alphadec

Performance Budget Builder

A Pen by Irene Lakhno

Responsive Homepage With Animated Intro