Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE HTML>
<html>
<head> 

<script src="https://kit.fontawesome.com/c711e910eb.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.5 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- Bootstrap JS Requirements -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  
</head>
  
  <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img class="logo" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-website-logo-img.png"/>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav ml-auto">
      <a class="nav-link active text-dark" href="#home">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link text-dark" href="#services">Services</a>
      <a class="nav-link text-dark" href="#products">Products</a>
      <a class="nav-link text-dark" href="#offers">Explore Deals & Offers</a>
      <a class="nav-link text-dark" href="#blogs">Trending Blogs</a>
    </div>
  </div>
</nav>  
       
         
         
  <div class="container" id="home">
    <div class="row">
      <div class="col-12">
   <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-carousel-1-sm-img.png" class="d-inline w-100 h-100 d-md-none" alt="...">
      <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-carousel-1-img.png" class="d-md-inline d-none w-100 h-100" alt="...">
    </div>
    <div class="carousel-item">
     
      <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-carousel-2-sm-img.png" class="d-inline w-100 h-100 d-md-none" alt="...">
      <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-carousel-2-img.png" class="d-md-inline d-none w-100 h-100" alt="...">
    
    </div>
    <div class="carousel-item">
      <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-carousel-3-sm-img.png" class="d-inline w-100 h-100 d-md-none" alt="...">
      <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-carousel-3-img.png" class="d-md-inline d-none w-100 h-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div></div></div></div>
  
    
<div class="services-container pt-5 pb-5" id="services">
  <div class="container">
    <div class="row">
     
      
      <div class="col-12">
        <h1 class="main-heading">Our Services</h1>
        <p class="services-para">
          Most online stores offer lower prices. Online shopping makes price comparison simpler and quicker. It is very convenient to shop from where you 
are located. It saves you the cost of driving to stores, as well as parking fees.
        </p>
      </div>
      
      <div class="col-12 col-md-4 text-center">
        <div class="shadow-lg pt-5 pb-5 mb-5">
        <img class="services-image" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-services-delivery-img.png"/>
        <h1 class="services-card-heading">Fast and Free Delivery</h1>
        <p class="services-card-para">
          Fast,free and convenient delivery choices on millions of items
        </p>
        </div>
      </div>
      
       <div class="col-12 col-md-4 text-center">
        <div class="shadow-lg pt-5 pb-5 mb-5">
        <img class="services-image" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-services-money-back-img.png"/>
        <h1 class="services-card-heading">100% Money back guarantee</h1>
        <p class="services-card-para">
          This is probably the most popular guarantee in the world.
        </p>
        </div>
      </div>
      
      <div class="col-12 col-md-4 text-center">
        <div class="shadow-lg pt-5 pb-5 mb-5">
        <img class="services-image" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-services-24-by-7-support-img.png"/>
        <h1 class="services-card-heading">Once Support 24/7</h1>
        <p class="services-card-para">
          Our Online Support will provide you with many useful functions, valuable information, tips.
        </p>
        </div>
      </div>
    
    </div></div>
    
    
  
  <div class="products-container pt-5 pb-5" id="products">
    <div class="container">
      <div class="row">
        
        <div class="col-12">
          <h1 class="main-heading">Our Products</h1>
        </div>
       
        <div class="col-12 col-md-6">
        <div class="product-image-1 mb-3 pt-5 pb-5 d-flex flex-column justify-content-end text-left pl-3">
          <h1 class="p-heading"> Smart<br/> Headphones </h1>
          <p class="p-para"> Headphones with Deep Bass,sound,touch... </p>
   
          <!-- Button trigger modal -->
<button type="button" class="p-button" data-toggle="modal" data-target="#exampleModal">
  View Details
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Sony WH-1000XM4 Noise Cancelling Headphones</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="modal-para">
          Get Best Smart Headphones Prices Online in India.
          Select from the best range of Headphones from the most popular brands..
        </p>
         <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Voice Assistants:</span>
           Alexa, Google Assistant & Siri
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Smart Listening:</span>
          Ambient sound with the best noise cancellation
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Long Battery Life:</span>
         A single charge provides 30 hours of playtime
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Quick Charging:</span>
         Charge for 10 Min for 5 hours play back
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Touch Controls:</span>
        Change the track with your fingertip
        </p>
        
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Buy Now</button>
      </div>
    </div>
  </div>
