Stack Formation

by Muhammad Hassaan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--
The Right side content should be in between the image borders.
-->
<div class="midpage-content">
    	  <div class="container">
        	<div class="row">
            	
                <div class="conOuter">
                    <div class="col-sm-5 col-xs-8 midpage-outer align-left">
                        <div class="midpage-img"> <img src="http://via.placeholder.com/458x307" alt="#" class="img-responsive"> </div>
                    </div>
                    <div class="col-sm-7 col-xs-12 satellite-content">
                        <div class="midpage-inner">
                            <h3>Get Satellite – Accept NO Limits </h3>
                            <h4>Enjoy TV, Internet &amp; Phone Services EVERYWHERE</h4>
                            <p>Wired connections always come equipped with a deal-breaking handicap: their service coverage is often limited (by territory). Bridgevine, having partnered with several leading Satellite service providers in the country, alleviates all of that hassle for its valued subscribers – by offering them access to uninterrupted (digital) transmission signals irrespective of their locations.</p>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="conOuter">
                    <div class="col-sm-5 col-xs-8 midpage-outer align-right">
                        <div class="midpage-img"><img src="http://via.placeholder.com/458x307" alt="#" class="img-responsive"></div>
                    </div>
                    <div class="col-sm-7 col-xs-12 satellite-content">
                        <div class="midpage-inner">
                           ...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

:root { 
--black: #000;
--white: #fff;
--red: #b00;
}

::-moz-selection { background: var(--red); color:var(--white);}
::selection { background: var(--red); color:var(--white);}

/* Chrome/Opera/Safari */
::-webkit-input-placeholder { color: #fff; }
/* Firefox 19+ */
::-moz-placeholder { color: #fff; }
/* IE 10+ */
:-ms-input-placeholder { color: #fff;}
/* Firefox 18- */
:-moz-placeholder { color: #fff;}

body{ font-family: 'Roboto', sans-serif; }
p{ margin:0}
h1{ font-family: 'Raleway', sans-serif; font-size: 72px; color: var(--white); line-height: 70px; font-weight:800; margin:0; }
h1 span{ display:block; font-weight:100; margin:0; }
h2{ font-size: 48px; font-weight: 800; line-height: 60px; margin:0; }
h3{ font-size: 30px; font-weight: 500; line-height: 30px; margin:0; color:#434343; margin:0 0 10px;}
h4{ font-size: 18px; margin:0; font-weight:500; line-height:22px; margin:0 0 10px;}
h5{ font-size: 16px; margin:0; }

/* ============== 
* Mid Page Content Style
* =========== */

.midpage-content{ padding:60px 0}

.conOuter{ position:relative; padding: 0 0 65px; margin: 0 0 45px;}
.conOuter:last-child{ margin:0}

.midpage-outer { transform: scale(1.2);}
.midpage-outer.align-left{ left:45px; float: left;}
.midpage-outer.align-right{ right:45px; float: right; }

.midpage-img{ position:relative;}
.midpage-img:before{ content:''; display:block; border:2px solid #fff; position:absolute; top:22px; left:22px; height:calc(100% - 44px); width:calc(100% - 44px);}

.midpage-inner{ background: #f6f6f6;padding: 45px 40px;}
.midpage-inner h4{ color:var(--red);}
.midpage-inner p{ font-size:16px; line-height:24px; margin:0 0 18px;}
.midpage-inner p:last-child{ margin:0}