Diseñe una página web para el sistema de entrega de alimentos en línea usando HTML y CSS

Posted on by Rudeus Greyrat

En este artículo, aprenderemos cómo crear una página web totalmente receptiva para un sistema de entrega de alimentos en línea utilizando HTML y CSS.

Archivos utilizados:

  • índice.html
  • contacto.html
  • estilo.css

index.html: El siguiente código HTML describe la estructura de la página web. En primer lugar, tiene una etiqueta de encabezado para mostrar el nombre de la empresa que es «Online FoodShop». La barra de navegación contiene pestañas de «Inicio», «Acerca de», «Menú» y «Contáctenos». La barra de navegación también consta del logotipo de la empresa seguido de la imagen de fondo con algunos detalles más de la “Tienda de alimentación en línea” junto con los productos destacados.

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">
    <link 
      href="https://fonts.googleapis.com/css2?
      family=Ubuntu+Mono&display=swap" 
      rel="stylesheet">    
</head>
  
<body>
    <header>
        <h1 id="top">Online</h1>
        <h1 id="top1">FoodShop</h1>
    </header>
    <hr>
    <nav id="navbar">
        <img src="5.jpeg">
        <ul id="navcontent">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="contact.html">ContactUs</a></li>
        </ul>
    </nav>
    <div id="container1">
        <div id="row1">
            Welcome to Online FoodShop
        </div>
        <button class="btn">ORDER NOW</button>
        <div id="container3">
            <div id="row2">
                <button class="btn">Prices</button>
            </div>
            <div id="row3">
                <button class="btn">Specials</button>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="top3">Featured Products</h1>
    <div id="container4">
        <div id="row4">
            <button class="btn">ORDER NOW</button>
        </div>
        <div id="row5">
            <button class="btn">ORDER NOW</button>
        </div>
        <div id="row6">
            <button class="btn">ORDER NOW</button>
        </div>
    </div>
    <footer>Copyright © 2020-2021 OnlineFoodShop.
           All Rights are reserved</footer>
</body>
</html>

contact.html: El siguiente código HTML nos describe qué contenidos están presentes en la pestaña «Contáctenos» en la barra de navegación. Hemos utilizado etiquetas de entrada para ingresar el tipo de «consulta», «nombre», «identificación de correo electrónico», «número de teléfono» y «explicación» de la consulta. También hemos utilizado botones de radio para consultar sobre la membresía del cliente para «tienda de alimentos en línea». El formulario también proporciona los botones «Enviar» y «Restablecer».

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>ContactUs</title>
</head>
  
<body>
    <div id="ContactUs">
        <h1>Contact Us</h1>
        <form action="#">
            <div class="form-shape">
                <label for="query">
                    Type of Query
                </label>
                <select name="myQuery" id="query">
                    <option value="sel" selected>
                        Select
                    </option>
                    <option value="ord">
                        Order related Issues
                    </option>
                    <option value="Site">
                        Site related Issues
                    </option>
                    <option value="fed">
                        Complaint related Issues
                    </option>
                    <option value="others">
                        Others
                    </option>
                </select>
            </div>
            <div class="form-shape">
                <label for="name">Name</label>
                <input type="text" name="myName" 
                    id="name" 
                    placeholder="Enter your Name">
            </div>
            <div class="form-shape">
                <label for="email">Email-Id</label>
                <input type="email" name="myEmail" 
                    id="email" 
                    placeholder="Enter your email">
            </div>
            <div class="form-shape">
                <label for="pho">Phone Number</label>
                <input type="phone" name="myPhone" 
                    id="pho" 
                    placeholder="Enter your Phone no">
            </div>
            <div id="radio">
                Are you a member of OnlneFoodShop:
                Yes <input type="radio" name="eligible">
                No <input type="radio" name="eligible">
            </div>
            <div class="form-shape">
                <label for="message">
                    Ellaborate your query
                </label>
                <textarea name="mesg" id="message" 
                    cols="30" rows="10">
                </textarea>
            </div>
            <input type="submit" value="Submit">
            <input type="reset" value="Reset">
        </form>
    </div>
</body>
  
</html>

style.css: Este es el bloque de hoja de estilo que nos da el aspecto adecuado de la página web.

  • Estilo de encabezado: consta de dos etiquetas de «cabeza». Hemos usado el estilo de fuente «Ubuntu» para darle estilo al encabezado y también usamos colores apropiados para hacer que algunos textos se vean atractivos.
  • Estilo de la barra de navegación: básicamente consiste en el estilo del logotipo y el estilo del contenido. En primer lugar, hemos considerado la barra de navegación como un cuadro flexible y hemos asignado la dirección flexible a «columna». Hemos centrado la imagen del logo por display:block . Hemos usado la propiedad margin:auto para centrar la imagen. Luego consideramos el contenido de la barra de navegación como un flexbox y luego lo colocamos correctamente.
  • Estilo de la imagen de fondo: antes usamos pseudoselectores para establecer las respectivas imágenes de fondo. 
    /*CSS Reset*/
*{
    margin:0px;
    padding:0px;
}
/*Header Styling*/

#top{
    color:rgb(245, 10, 10);
    text-align:center;
    font-size:46px;
    font-family: 'Ubuntu Mono', monospace;
}
#top1{
    text-align:center;
    color:black;
    font-size:21px;
    font-family: 'Ubuntu Mono', monospace;
}
/* Navigation bar styling*/

/*Navbar image styling*/
#navbar img{
    display:block;
    width: 50px;
    height:50px;
    margin:auto;
    margin-bottom: 3px;
}

/*Navbar Functionality*/
#navbar{
    display:flex;
    flex-direction: column;
    background-color: gray;
    height: 14vh;
    width: 100vw;
    font-family: 'Ubuntu Mono', monospace;
    margin-top:10px;
   border: 2px solid black;
   border-radius:15px;
}


/*Navbar content functionality*/
#navcontent{
    display: flex;
    justify-content: center;
}


/*Navbar content styling*/
ul li{
    list-style: none;
    margin: 15px;
    border-radius: 20px;
}
ul li a{
    padding: 1px;
    color:white;
    text-decoration: none;
    border-radius:10px;
}
ul li a:hover{
    background-color: red;
    border-radius: 10px;
}

/* website background image designing */
#container1{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height:63vh;
}

/*Setting the background image using before pseudo selector*/ 
#container1::before{
    content:'';
    background: url("./1.jpg") no-repeat center center/cover;
    width: 100vw;
    height:59vh;
    position: absolute;
    top:0px;
    left: 0px;
    font-family: 'Ubuntu Mono', monospace;
    margin-right:45px;
    font-weight: bold;
    z-index: -1;
    opacity: 0.89;
    border: 2px solid black;
    border-bottom-left-radius: 100px;
}

#row1{
   color: black;
    font-weight:bold;
    font-size: 2rem;
    text-align: center;
    margin-top: 35px;
}
/*Button Styling*/
.btn{
    margin-top:15px;
    border: 3px solid white;
    border-radius:15px;
    background-color:yellow;
    font-size:20px;
    font-weight: bold;
    font-family: 'Ubuntu Mono', monospace;
}
.btn:hover{
    cursor: pointer;
    background-color: red;
}


#container3{
    display: flex;
    justify-content: space-evenly;
}
#row2{
    width:24vw;
    height:21vh;
    box-shadow: 2px 7px 16px 19px;
     margin-top:51px;
     margin-bottom: 51px;
     display: flex;
    justify-content: center;
     align-items: flex-end;
     position: relative;
     margin-right: 38px;
     border-radius: 40px;
}
#row2::before{
    content: '';
    background: url('2.jpeg') no-repeat center center/cover;
    position: absolute;
    top: 0px;
    left:0px;
    width: 24vw;
    height:21vh;
    z-index: -1;
    border-radius: 40px;
}
#row3{
    position: relative;
    width: 24vw;
    height:21vh;
    display: flex;
    justify-content: center;
     align-items: flex-end;
     box-shadow: 2px 7px 16px 19px;
     margin-top:51px;
     margin-bottom: 51px;
     
     margin-left: 38px;
     border-radius: 40px;
}
#row3::before{
    content: '';
    background: url('3.jpeg') no-repeat center center/cover;
    position: absolute;
    top:0px;
    left:0px;
    width: 24vw;
    height:21vh;
    z-index: -1;
    border-radius: 40px;
}

#top3{
    text-align: center;
    color:red;
    font-family: 'Ubuntu Mono', monospace;
}
#container4{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    margin: 41px;
}  
#row4{
    width: 29vw;
    height: 360px;
    border: 2px solid black;
    background:url('a1.jpeg') no-repeat center center/cover; 
    display: flex;
    justify-content:center;
    align-items:flex-end;
    border-radius: 15px;
}
#row5{
    width: 29vw;
    height: 360px;
    border: 2px solid black;
    background:url('a2.jpeg') no-repeat center center/cover;
    display: flex;
    justify-content:center;
    align-items:flex-end;
    border-radius: 15px;
}
#row6{
    width: 30vw;
    height: 360px;
    border: 2px solid black;
    background:url('a3.jpeg') no-repeat center center/cover;
    display: flex;
    justify-content:center;
    align-items:flex-end;
    border-radius: 15px;
}
/*Designing the footer*/
footer{
    text-align: center;
}
/*Designing of Contact Us*/
#ContactUs{
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: gray;
}
.form-shape input, .form-shape select, .form-shape textarea{
   width: 92%;
   padding: 0.5rem;
}
/*Changing the color of placeholder*/
::placeholder{                  
    color:gray;
}
/*Making the webpage responsive using media queries*/
@media only screen and (max-width:1131px){
    #row4{
        width: 42vw;
    }
    #row5{
        width:45vw;
    }
    #row6{
        margin-top: 20px;
        width:90vw;
    }
}
@media only screen and (min-width:600px) and (max-width:781px)
{
    #row4{
        width:84vw;
        margin: auto;
        margin-left: 22px;
    }
    #row5{
        
        width:84vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 22px;
    }
    #row6{
        width:84vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 22px;
    }
}
@media only screen and (max-width:600px){
    #row4{
        width:78vw;
        margin: auto;
        margin-left: 3px;
    }
    #row5{
        
        width:78vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 3px;
    }
    #row6{
        width:78vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 3px;
    }
}
@media only screen and (min-height:1000px){
    #navbar{
        height:10vh;
    }
    #container1::before{
        height:39vh;
    }
    #container1{
        height:44vh
    }
}

    Producción:

Publicación traducida automáticamente

Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *