My First Web Developent by Using HTML & CSS
Published: 2023-11-18 17:54:04


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5scw3oq0qeesjefch0yh.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8ji3w9ksxnlrh1nzm0l.png)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="movie_style.css">
    <link rel="stylesheet" href="mall.css">
    <title>Shopping Mall</title>
    
</head>
<body class="mybody"> 
    <div >
             <header class="myheader">
            <h1>Shopping Mall</h1>
        </header>

    <section>
        <center><h2>Welcome to our Mall!</h2>
            <p>Explore our diverse range of stores and find great deals.</p>
            <h3>Store Categories</h3>
        </center>
        
        <div>
            <div class="card">
                <img src="https://t3.ftcdn.net/jpg/06/28/78/46/240_F_628784631_scHW6WFmmxZjFfNGzI8KcF9sqMCJLEa5.jpg" alt="Avatar" style="width:100%">
                <div class="container">
                  <h4><b>Clothing</b></h4> 
                  <p>Men & Women</p> 
                </div> </div>
                         
                    <div class="card">
                            <img src="https://t3.ftcdn.net/jpg/06/37/89/18/240_F_637891805_dUfZ6w3Jlcr1y7XW7yAtx1vUT4HJEnMa.jpg" alt="Avatar" style="width:100%">
                          <div class="container">
                        <h4><b>Electronics</b></h4> 
                         <p> Mobile & Home Electronics</p> 
                     </div>
              </div>
                      
              <div class="card">
                <img src="https://t4.ftcdn.net/jpg/06/20/87/95/240_F_620879505_26cFQgtKKyHSNQlBf3dzPwRpYQQj1vMM.jpg" alt="Avatar" style="width:100%">
                <div class="container">
                  <h4><b>Books</b></h4> 
                  <p> Magzines & Novels</p> 
                </div>
            </div>
        </section>

    </div>
    
    <section id="clothing">
        <h2>Clothing Stores</h2>
        <p>Discover the latest fashion trends.</p>
      
        <div class="row">
            <div class="column">
              <div class="card1">
                <h3>Mens</h3>
                <p>hoodie</p>
                <p>Shirts & Pants</p>
              </div>
            </div>
          
            <div class="column">
              <div class="card1">
                <h3>Womens</h3>
                <p>Saree's</p>
                <p> casual dress</p>
              </div>
            </div>
            
            <div class="column">
              <div class="card1">
                <h3>Childrens</h3>
                <p>Theme Dress</p>
                <p>Schoolwares & Sportwares</p>
              </div>
            </div>
            
            <div class="column">
              <div class="card1">
                <h3>Home decors</h3>
                <p>Bedsheet</p>
                <p>curtans & wallhabgings</p>
              </div>
            </div>
          </div>
    </section>
    <center>
    <section id="electronics">
        <h2>Electronics Stores</h2>
        <p>Explore cutting-edge technology.</p>
        <ul>
            <li><a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM78v1cYsBkmayfIUX8aPFf_i-GGtL0BgLlg&usqp=CAU">Computers</a></li>
            <li><a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFPVrVjUchb2DwVIMveCD_iLajI9ScmEFk41S28Ao2TRI_PmR81iuiKnunBc0frxtQz0I&usqp=CAU">Mobile</a></li>
           
        </ul>
    </section>

    <section id="books">
        <h2>Bookstores</h2>
        <p>Immerse yourself in a world of literature.</p>
        <ul>
            <li><a href="">Himalayan Blunder</a></li>
            <li><a href="https://rb.gy/g0zi2m">Atomic Habits</a></li>
           
        </ul>
    </section>
</center>
    <footer class="myfooter">
        <p>&copy; 2023 MY Shopping Mall. All rights reserved.</p>
    </footer>

</body>
</html>

```
.mybody {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    
    background-image: url('https://t4.ftcdn.net/jpg/02/32/16/07/240_F_232160763_FuTBWDd981tvYEJFXpFZtolm8l4ct0Nz.jpg');
    background-position: center;
    background-size: cover;
    }

.myheader {
    background-color: cornflowerblue;
    color: white;
    text-align: center;
    padding: 1em;
}

.mysection {
    padding: 20px;

}

.myfooter {
    background-color: blue;
    color: white;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 25%;
  }

  .container {
    padding: 2px 16px;
  }
 .box {
    box-sizing: border-box;
  }
  
  .body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .column {
    float: left;
    width: 25%;
    padding: 0 10px;
  }
  
  .row {margin: 0 -5px;}
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }
  }
  
   .card1 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    text-align: center;
    background-color: #f1f1f1;
  }