ZuoTi.Pro
Question

I need html and CSS code to create an Ice Cream Shop website . Thank you

I need html and CSS code to create an Ice Cream Shop website . Thank you

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

I am sending you the code for HTML and CSS files. You need to create 2 files with name index.html and style.css and both to be kept in same folder with the file name as mentioned else the code will not work.

Code for index.html

<!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="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>ICE-CREAM WEBSITE</h1>
        <nav>
            <ul>
                <li><a href="#about">About Us</a></li>
                <li><a href="#speciality">Our Speciality</a></li>
                <li><a href="#order">Order Now</a></li>
            </ul>
        </nav>
        <img src="https://www.pngkey.com/png/detail/69-698796_ice-cream-scoop-clipart-pop-art-ice-cream.png" alt="">
        <div id="about" class="wrap">
            <h2>About-US</h2>
            <p>In 1926, Ice_cream makers imported ice-cream making machines.

                From a small outlet, Ice_cream makers had expanded to four ice-cream shops before independence and became popular
                for its flagship cassata ice cream, which was introduced in the 1950s.

                Eventually, Ranchod Lal's sons, Ramchandra and Lakshman, inherited the business. This dynamic duo
                imparted a new vision to the venture and infused a spirit of calculated risk-taking into the firm.

                As a result, by the 1970s, the Ice_cream makers Company had already evolved into a modern corporate entity and
                had 8-10 outlets in Ahmedabad.
            </p>
            <p>
                The Company launched Badabite, Flingo and Gourmet which created a storm in the American Ice-cream Market
                in 2011.

                As Badabite, Flingo and Gourmet (as well as new variants) continue with the high trajectory growth in
                2012 as well with new variants, the Company was again confronted with huge challenge of sustaining the
                innovation trends.

                In 2013, Ice_cream makers has been voted as the "Most Trusted Icecream brand in America" as per the The Brand Trust
                Report-2013. Also, the Economic Times Survey ranked Ice_cream makers among the "Top 20 Food" brands in America.
            </p>
        </div>
        <div id="speciality" class="wrap">
            <h2>Our-Speciality</h2>
            <p>Did you just discover the dashing deliciousness of our Gourmet Super Premium ice cream; or the outright
                tasty flavours of the Badabite ice cream; or have you unlocked oodles of happiness with our Flingo; or
                did you just beat the heat with creamy Cool-fi? Whatever it may be, we are sure you will always find
                something that will make Ice_cream makers the best part of your day. We, at Ice_cream makers, believe that the love for
                ice cream is universal and we've always worked to uphold this position in your heart by bringing out
                lip-smacking, tasteful flavours of delicious ice creams and frozen desserts in various forms. So, what
                are you waiting for? Come to the nearest Ice_cream makers outlet and indulge in delicious delights crafted to
                tantalize your taste buds.

                As someone rightly said, ‘The world around you waits while you’re having ice cream.’ Experience it at
                Ice_cream makers!</p>
            <ul>
                <li>Family Pack</li>
                <li>Chocolate Bonnanza</li>
                <li>Tooty Fruity</li>
                <li>Dark Forest</li>
                <li>Sunday Special</li>
            </ul>
        </div>
        <div id="order" class="wrap">
            <h2>Order-Now</h2>
            <form >
                <input type="number" placeholder="Enter your Phone No.">
                <input type="text" placeholder="Enter your Address">
                <label for="type"> Order Type</label>
                <select id="type">
                    <option value="0">1. Family Pack</option>
                    <option value="1">2. Chocolate Bonnanza</option>
                    <option value="2">3. Tooty Fruity</option>
                    <option value="3">4. Dark Forest</option>
                    <option value="4">5. Sunday Special</option>
                  </select>
                <button type="submit">Order Now</button>
            </form>
        </div>
    </div>
</body>

</html>

Code for style.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI';
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
}

body {
    background-color: black;
}

.container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: rgb(218, 134, 151);
}

.container h1 {
    background-color: teal;
    text-align: center;
    justify-content: center;
    font-size: 8vw;
    padding-top: 2rem;
}
.container img {
    width: 20vw;  
    margin: 10px auto;
    border-radius:50%;
}

.container nav {
    position: fixed;
    width: 80%;
    margin: 0 auto;
    padding: 0.5rem 0;
    background-color: rgba(21, 60, 97, 0.479);
}
.container nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container nav ul li{
    width: fit-content;
    padding: 10px;
}
.container nav ul li a{
    width: fit-content;
    padding: 5px;
    background-color: tomato;
    border-radius: 5px;
    color: white;
}
.container nav ul li a:hover{
    background-color: rgb(136, 170, 69);
}
.wrap{
    background-color: cornflowerblue;
    padding-bottom: 2rem;
}
.wrap h2{
    text-decoration: underline;
    text-align: center;
    padding-top: 1rem;
}
#speciality{
    background-color: palevioletred;
}
.wrap p{
    width: 80%;
    padding-top: 1rem;
    margin: 0 auto;
    text-align: justify;
}
.wrap ul{
    padding-top: 1rem;
    width: fit-content;
    margin: 0 auto;
}
.wrap ul li{
    cursor: pointer;
    list-style: disc;
    background-color: rgb(225, 193, 233);
    padding: 0.5rem;
    margin: 1rem;
    border-radius: 5px;
    color: rgb(138, 13, 13);
}
.wrap ul li:hover{
    background-color: rgb(121, 26, 57);
    transform: scale(1.5);
    color: white;
}

#order{
    background-color: mediumslateblue;
}

.wrap form{
    display: flex;
    flex-direction: column;
    margin: 1rem auto;
    background-color: plum;
    width: 60%;
    border-radius: 1rem;
    padding: 1rem 0;
}
.wrap form input{
    text-align: center;
    height: 2rem;
    border-radius:10px ;
    width: 80%;
    border: 1.5px solid black;
    margin: 1rem auto;
}
.wrap label,select{
    height: 2rem;
    font-weight: 500;
    border-radius:10px ;
    width: 50%;
    text-align: center;
    margin: auto;
}

::placeholder{
    text-align: center;
    font-size: 0.9rem;
}
button{
    width: fit-content;
    margin: 2rem auto;
    background-color: rgb(17, 99, 74);
    padding: 0.5rem;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
}
0 0
Add a comment
Know the answer?
Add Answer to:
I need html and CSS code to create an Ice Cream Shop website . Thank you
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT