Add files via upload

vmbarbosa · May 30, 2021 · f021340 · f021340
1 parent 0cff6bf
commit f021340
Show file tree

Hide file tree

Showing 14 changed files with 628 additions and 254 deletions.
diff --git a/css/estilos-foro.css b/css/estilos-foro.css
@@ -1,8 +1,10 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
 *{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
- font-family: Roboto;
+ font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: normal;
 }
@@ -17,63 +19,127 @@
 
 nav{
  justify-content: right;
- text-align: right;
- position: absolute;
+ text-align: center;
+ position: fixed;
  width: 100%;
  height: 68px;
  left: 0px;
  top: 0px;
  background: #5465FF;
- display: flex;
+
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
+ z-index: 1;
+}
+
+
+.menunav{
+ float:right;
+ margin-left:25%;
+ height:100%;
+ display: block;
+}
+.menunav :first-child{
+ border-left:none;
+}
+.menunav > a{
+ display: inline-block;
+ color:white;
+ font-size: 22px;
+ margin-top: 20px;
+ padding-top: 10px;
+ padding-left:5px;
+ border-left-width: 1px;
+ border-left-color:#9CA9FF;
+ border-style: solid;
+ border-top: none;
+ border-right: none;
+ border-bottom: none;
+} 
+.menunav > a:hover{
+ cursor: pointer;
+ color: rgb(223, 223, 223);
+ text-decoration: underline;
 }
 
+.usernav{
+ margin-left: 32%;
+ position: relative;
+}
 .header{
  width: 100%;
  height: 40px;
  background: rgb(84, 101, 255);
 }
 
-
+.seccizq{
+ float:left;
+ width: 25%;
+ border-right-width: 1px;
+ border-right-color:#9CA9FF;
+ border-style: solid;
+ border-top: none;
+ border-left: none;
+ border-bottom: none;
+}
+.seccder{
+ float:right;
+ width: 75%;
+}
 .inputs {
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
  background: #F0F1FD;
  border-bottom-color: #9CA9FF;
- width: 380px;
- height: 45px;
- margin-left: 25px;
- margin-right: 25px;
- margin-top: 10px;
+ border-bottom-width: 3px;
+ width: 545px;
+ height: 40px;
  color:#0C090A;
- font-size: 18px;
+ font-size: 19px;
  padding-left: 5px;
- padding-top: 10px;
+ padding-top: 5px;
+}
+.usuario:focus-within .inputs {
+ border-bottom-color: #5465FF;
+}
+
+.usuario:focus-within label {
+ color: #5465FF;
 }
 
 .categoriaLista{
  display: flex;
  flex-direction: column;
- padding-top: 160px;
- padding-left: 8%;
- width: 29%;
- height: 0px;
+ padding-top: 100px;
+ padding-left: 15%;
+ width: 100%;
+ height: 100%;
  color: rgb(84, 101, 255);
+ border: 1px;
+ border-right: #5465FF;
+ border-right-width: 2px;
 }
 
 
 .usuario{
- padding-top: 151px;
- padding-left: 5%;
+ display: flex;
+ flex-direction: row;
+ padding-top: 100px;
+ margin-left: 75px;
+ width: 650px;
+ align-items: center;
 }
 
-.botones{
- padding-top: 30px;
- margin-left: 0%;
+.usuario .iconify{
+ margin-left: 2.5px;
+ margin-right: 2.5px;
+}
+.padre{
+ margin-left:5px;
+ margin-right: 5px;
+ width: 545px;
 }
-
 .boton1{
  padding-top: 5px;
  padding-left: 7px;
@@ -102,47 +168,102 @@ nav{
 
 .Seleccion{
  display: flex;
- flex-direction: row;
 }
 
 .categoriaLista .categorias{
- display: block;
- width: 55%;
+ display: flex;
+ width: 100%;
+ height: 50px;
  padding-top: 4px 0;
- margin-bottom: 20px;
- margin-left: 40px;
- text-align: center;
+ text-align: left;
  text-decoration: none;
  color: rgb(84, 101, 255);
+ font-size: 22px;
+ padding-left: 5px;
+ align-items: center;
+}
+.categoriaLista .categorias:hover{
+ background-color:#e0e4ff;
+ border: 1px;
 }
-
 .categoriaLista .categoria{
  display: block;
  width: 55%;
  padding-top: 4px 0;
- margin-bottom: 20px;
  margin-left: 40px;
  background: #BFD7FF;
  text-align: center;
  text-decoration: none;
  color: rgb(84, 101, 255);
+ align-items: center;
 }
 
-.box{
+.post{
+ margin-left: 75px;
  margin-top: 55px;
- margin-left: 30%;
- width: 600px;
- height: 250px;
+ width: 650px;
+ height: 260px;
  background: #F0F1FD;
  box-shadow: 0 3px 4px -2px rgba(0, 0, 0, .5);
 }
 
+.left{
+ float: left;
+ width: 55%;
+
+}
+.right{
+ float: right;
+ width: 45%;
+
+}
+.content{
+ border-right-width: 1px;
+ border-right-color:#9CA9FF;
+ border-style: solid;
+ border-top: none;
+ border-left: none;
+ border-bottom: none;
+}
+
+.comment{
+ width: 80%;
+ margin-top:20px;
+ margin-left:30px;
+ height: 20%;
+ border-bottom-width: 1px;
+ border-bottom-color:#9CA9FF;
+ border-style: solid;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+
+}
+.opinion{
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+.username{
+ color: #5465FF;
+ align-items: center;
+ display: flex;
+}
+.uwu{
+ padding-left: 5px;
+}
+.username:hover{
+ cursor: pointer;
+ color: #2b379c;
+}
 .name{
  padding-top: 15px;
  padding-left: 50px;
  color:rgb(84, 101, 255)
 }
-
+.name:hover{
+ cursor: pointer;
+ color: #2b379c;
+}
 .parrafo1{
  padding-top: 5px;
  padding-left: 50px;
@@ -152,8 +273,25 @@ nav{
  display: flex;
  padding-top: 5px;
  padding-left: 50px;
- width: 100%;
+ width: 90%;
  height: 155px;
+ overflow: hidden;
+}
+
+.img1 > img{
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.img1:hover{
+ cursor: pointer;
+
+}
+.img1 > img:hover{
+ cursor: pointer;
+ filter: brightness(0.8);
 }
 
 .comentario{
@@ -165,16 +303,20 @@ nav{
 
 .location{
  text-align: center;
- padding-top: 45px;
- padding-left: 30px;
+
+ padding-left: 50px;
 }
 
 .user{
  padding-top: 4px;
- padding-left: 1207px;
+ float:right;
 }
 
 .fecha{
  padding-left: 60px;
  color: rgb(90, 90, 90);
+}
+
+.iconify:hover{
+ cursor: pointer;
 }