September 27, 2021

Bootstrap Snippets Process steps using HTML

<h2 class="text-center p-3">Our Process</h2>
       <div class="container p-4">
           <div class="row">
               <div class="offset-md-3 col-md-6">
                    <div class="left-box">
                        <h2>Planning</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
                    </div>
                    <div class="right-box"><img src="flow-chart.png" alt=""></div>
               </div>
               <div class="process"><img src="process.png" alt=""></div>
           </div>
           <div class="row">
                   <div class="offset-md-3 col-md-6">
                           <div class="right-box"><img src="briefing.png" alt=""></div>
                        <div class="left-box">
                            <h2>Design </h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
                        </div>
                        
                   </div>
                   <div class="process"><img src="process.png" alt=""></div>
               </div>
               <div class="row">
                       <div class="offset-md-3 col-md-6">
                            <div class="left-box">
                                <h2>Development</h2>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
                            </div>
                            <div class="right-box"><img src="coding.png" alt=""></div>
                       </div>
                       <div class="process"><img src="process.png" alt=""></div>
                   </div>
                   <div class="row">
                           <div class="offset-md-3 col-md-6">
                                   <div class="right-box"><img src="checklist.png" alt=""></div>
                                <div class="left-box">
                                    <h2>Testing</h2>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
                                </div>
                                
                           </div>
                            
                       </div>
               
       </div>

 

.left-box { width:45%; float: left;}
       .right-box { width:50%; margin-left: 5%; float: left;}
       .process { text-align: center; margin: auto;}
       .left-box h2 { color: #03a9f4}

 

Leave a Reply

Your email address will not be published. Required fields are marked *