Dia 15

Practicas/Practicas HTML/Repaso/css/style.css

@@ -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;
+  }
+}