first commit

SubmittedAssignments/Sanjay_Zade/01_Card_TopImage/index.html

@@ -0,0 +1,30 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<!-- Card - Image Top -->
+<div class="card text-center mb-3 mb-3 card border-dark mb-3" style="width: 400px;">
+    <!-- Image -->
+    <img src="Nature_img.avif" class="card-img-top" alt="Placeholder image">
+
+    <!-- Card Header -->
+    <div class="card-header d-none">
+        Featured
+    </div>
+    <!-- Card Body -->
+    <div class="card-body">
+        <!-- Card Header -->
+        <h5 class="card-title d-none">Card title</h5>
+        <h5 class="card-title">Beuty of Nature</h5>
+        <!-- Card Body Content -->
+        <p class="card-text d-none">Some quick example text to build on the card title and make up the bulk of the card's
+            content.</p>
+        <p class="card-text"><b><i>"Look deep into nature, and then you will understand everything better."</i></b></p>
+        <p>- Albert Einstein</p>    
+        <!-- Card Footer -->
+        <p class="card-text d-none"><small class="text-muted">Last updated 3 mins ago</small></p>
+        <a href="#" class="btn btn-primary">Explore Nature</a>
+    </div>
+    <div class="card-footer text-body-secondary d-none">
+        2 days ago
+    </div>
+</div>

SubmittedAssignments/Sanjay_Zade/02_Card_BottomImage/index.html

@@ -0,0 +1,30 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<!-- Card - Image Top -->
+<div class="card text-center mb-3 card text-bg-light mb-3 card border-danger mb-3" style="width: 400px;">
+
+    <!-- Card Header -->
+    <div class="card-header d-none">
+        Featured
+    </div>
+    <!-- Card Body -->
+    <div class="card-body">
+        <!-- Card Header -->
+        <h5 class="card-title d-none">Card title</h5>
+        <h4 class="card-title"><b>Wild Life</b></h4>
+        <!-- Card Body Content -->
+        <p class="card-text d-none">Some quick example text to build on the card title and make up the bulk of the card's
+            content.</p>
+        <p class="card-text"><i><b>"Wildlife is something which man cannot construct. Once it is gone, it is gone forever."</b></i></p>
+        <p>- Joy Adamson</p>    
+        <!-- Card Footer -->
+        <p class="card-text d-none"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+    <div class="card-footer text-body-secondary d-none">
+        2 days ago
+    </div>
+
+    <!-- Image -->
+    <img src="Wild_img.webp" class="card-img-bottom" alt="Placeholder image">
+
+</div>

SubmittedAssignments/Sanjay_Zade/03_Card_LeftImage/index.html

@@ -0,0 +1,29 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<!-- Card - Image Left -->
+<div class="card text-bg-info mb-3 card text-center mb-3 card border-primary mb-3" style="width: 600px;">
+    <div class="row">
+        <!-- Image -->
+        <div class="col-md-6">
+            <img src="Marine_img.jpg" class="card-img" alt="Placeholder image">
+        </div>
+
+        <!-- Card - Image Left -->
+        <div class="col-md-6">
+            <!-- Card Body -->
+            <div class="card-body">
+                <!-- Card Header -->
+                <h5 class="card-title d-none">Card title</h5>
+                <h4 class="card-title"><b>The Ocean</b></h4>
+                <!-- Card Body Content -->
+                <p class="card-text d-none">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <p class="card-text"><b><i>"The crazy thing is we live on an ocean planet - nobody gets that yet."</i></b></p>
+                <p>- Graham Hawkes</p>
+                <a href="#" class="btn btn-primary">Explore Deep</a>
+                <!-- Card Footer -->
+                <p class="card-text d-none"><small class="text-muted">Last updated 3 mins ago</small></p>
+            </div>
+        </div>
+
+    </div>
+</div>

SubmittedAssignments/Sanjay_Zade/04_Card_RightImage/index.html

@@ -0,0 +1,28 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<!-- Card - Image Right -->
+<div class="card text-center mb-3 card text-bg-dark mb-3 card border-primary mb-3" style="width: 600px;">
+    <div class="row">
+        <!-- Card - Image Right -->
+        <div class="col-md-6">
+            <!-- Card Body -->
+            <div class="card-body">
+                <!-- Card Header -->
+                <h5 class="card-title d-none">Card title</h5>
+                <h4><b>The Sky</b></h4>
+                <!-- Card Body Content -->
+                <br>
+                <p class="card-text d-none">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <p><i><b>"Clouds come floating into my life, no longer to carry rain or usher storm, but to add color to my sunset sky."</b></i></p>
+                <p>- Rabindranath Tagore</p>
+                <a href="#" class="btn btn-primary">Explore More</a>
+                <!-- Card Footer -->
+                <p class="card-text"><small class="text-muted d-none">Last updated 3 mins ago</small></p>
+            </div>
+        </div>
+        <!-- Image -->
+        <div class="col-md-6">
+            <img src="Cloud_img.jpg" class="card-img" alt="Placeholder image">
+        </div>
+    </div>
+</div>

SubmittedAssignments/Sanjay_Zade/05_CardsSection_Top/index.html

@@ -0,0 +1,79 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<section class="container">
+    <link rel="stylesheet" href="style.css">
+    <div class="py-5">
+        <div class="row d-flex">
+            <div class="col">
+                <div id="one" class="card">
+                    <img src="Sofa.webp" class="card-img-top" alt="Placeholder image">
+                    <div class="card-body">
+                        <h3 class="card-title d-none">Fully Responsive</h3>
+                        <h4 class="card-title1">20% of on wooden designer sofa</h4>
+                        <div class="pb-1 text-muted">
+                            <p class="d-none">One disadvantage of Lorum Ipsum is that in certain letters which is said more than.</p>
+                            <p style="color:whitesmoke;">Now decorate your hall with affortable prices & new designes.</p>
+                            <a href="#" class="btn btn-primary">Buy Now</a>
+                        </div>
+                        <div class="d-flex">
+                            <a href="https://dev.erp.apnasite.in/" class="text-dark text-decoration-none"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div id="two" class="card">
+                    <img src="bed.jpg" class="card-img-top" alt="Placeholder image">
+                    <div class="card-body">
+                        <h3 class="card-title d-none">Fresh Layouts</h3>
+                        <h4 class="card-title">Customise your bed design with your ideas.</h4>
+                        <div class="pb-1 text-muted">
+                            <p class="d-none">The most well-known dummy text is the 'Lorem', which well-known is said which is said.
+                            </p>
+                            <p>Available 1000 plus design for bed with complete set</p>
+                            <a href="#" class="btn btn-primary">Buy Now</a>
+                        </div>
+                        <div class="d-flex">
+                            <a href="https://dev.erp.apnasite.in/" class="text-dark text-decoration-none"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div id="three" class="card">
+                    <img src="dining.jpg" class="card-img-top" alt="Placeholder image">
+                    <div class="card-body">
+                        <h3 class="card-title d-none">Modern Workflow</h3>
+                        <h4 class="card-title">Classic wooden dining tables & chairs </h4>
+                        <div class="pb-1 text-muted">
+                            <p class="d-none">Moreover, in Latin only words at the beginning of sentences which is said are
+                                capitalized.</p>
+                            <p>Make your meal royal with these classic dining.</p>  
+                            <a href="#" class="btn btn-primary">Buy Now</a>  
+                        </div>
+                        <div class="d-flex">
+                            <a href="https://dev.erp.apnasite.in/" class="text-dark text-decoration-none"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br>
+
+        <h2 class="mb-3 text-center d-none">Template Features</h2>
+        <h2 class="mb-3 text-center">Welcome to our furniture mart</h2>
+        <br>
+        <h3 class="d-none">this is subheading</h3>
+        <h3 id="four">Lets complete your home with us.</h3>
+        <br>
+        <div class="mb-4 text-center">
+            <p class="d-none">Ut enim ad minima veniam quis nostrum exercitationem ullam corporis suscipit laboriosam nisi commodi
+                consequatur.</p>
+            <p>Make your home even more special with our limited collections. You will discover vibrant colours or relaxing natural materials, all amazing products to make your home even more unique. There is something for everyone!
+
+            </p>    
+        </div>
+
+    </div>
+</section>

SubmittedAssignments/Sanjay_Zade/05_CardsSection_Top/style.css

