DEV Community

chetan sanchali
chetan sanchali

Posted on

My First Web Developent by Using HTML & CSS

Image description

Image description

<!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>
Enter fullscreen mode Exit fullscreen mode

.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;
}
Enter fullscreen mode Exit fullscreen mode

.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;
}

Top comments (0)