</div>
        </div>  
        </div>
        
        <div class="col-12 col-md-6">
        <div class="product-image-2 mb-3 pt-5 pb-5 d-flex flex-column justify-content-end text-left pl-3">
          <h1 class="p-heading"> Laptops </h1>
          <p class="p-para"> Explore vast selection of Laptops...</p>
    <!-- Button trigger modal -->
<button type="button" class="p-button" data-toggle="modal" data-target="#exampleModal1">
  View Details
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Inspiron 14 5490 core i5 Laptop</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"> 
        <p class="modal-para">
           Get Best Smart Headphones Prices Online in India.
          Select from the best range of Headphones from the most popular brands..
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Performance:</span>
           Core i5 3rd Gen, 2.6 Ghz, 4 GB RAM
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Storage:</span>
          500 GB HDD, SATA, 7200 RPM
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Battery:</span>
         Li-lon, 6 Cell
        </p>
        <p class="modal-para">
          <span style="color:#323f4b; font-weight:bold; font-size:13px;">Design:</span>
         14.0 Inches, 1366 X 768, 2.07 Kg, 34 MM Thick
        </p>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Buy Now</button>
       
      </div>
    </div>
  </div>
</div>
       
        </div>  
       </div>
      </div>
      
    <div class="d-flex flex-row justify-content-end">
      <button class="p-button0" style="font-weight:bold;">See All Offers<i class="fa-solid fa-arrow-right p-arrow"></i> </button>
    </div>
        
        </div>
       </div>

    
<div class="offers-container pt-5 pb-5">
  <div class="container">
   <div class="row">
     
     <div class="col-12 col-md-2 order-1 order-md-2 text-center text-md-center mr-5">
       <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-offers-special-img.png" class="offers-image"/>
     </div>
   
     
     <div class="col-12 col-md-4 order-3 order-md-1 text-center mb-3 ">
       <h1 class="offers-heading">BEST NEW YEAR SPECIAL OFFERS</h1>
       <p style="color:white; font-size:15px;">
         Best time to buy. Save upto <span style="font-style:italic; color:white; font-size:16px; font-weight:bold;">70% cash</span></p>
       <img class="offer-image" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-offers-credit-card-img.png"/>      
     </div>
     
    
     <div class= "col-12 col-md-4 order-2 order-md-3 text-center">
       <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-offers-appliances-img.png" class="offer-appliances"/>
     </div>
       
     </div></div></div>

  <div class="blog-container pt-5 pb-5" id="blogs">
   <div class="container">
     <div class="row">
      
       <div class="col-12">
         <h1 class="main-heading">Trending Blogs</h1>
       </div>
       
       <div class="col-12 col-md-6 mb-3">
         <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-1-img.png" class="w-100"/>
         
        <div class="shadow-lg p-3">
         <p class="blog-type">Fountain Pens</p>
         <h1 class="blog-heading">Guide to Fountain Pen Nibs</h1>
         <p class="blog-para">If you're having trouble with a fountain pen whether it's scratchy, too dry, or too wet...</p>
         <p class="blog-button">READ MORE<i class="fa-solid fa-arrow-right p-arrow"></i> </p>
       </div>
       </div>
         
       <div class="col-12 col-md-6 mb-3">
         <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-2-img.png" class="w-100"/>
         
         <div class="shadow-lg p-3">
         <p class="blog-type">Productivity</p>
         <h1 class="blog-heading">How to Craft a Better Todo List</h1>
         <p class="blog-para">A well-crafted Todo list acts as a guiding light for your day. It helps you overcome...</p>
         <p class="blog-button">READ MORE<i class="fa-solid fa-arrow-right p-arrow"></i> </p>
         </div>
       </div>
     </div></div></div>
  
  <div class="dealsoffers pt-5 pb-5" id="offers">
    <div class="container">
      <div class="row">
        
        <div class="col-12">
          <h1 class="main-heading">Explore Deals & Offers</h1>
        </div>
        
        <div class="col-12 col-md-6 col-lg-4 card0 shadow-lg" style="border-radius:20px;">
          <h1 class="heading0 text-center">Upto to 80% Off | Electronics & Gadgets</h1>
          
          
          <div class="d-flex flex-row justify-content-center"> 
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-mamba-watch-img.png" class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Smart Watch
           </h1>
          </div>
            
              
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-camera-img.png" class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Cameras
           </h1>
            </div>  
          </div>
    
   
       <div class="d-flex flex-row justify-content-center"> 
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-sport-and-fitness-img.png"  class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Sports & Fitness
           </h1>
          </div>
            
              
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-ear-phones-pink-img.png" class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Earphones
           </h1>
            </div>  
          </div>
         
          
          <a href="" class="blog-button">See All Details
            <i class="fa-solid fa-arrow-right p-arrow"></i> 
          </a>
        </div>
          
      
      
          <div class="col-12 col-md-6 col-lg-4 card0 shadow-lg mb-3 m-3" style="border-radius:20px;">
          <h1 class="heading0 text-center">Festive Offers TVs & appliances</h1>
          
          
          <div class="d-flex flex-row justify-content-center m-3 pt-3 pb-3"> 
          <div>
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-tv-img.png" class="explore-image"/>
          </div>
          </div>
            
        <a href="" class="blog-button">See All Details
            <i class="fa-solid fa-arrow-right p-arrow"></i> 
        </a>
        </div>
           
 
        
        
        
        <div class="col-12 col-md-6 col-lg-4 card0 shadow-lg mb-3" style="border-radius:20px;">
          <h1 class="heading0 text-center">Under Rs 4000 Friendly Accessories</h1>
          
          
          <div class="d-flex flex-row justify-content-center"> 
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-tablet-device-img.png" class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Tablet
           </h1>
          </div>
            
              
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-joy-stick-img.png" class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Playstation
           </h1>
            </div>  
          </div>
    
   
       <div class="d-flex flex-row justify-content-center"> 
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-speakers-big-img.png" class="mb-3 explore-images"/>
          <h1 class="deals-para">
            Speakers
           </h1>
          </div>
            
              
          <div class="text-center">
          <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-vr-set-img.png"  class="mb-3 explore-images"/>
            
           <h1 class="deals-para"> Virtual Reality Set
           </h1>
            </div>  
          </div>
         
          
          <a href="" class="blog-button">See All Details
            <i class="fa-solid fa-arrow-right p-arrow"></i> 
          </a>
        </div>
      </div>
    </div>
    
    <div class="contact-container pt-5 pb-5 d-flex flex-column justify-content-center text-center">
      <h1 class="contact-heading">
        Let us Join Together
      </h1>
      <div class"text-center">
      <button class="button">
               CONTACT US
      </button>
      </div></div>
    
      
 <div class="footer-bg pt-5 pb-5">
   <div class="container">
      <div class="row">
        
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
             <img class="logo" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-website-logo-img.png"/>
            
            <div class="d-flex flex-row justify-content-center">
             <div> <i class="fa-brands fa-google icon"></i> </div>
             <div> <i class="fa-brands fa-twitter icon"></i> </div>
             <div> <i class="fa-brands fa-instagram icon"></i> </div>
             <div> <i class="fa-brands fa-linkedin icon"></i> </div>
            </div>
            
            <h1 style="color:#ffffff; font-size:14px;">
              37, Ayur Vigyan Nagar, New Delhi, India.
            </h1>   
       </div></div>
  
        <div class="col-6 col-md-6 col-lg-3">
          <div class="text-left">
            <h1 class="footer-heading">
              Get to know us
            </h1>
            <p class="footer-para">
              About us <br/>
              Career   <br/>
              Press Releases <br/>
              Gift a smile 
            </p>
         </div></div>
        
        <div class="col-6 col-md-6 col-lg-3">
          <div class="text-left">
            <h1 class="footer-heading">
              Contact with Us
            </h1>
            <p class="footer-para">
              Facebook <br/>
              Twitter  <br/>
              Instagram  
            </p>
           </div></div>
        
        <div class="col-6 col-md-6 col-lg-3">
          <div class="text-left">
            <h1 class="footer-heading mb-3">
             Let Us Help You
            </h1>
          <p class="footer-para">
              100% Purchase Protection <br/>
              Your Account  <br/>
              Return Center <br/>
              Help 
            </p>
         </div></div>
            
         <div class="w-100">
            <hr class="hr-line"/>
        </div>
     </div>
    </div>  
     
     <div class="d-flex flex-row justify-content-center"> 
          <p class="footer-para">
            <span style="font-size:15px;">©</span>
            2022 by Aiswarya. Created with Bootstrap
          </p>
        </div>
        
     
      
     </div>
    </div>
   </div>

  
  </body>
</html>
      
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");


.logo{
  height:40px;
  width: 120px;
  background-size:cover;
}

.services-container{
  background-color:#ffffff;
  height:100vh;
  width:100vw;
}
.offers-container{
  background-image: linear-gradient(to right, #f49541, #dd5d97, #ad2167);
}

.offers-image{
  height:30vh;
}



.main-heading{
  color:#183b56;
  font-size: 30px;
  font-weight: bold;
  text-align: left;
}

.services-para{
  color:#616c7c;
  font-size: 15px;
  font-weight: normal;
  text-align: left;
}
.services-card-heading{
 color:#183b56;
  font-size: 17px; 
}

.services-card-para{
  color:#616c7c;
  font-size: 13px;
}

.services-image{
  height:60px;
  width:60px;
}

.products-container{
   background-color:#ffffff;
}


.product-image-1{
  height:100vh;
  background-image:url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-products-headphones-bg.png");
  background-size:cover;
  border-radius:10px;
}

.product-image-2{
  height:100vh;
  background-image:url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-products-laptops-bg.png");
  background-size:cover;
  border-radius:10px;
}

.p-heading{
  font-size:27px;
  font-weight:bold;
  color:white;
 }

.p-para{
  font-size:15px;
  color:white;
}

.p-button{
  background-color:#ffffff;
  color:#ff9f00;
  font-size:15px;
  border-radius:20px;
  border-width:0px;
  width:120px;
  height:35px;
}

.modal-para{
  color:#323f4b;
  font-size:13px;
}

.p-button0{
  background-color:#ffffff;
  color:#ff9f00;
  font-size:15px;
  border-radius:20px;
  border-width:0px;
  width:140px;
  height:35px;
}
.p-arrow{
  color:#ff9f00;
  font-size:15px;
  padding:5px;
}

.offers-image{
  height:40vh;
}

.offers-heading{
  color:#ad2167;
  font-size:22px;
  font-weight:bold;
  font-family:"bree serif";
}

.offer-credit{
  font-style:italic; 
  color:white; 
  font-weight:bold; 
  font-size:13px;
}

.offer-image{
  height:90px;
  width:250px;
}

.offer-appliances{
  height:300px;
  width:300px;
  padding-left:20px;
}

.blog-type{
  color:#959ead;
  font-size:12px;
}

.blog-heading{
 color:#183b56;
  font-size:21px;
  font-weight:bold;
  
}

.blog-para{
  color:#959ead;
  font-size:15px;
}

.blog-button{
  color:#ff9f00;
  font-size:14px;
  font-weight:bold;
}

.dealsoffers{
  height:100vh;
  width:100vw;
}

.heading0{
  color:#183b56;
  font-size:17px;
  font-weight:bold;
}

.card0{
background-color:#ffffff;
}

.deals-para{
 font-size:15px; 
 color:#183b56;
}

.explore-images{
  height:80px;
  width:100px;
  padding:3px;
  border-radius:15px;
}

.explore-image{
  height:300px;
  width:300px;
  padding:3px;
  border-radius:15px;
}

.contact-container{
  background-color:#f5f7fa;
  height:100vh;
  width:100vw;
}

.contact-heading{
  color:#183b56;
  font-size:40px;
  font-weight:bold;
}

.button{
  color:#ff9f00;
  border-color:#ff9f00;
  font-weight:bold;
  height: 40px;
  width: 130px;
}

.footer-bg{
 background-color:#183b56;
}

.icon{
  color:#5a7184;
  background-color:#152c3e;
  height:50px;
  width:50px;
  padding-top:15px;
  padding-bottom:25px;
  padding-left:18px;
  padding-right:20px;
  border-top-left-radius:120px;
  border-top-right-radius:120px;
  border-bottom-left-radius:120px;
  border-bottom-right-radius:120px;
  margin:5px;
}

.footer-heading{
  color:#959ead;
  font-size:17px;
  font-weight:bold;
}

.footer-para{
  color:#959ead;
  font-size:13px;
}

.hr-line{
 border-color:#959ead;
 font-weight:bold;
}
              
            
!

JS

              
                
              
            
!
999px

Console