This commit is contained in:
Marcos Lopez 2023-12-13 13:48:34 +01:00
parent d4364785fc
commit e876481b58
4 changed files with 78 additions and 25 deletions

Binary file not shown.

View File

@ -8,6 +8,10 @@
outline: none;
}
html{
scroll-behavior: smooth;
}
body {
background-image: url("../imagenes/fondo_plano.jpg");
background-repeat: no-repeat;
@ -15,27 +19,44 @@ body {
font-family: Arial, Helvetica, sans-serif;
}
nav{
#cabecera {
position: sticky;
top: 0;
background-color: white;
padding:1em;
display: flex;
align-items: end;
justify-content: space-between;
}
#cabecera img {
width: 60px;
height: 60px;
}
/* nav {
position: sticky;
top: 0;
width: 100%;
background-color: white;
}
} */
nav hr {
box-shadow:0px 4px 5px 0px;
box-shadow: 0px 4px 5px 0px;
}
main{
main {
padding: 1em;
}
#servicios,#productos,#contacto{
padding-top: 70px;
#servicios,
#productos,
#contacto {
padding-top: 100px;
margin-top: -20px;
}
.menu{
.menu {
padding-left: 1em;
}
@ -45,7 +66,6 @@ main{
font-size: 40px;
}
hr {
width: 100%;
background-color: #1a89dc;
@ -53,7 +73,9 @@ hr {
margin-left: 0px;
}
h2,h3,p {
h2,
h3,
p {
padding: 1em;
}
@ -92,23 +114,23 @@ ul {
margin: auto;
font-weight: bold;
}
li{
list-style-type:circle;
li {
list-style-type: circle;
}
span{
span {
color: #1a89dc;
width: 300px;
}
iframe{
iframe {
width: 100%;
border: 2px solid #1a89dc;
box-sizing: border-box;
}
#subircaja{
#subircaja {
position: fixed;
right: 10px;
bottom: 10px;
@ -116,4 +138,30 @@ iframe{
#subirimg {
width: 64px;
height: 64px;
}
}
.lista_menu {
/* display: inline; */
width: 100%;
}
.lista_menu li {
list-style-type: none;
float: left;
}
@media (max-width: 550px) {
.lista_menu li {
list-style-type: square;
text-align: left;
clear: left;
}
.boton_menu {
font-size: 1em;
}
#servicios,
#productos,
#contacto {
padding-top: 120px;
margin-top: -60px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -9,15 +9,20 @@
</head>
<body id="home">
<nav>
<div class="menu">
<a class="boton_menu" href="#home">Inicio</a>
<a class="boton_menu" href="#servicios">Servicios</a>
<a class="boton_menu" href="#productos">Productos</a>
<a class="boton_menu" href="#contacto">Contactos</a>
</div>
<hr>
</nav>
<header id="cabecera">
<img src="./imagenes/logo.png" alt="Logo">
<nav>
<div class="menu">
<ul class="lista_menu">
<li><a class="boton_menu" href="#home">Inicio</a></li>
<li><a class="boton_menu" href="#servicios">Servicios</a></li>
<li><a class="boton_menu" href="#productos">Productos</a></li>
<li><a class="boton_menu" href="#contacto">Contactos</a></li>
</ul>
</div>
<hr>
</nav>
</header>
<main>
<h2>Presentación</h2>