<!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;
}
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
