Creación de estructura : este artículo lo ayudará a crear una estructura simple de una página web mediante el uso de algunas etiquetas básicas como <li> y <section>. Un poco de conocimiento de css agrega un peso visual significativo al sitio web.
Aquí hay un ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>About us Page</title> </head> <body> <nav class="navbar background"> <ul class="nav-list"> <div class="logo"><img src=""></div> <li><a href="#Home">Home</a></li> <li><a href="#Food">Food</a></li> <li><a href="#AboutUs">AboutUs</a></li> <li><a href="#ContactUs">Contact Us</a></li> </ul> <div class="rightNav"> <input type="text" name="search" id="search"> <button class="btn btn-sm">Search</button> </div> </nav> <section class="background firstsection"> <div class="box-main"> <div class="firstHalf"> <p class="text-big">About US</p> <p class="text-small"> Here you will get to know the team members of our company </p> <br> <p class="center"><a href="#Order" style="text-decoration:none;color:white;"> Below are the people who works in our company</a> </p> </div> </div> </section> <section class="service"> <h1 class="h-primary center" style="margin-top:30px;text-align:center;"> Our Team </h1> <div id="services"> <div class="box"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201231132740/Capture.PNG" alt="picture goes here"> <p class="center"> <a href="#xyz" style="text-decoration:none;color:black; font-weight:bold;font-family: 'Langar', cursive;"> xyz </a> </p> <p style="font-family: sans-serif">CEO and the Founder</p> </div> <div class="box"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201231132740/Capture.PNG" alt="picture goes here"> <p class="center"> <a href="#abc" style="text-decoration:none;color:black; font-weight:bold;font-family: 'Langar', cursive;"> abc </a> </p> <p style="font-family: sans-serif ">co-founder</p> <p style="font-family: sans-serif ">Foodscalablility@gmail.com</p> </div> <div class="box"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201231132740/Capture.PNG" alt="picture goes here"> <br> <p class="center"> <a href="#xyz" style="text-decoration:none;color:black; font-weight:bold;font-family: 'Langar', cursive;"> asw </a> </p> <p style="font-family: sans-serif ">Food Manager of the company </p> </div> </div> </section> <footer class="background"> <p class="text-footer"> Copyright ©-All rights are reserved </p> </footer> </body> </html>
Diseño CSS: Usaremos CSS para diseñar la página de interfaz simple. Aquí, la parte interesante para crear esta página es usar el mismo fondo para la barra de navegación y el fondo de la página web. En el pie de página también, usaremos el mismo fondo usando la clase que hemos usado para dar imágenes de fondo a la página web y la barra de navegación. Otro aspecto interesante de la página web es que la barra de navegación está fija en un punto, por lo que cuando el usuario se desplace por la página web encontrará que la barra de navegación está fija en un lugar.
CSS
* {
margin:0;
padding:0;
overflow-x: hidden;
}
html {
scroll-behaviour: smooth;
}
:root {
--navbar-height: 59px;
}
.logo {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 33%;
border: 2px solid white;
border-radius: 50px;
}
.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
.nav-list {
width: 70%;
display: flex;
}
.nav-list li {
list-style: none;
padding: 2px 6px;
}
.nav-list li a {
text-decoration: none;
color: white;
}
.nav-list li a:hover {
color: grey;
}
.rightNav {
width: 50;
text-align: right;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background {
background: grey;
background-blend-mode: darken;
background-size: cover;
}
.firstsection {
height: 100vh;
}
.box-main {
display: flex;
justify-content: center;
align-items: center;
color: white;
max-width: 50%;
margin: auto;
height: 80%;
}
.firstHalf {
width: 75%;
display: flex;
flex-direction: column;
justify-content: center
}
.firstHalf img {
display: flex;
border-radius: 9050px;
}
.text-big {
font-family: 'Piazzolla', serif;
font-weight: bold;
font-size: 41px;
text-align: center;
}
.text-small {
font-family: 'Sansita Swashed', cursive;
font-size: 18px;
text-align: center;
}
#service {
margin: 34px;
display: flex;
}
#service .box {
padding: 100px;
margin: 3px 6px;
border-radius: 28px;
}
#service .box img {
margin-top: 10px;
height: 150px;
margin: auto;
display: block;
border-radius: 200px;
}
#service .box p {
font-family: sans-serif;
text-align: center;
}
#services {
margin: 34px;
display: flex;
}
#services .box {
padding: 100px;
margin: 3px 6px;
border-radius: 28px;
}
#services .box img {
margin-top: 10px;
height: 150px;
margin: auto;
display: block;
border-radius: 100px;
}
#services .box p {
font-family: sans-serif;
text-align: center;
}
.btn {
padding: 8px 20px;
margin: 7px 0;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
}
.btn-sm {
padding: 6px 10px;
vertical-align: middle;
}
.center {
text-align: center;
}
.text-footer {
text-align: center;
padding: 10px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
Después de combinar las dos secciones de código anteriores, crea la página Acerca de nosotros.
Producción:
Publicación traducida automáticamente
Artículo escrito por codingbeast12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA