Posicionamiento de elementos

itskenshin · Aug 28, 2022 · 9d3fc3c · 9d3fc3c
1 parent 1bdf639
commit 9d3fc3c
Show file tree

Hide file tree

Showing 10 changed files with 385 additions and 465 deletions.
diff --git a/composer.json b/composer.json
diff --git a/index.html b/index.html
diff --git a/pages/#seVan.html b/pages/#seVan.html
diff --git a/pages/blog.html b/pages/blog.html
diff --git a/pages/git.html b/pages/git.html
diff --git a/pages/recursos.html b/pages/recursos.html
diff --git a/styles/Git-Github-style.css b/styles/Git-Github-style.css
diff --git a/styles/estilos.css b/styles/estilos.css
@@ -11,28 +11,48 @@ body {
 
 .main {
   display: grid;
-  grid-template: "nav nav nav" 100px "content content aside" auto "footer footer footer" 200px/1fr 1fr 400px;
+  grid-template: "nav nav nav" 100px "content content aside" auto "footer footer footer" 200px/1fr 1fr 480px;
 }
 
 .navbar {
   grid-area: nav;
   background-color: white;
   padding: 10px;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  align-self: center;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: "image ul ul";
+  align-content: space-between;
+}
+.navbar img {
+  grid-area: image;
 }
 .navbar ul {
+  grid-area: ul;
   list-style-type: none;
+  border-radius: 5px;
 }
 .navbar ul li {
   display: inline-block;
   padding: 10px;
+  margin: 0px 5px 0px 5px;
+}
+.navbar ul li :hover {
+  background-color: #D61F51;
+  border-radius: 5px;
+  color: white;
+  padding: 10px;
+  transition: all 400ms;
 }
 .navbar ul li a {
   text-decoration: none;
 }
+.navbar ul .blog {
+  background-color: #D61F51;
+  border-radius: 5px;
+}
+.navbar ul .blog a {
+  color: white;
+}
 
 .content {
   grid-area: content;
@@ -47,25 +67,57 @@ body {
   color: white;
   padding-left: 200px;
   align-items: center;
+  text-shadow: 0px 0px 5px black;
 }
 .content section {
   padding: 10px 50px 10px 200px;
 }
 
 .aside {
   grid-area: aside;
-  padding: 5px;
-  background-color: #CED6D9;
+  padding: 20px;
+  background-color: #e6e2e2;
   position: -webkit-sticky;
   position: sticky;
-  height: 400px;
-  margin-right: 200px;
-  top: 20px;
+  height: 410px;
+  margin: 80px 200px 0px 0px;
+  top: 50px;
   z-index: 2;
   border-radius: 10px;
+  display: grid;
+  grid-template-rows: 190px 20px;
+  box-shadow: 0px 3px 5px black;
+}
+.aside a {
+  text-decoration: none;
+  color: black;
+}
+.aside h3 {
+  text-align: center;
+  color: rgb(49, 49, 49);
+}
+.aside h3 :hover {
+  color: rgb(0, 0, 0);
+  transition: all 400ms;
 }
 .aside ul {
+  display: flex;
+  flex-direction: column;
   list-style-type: none;
+  padding: 0;
+  justify-content: center;
+}
+.aside ul li {
+  padding: 10px;
+}
+.aside ul li :hover {
+  background-color: #979797;
+  border-radius: 5px;
+  padding: 10px;
+  width: 100%;
+  color: white;
+  margin: 0px 2px 0px 2px;
+  transition: all 400ms;
 }
 
 .footer {

diff --git a/styles/estilos.css.map b/styles/estilos.css.map