Add files via upload

ajayNemaliga · Apr 21, 2024 · fd7cb6d · fd7cb6d
1 parent b303715
commit fd7cb6d
Show file tree

Hide file tree

Showing 16 changed files with 390 additions and 0 deletions.
diff --git a/awards.png b/awards.png
diff --git a/banner2.jpg b/banner2.jpg
diff --git a/career.png b/career.png
diff --git a/catering.jpg b/catering.jpg
diff --git a/cream-stone-icecream1.jpg b/cream-stone-icecream1.jpg
diff --git a/cream-stone-icecream2.jpg b/cream-stone-icecream2.jpg
diff --git a/cream-stone-logo.png b/cream-stone-logo.png
diff --git a/cream-stone.png b/cream-stone.png
diff --git a/ice-cream-parlor.jpg b/ice-cream-parlor.jpg
diff --git a/icon-collection.jpg b/icon-collection.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Cream Stone</title>
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+
+<body>
+    <div id="wrap">
+        <header id='header'>
+            <div class="container">
+                <div class="nav-1">
+                    <div class="socialLeft">
+                        <i class="fa-brands fa-twitter"></i>
+                        <i class="fa-brands fa-facebook-f"></i>
+                    </div>
+                    <div class="socialMid">
+                        <a href="/home" class="logo"><img src="./cream-stone-logo.png" /></a>
+                    </div>
+                    <div class="socialRight">
+                        <i class="fa-brands fa-instagram"></i>
+                        <i class="fa-brands fa-google-plus-g"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="nav-2">
+                <ul id="topLinks">
+                    <li>Press Coverage</li>
+                    <li>Catering</li>
+                    <li>Gallery</li>
+                    <li>Careers</li>
+                    <li>Awards</li>
+                    <li>Gifts</li>
+                    <li>Locate Us</li>
+                    <li>Contact Us</li>
+                </ul>
+            </div>
+                <div class="nav-3">
+                        <ul>
+                            <li>Home</li>
+                            <li class="dropdown">About Us <span class="caret"></span></a>
+                            <li class="dropdown">Franchise <span class="caret"></span>
+                            <li>Menu</li>
+                            <li>Reviews</li>
+                            <li>FAQ</li>
+                            <li>Order Online</li>
+                        </ul>
+                </div>
+            </nav>
+
+        </header>
+
+        <section class="page">
+
+            <div class="bannerContainer">
+                <img src="banner2.jpg" width="100%" /> 
+                <span id='bPrev' class="bb">
+                    <i class="fa-solid fa-angle-left"></i>
+                </span>
+                <span id='bNext' class="bb">
+                    <i class="fa-solid fa-angle-right"></i>
+                </span>
+            </div>
+
+            <div class="container ContentWrap text-center">
+                <div class="row">
+                    <div class="">
+                        <img class="img-responsive center-block" src="press.png" />
+                        <h3 class="title">Press</h3>
+                    </div>
+
+                    <div class="">
+                        <img class="img-responsive center-block" src="career.png" />
+                        <h3 class="title">Career</h3>
+                    </div>
+
+                    <div >
+                        <img class="img-responsive center-block" src="awards.png" />
+                        <h3 class="title">Awards</h3>
+                    </div>
+
+                    <div >
+                        <img class="img-responsive center-block" src="order-online.png" />
+                        <h3 class="title">Order Now</h3>
+                    </div>
+
+
+                </div>
+            </div>
+
+            <div class="ContentWrap">
+                <h3 class="titlePink">About us</h3>
+                <div class="row">
+                    <div class="about">
+                        <p>Over a thousand years ago, Marco Polo returned to Italy from the Far East with a recipe that
+                            closely resembled what is now called sherbet. Historians estimate that this recipe evolved
+                            into ice cream sometime in the 16th century, Since then there is no looking back, ice cream
+                            has been enjoyed through the ages across the world and in India.</p>
+                        <p>Cream Stone was launched at Hyderabad in 2009, and it was so loved and enjoyed and grew so
+                            popular that its stores soon started to open across India. Backed by Ice cream expertise and
+                            its worldwide research and development capabilities, in just 7 short years it expanded its
+                            operations in Andhra Pradesh, Telangana, Karnataka, Maharashtra, Kerala and Tamil Nadu.</p>
+                        <p>Cream stone owes its success to its research and development team for its innovating flavors,
+                            and its quality control for bringing the best of ingredients and making magic on the stone.
+                        </p>
+                    </div>
+
+                    <div class="about">
+                        <p>We take pride in serving the highest quality premium ice cream blends, homemade waffle bowls
+                            & cones, innovative recipes, a wide range of mix-ins and its undying dedication to enhance
+                            the customer experience at every stage.</p>
+                        <p>An upscale and world class experience in the premium ice-cream mix-in category, Cream Stone
+                            offers a luxurious atmosphere where customers can enjoy our carefully mixed creations or
+                            customize their own. Cream Stone is the ideal environment in which to enjoy such pleasures,
+                            where cool contemporary styling and casual comfort complete a thoroughly dreamy all-round
+                            ice cream experience.</p>
+
+                        <h4 class="title-cocon">Our Mission</h4>
+
+                        <p><strong>To offer our customers, the best ice cream experience they can have, with the finest
+                                ingredients with the most creative and innovative flavors.</strong></p>
+                    </div>
+
+                    <div class="about">
+                        <img class="w100 center-block" src="icon-collection.jpg" />
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="container ContentWrap">
+                <div class="row">
+                    <div class="img1">
+                        <img  src="laughter-text.jpg" />
+                    </div>
+                    <div class="">
+                        <div class="row">
+                            <div class="img2">
+                                <img  src="cream-stone-icecream1.jpg" />
+                            </div>
+                            <div class="img2">
+                                <img  src="cream-stone-icecream2.jpg" />
+                            </div>
+                            <div class="img2">
+                                <img  src="catering.jpg" />
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="img3">
+                                <img  src="ice-cream-parlor.jpg" />
+                            </div>
+                            <div class="img2">
+                                <img src="stone-celebrities.jpg" />
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div class="ContentWrap logo-bottom">
+                <img src="./cream-stone.png" alt="">
+            </div>
+        </section>
+    </div>
+
+    <footer>
+        <div class="container">
+            <i class="fa-brands fa-twitter"></i>
+            <i class="fa-brands fa-facebook-f"></i>
+            <i class="fa-brands fa-instagram"></i>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/laughter-text.jpg b/laughter-text.jpg
diff --git a/order-online.png b/order-online.png
diff --git a/press.png b/press.png
diff --git a/stone-celebrities.jpg b/stone-celebrities.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,213 @@
+body{
+    margin: 0;
+}
+#header {
+    width: 100%;
+    height: px;
+    position: relative;
+    z-index: 996;
+    background: #541100;
+    display: block;
+}
+
+.container {
+    position: relative;
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+
+}
+.nav-1{
+    width: 100%;
+    height: 145px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.nav-1,i{
+    color: #f38ab4;
+    padding: 0px 10px;
+    font-size: larger;
+}
+.socialLeft{
+    width: 350px;
+    height: 45px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    background-color: #774133;
+    border-top-right-radius:20px ;
+    border-bottom-right-radius:20px ;
+}
+.socialMid{
+    height: 80px;
+    width: 250px;
+}
+.socialMid img{
+    width: 250pxpx;
+    height: 80px;
+}
+.socialRight{
+    width: 350px;
+    height: 45px;
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    background-color: #774133;
+    border-top-left-radius:20px ;
+    border-bottom-left-radius:20px ;
+}
+.nav-2{
+    height: 55px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+#topLinks{
+    width:70%;
+    list-style-type: none;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+#topLinks li{
+    font-size:larger;
+    font-weight: 800;
+    color: #af9183;
+    padding-bottom:10px;
+    border-bottom:3px solid transparent ;
+    transition: outline-color 0.3s;
+
+}
+#topLinks li:hover{  
+
+    border-bottom: 3px solid #af9183;
+}
+.nav-3{
+    background-color: #f9d7e3;
+    font-size: larger;
+    font-weight: 600;
+    display: flex;
+    justify-content: center;
+}
+.nav-3 ul{
+    display: flex;
+    justify-content:space-around;
+    align-items: center;
+    list-style-type: none;
+    color: #541100;
+    height: 20px;
+    width: 60%;
+}
+.nav-3 ul li{
+    padding-bottom:10px;
+    border-bottom:3px solid transparent ;
+    transition: outline-color 0.3s;
+}
+.nav-3 ul li:hover{
+    border-color:#541100;
+}
+.caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    border-top: 4px solid;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+.bannerContainer{
+    position: relative;
+}
+.bannerContainer i{
+   color: #fff;
+}
+
+.bb{
+
+    background-color: #000;
+    font-size: x-large;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    transition-duration:  1;
+}
+.bb:hover{
+    width: 50px;
+}
+#bPrev{
+    position:absolute;
+    left: 0;
+    top: 45%;
+
+}
+#bNext{
+    position:absolute;
+    right: 0;
+    top: 45%;
+
+}
+.page{
+    background-color: #fbe1eb;
+    padding-bottom: 40px;
+}
+.row{
+    width: 100%;
+    margin: 20px 0;
+    display: flex;
+    justify-content: space-evenly;
+}
+.titlePink{
+    color: #ef6da1;
+    letter-spacing: 1px;
+    font-size: 2.5rem;
+    font-family: 'coconregular', sans-serif;
+    margin: 20px auto;
+}
+.ContentWrap{
+    margin: 4% 10%;
+}
+.about{
+    width:30%;
+}
+.about img{
+    width: 350px;
+    height: auto;
+}
+.img1{
+    width: 485px;
+    height: 360px;
+}
+.img2{
+    width: 160px;
+    height:180px ;
+    margin: 0  10px;
+}
+.img3{
+    width: 250px;
+    height: 150px;
+}
+.img1 img,.img2 img,.img3 img{
+    width: inherit;
+    height: inherit;
+}
+.logo-bottom{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+footer{
+    height: 50px;
+    background-color: #541100;
+}
+footer .container{
+    height: inherit;
+    display: flex;
+    justify-content:left;
+    align-items: center;
+    margin-left: 20%;
+}