ZuoTi.Pro
Question

I need to built this website using only CSS GRID for the placement of the stuff. Im having some trouble so i would like some help. Preferably built on codepen but you can also develop it locally. The pizza picture you can use any pizza picture you can find on the internet.

Joes Pizza Co. Home About News Menu Locations New Yorks Best Pizza joes pepperoni special Welcome to Joes Pizza Co. Speci

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

Homework Answers

Answer #1

HTML CODE:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Joe's pizza</title>

    <link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>

    <div class="container">

        <div class="header">

            <h1 class="name" style="color: darkgreen;">joe's Pizza Co.</h1>

            <div class="nav">

                <button class="home">Home</button>

                <button class="about">About</button>

                <button class="news">News</button>

                <button class="menu">Menu</button>

                <button class="location">Location</button>

            </div>

        </div>

        <div class="medium">

            <img src="https://media1.popsugar-assets.com/files/thumbor/nFC0faUnK02ylvgM26MKkJ8JXJU/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2020/03/05/001/n/28443503/tmp_8zA6iE_3f46f5fe73314520_GettyImages-1124359123.jpg" alt="pizza_image">

            <div class="bottom">

                <p class="left-box">welcome to joe's pizza co <br> <br>we pride ourseif on serving upbest pizzas in newyork citycome and visit one of our family friendly restuarent nwenwen nwneggd ioauebddg dugahbh <br> <br> plesae take a look at the

                    <a href="#">Location</a> page for more nformation where you can find our restuarent</p>

                <p class="right-box"><b>Special Offer</b> <br> <br>10% off on all pizzas when you eat in <br> 20% off with joes pepparonie with code ASFDDHNWHVEY</p>

            </div>

        </div>

    </div>

</body>

</html>

CSS CODE:

body {

    margin: 0px;

    padding: 0px;

    font-family: Arial, Helvetica, sans-serif;

    background-color: antiquewhite;

}

.container {

    margin: 30px;

    margin-top: 0px;

}

.header {

    display: grid;

    grid-auto-flow: column;

    justify-content: space-between;

}

.nav {

    display: grid;

    grid-auto-flow: column;

}

.nav button {

    padding: 20px;

    background: none;

    border: none;

}

.nav button:hover {

    color: darkgreen;

    cursor: pointer;

}

img {

    min-width: 100%;

    height: 500px;

    object-fit: cover;

}

.medium {

    display: grid;

}

.bottom {

    display: grid;

    grid-auto-flow: column;

}

.left-box {

    background-color: white;

    padding: 20px;

    margin-right: 20px;

    text-align: justify;

}

.right-box {

    background-color: red;

    padding: 20px;

    color: white;

}

0 0
Add a comment
Know the answer?
Add Answer to:
I need to built this website using only CSS GRID for the placement of the stuff....
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

  • 5. Please answer the following questions with respect to PLC Theory (8) a. Which phase of...

    5. Please answer the following questions with respect to PLC Theory (8) a. Which phase of the PLC is the pizza business? What indicators can you list? b. Given the phase of the PLC you indicated at part a: 1. What marketing mix strategies would you expect Dominos to be using? il. What marketing mix strategies is Dominos actually using? Ill. What disconnects, issues or questions arise from parts I and il above? The Strategy Carrying Domino's to New Heights...

  • Please see the articles below… 1.  What is your opinion on the subject? 2.  Which ethical views (i.e.,...

    Please see the articles below… 1.  What is your opinion on the subject? 2.  Which ethical views (i.e., utilitarian view, moral rights view, justice view, practical view) you feel are being used by both sides of the argument (i.e., for and against downloading) to justify their positions? High Court Enters File-Sharing Spat; Justices Must Determine Software Providers' Liability For Copyright Violations by Anne Marie Squeo. Wall Street Journal. (Eastern edition). New York, N.Y.: Mar 30, 2005. pg. A.2 WASHINGTON -- The Supreme...

  • Case study Company Case Campbell Soup Company: Watching What You Eat You might think that a well-known, veteran consumer products company like the Campbell Soup Company has it made. After all, when pe...

    Case study Company Case Campbell Soup Company: Watching What You Eat You might think that a well-known, veteran consumer products company like the Campbell Soup Company has it made. After all, when people think of soup, they think of Campbell’s. In the $5 billion U.S. soup market, Campbell dominates with a 44 percent share. Selling products under such an iconic brand name should be a snap. But if you ask Denise Morrison, CEO of Campbell, she’ll tell you a different...

  • How can we assess whether a project is a success or a failure? This case presents...

    How can we assess whether a project is a success or a failure? This case presents two phases of a large business transformation project involving the implementation of an ERP system with the aim of creating an integrated company. The case illustrates some of the challenges associated with integration. It also presents the obstacles facing companies that undertake projects involving large information technology projects. Bombardier and Its Environment Joseph-Armand Bombardier was 15 years old when he built his first snowmobile...

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