@@ -0,0 +1,48 @@
+.card-img-top:hover, .card-img-top:focus, .card-img-top:active 
+{
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+}
+.card-img-top
+{
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+    -webkit-transition-property: transform;
+    transition-property: transform;
+}
+#zero
+{
+    color:whitesmoke;
+}
+#one
+{
+    background-color: rgb(39,24,16); 
+    border: slategray;
+}
+.card-title1
+{
+    color:whitesmoke;
+}
+#two
+{
+    background-color: rgb(201, 147, 143); 
+    border: slategray;
+}
+#three
+{
+    background-color: rgb(223, 148, 227); 
+    border: slategray;
+}
+.mb-3
+{
+    color: chocolate;
+}
+#four
+{
+    color: brown; 
+    text-align: center;

SubmittedAssignments/Sanjay_Zade/06_CardsSection_Bottom/index.html

@@ -0,0 +1,75 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<section class="container">
+    <link rel="stylesheet" href="style.css">
+    <div class="py-5">
+
+        <h2 class="mb-3 text-center d-none">Template Features</h2>
+        <h1 class="mb-3 text-center">SKY HEIGHTS REALITY</h1>
+        <h3 class="d-none">this is subheading</h3>
+        <h3 id="one">Make your dreams come true with us.</h3>
+        <div class="mb-4 text-center">
+            <p class="d-none">Ut enim ad minima veniam quis nostrum exercitationem ullam corporis suscipit laboriosam nisi commodi
+                consequatur.</p>
+            <p id="two">Our diverse verticals reflect our dedication to developing ecosystems for India’s changing needs. But our foundation has always been our employees, our customers, our stakeholders, and our shareholders. We invest in spearheading innovation through empowerment and optimism, in order to build the foundation of India’s future on the legacy of our past.</p>
+        </div>
+
+        <div class="row d-flex">
+            <div class="col">
+                <div class="card">
+                    <img src="hall5.jpg" class="card-img-top" alt="Placeholder image">
+                    <div class="card-body">
+                        <h3 class="card-title d-none">Fully Responsive</h3>
+                        <h3 class="card-title">It shows luxury</h3>
+                        <div class="pb-1 text-muted">
+                            <p class="d-none">One disadvantage of Lorum Ipsum is that in certain letters which is said more than.</p>
+                            <p>Specious and luxurious hall with balcony having amazing veiw.</p>
+                            <a href="#" class="btn btn-primary">Find more</a>
+                        </div>
+                        <div class="d-flex">
+                            <a href="https://dev.erp.apnasite.in/" class="text-dark text-decoration-none"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card">
+                    <img src="bedroom.jpg" class="card-img-top" alt="Placeholder image">
+                    <div class="card-body">
+                        <h3 class="card-title d-none">Fresh Layouts</h3>
+                        <h3 class="card-title">Pease & dreams</h3>
+                        <div class="pb-1 text-muted">
+                            <p class="d-none">The most well-known dummy text is the 'Lorem', which well-known is said which is said.
+                            </p>
+                            <p>Modern and Specious master bedroom having wide french windows.</p>
+                            <a href="#" class="btn btn-primary">Find more</a>
+                        </div>
+                        <div class="d-flex">
+                            <a href="https://dev.erp.apnasite.in/" class="text-dark text-decoration-none"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card">
+                    <img src="kitchen.jpg" class="card-img-top" alt="Placeholder image">
+                    <div class="card-body">
+                        <h3 class="card-title d-none">Modern Workflow</h3>
+                        <h3 class="card-title">Making delicious</h3>
+                        <div class="pb-1 text-muted">
+                            <p class="d-none">Moreover, in Latin only words at the beginning of sentences which is said are
+                                capitalized.</p>
+                            <p>Moduler and well designed kitchen make your food delicious.</p>
+                            <a href="#" class="btn btn-primary">Find more</a>    
+                        </div>
+                        <div class="d-flex">
+                            <a href="https://dev.erp.apnasite.in/" class="text-dark text-decoration-none"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</section>

SubmittedAssignments/Sanjay_Zade/06_CardsSection_Bottom/style.css

@@ -0,0 +1,45 @@
+    .container
+    {
+       background-color: cornsilk; 
+    }    
+    .card-img-top:hover, .card-img-top:focus, .card-img-top:active 
+    {
+        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+    }    
+    .card-img-top
+    {
+        display: inline-block;
+        vertical-align: mir
+        ddle;
+        -webkit-transform: perspective(1px) translateZ(0);
+        transform: perspective(1px) translateZ(0);
+        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+        -webkit-transition-duration: 0.3s;
+        transition-duration: 0.3s;
+        -webkit-transition-property: box-shadow, transform;
+        transition-property: box-shadow, transform;
+    }
+    .card-body
+    {
+        background-color: rgb(192,190,243);
+        color: darkslategrey;
+    }
+    .mb-3
+    {
+        font-family: fantasy; 
+        color: darkolivegreen;
+    }
+    #one
+    {
+        text-align: center; 
+        color: blueviolet; 
+        font-style: italic;
+    }
+    #two
+    {
+        text-align: left; 
+        color: black; 
+        font-style: italic;
+    }