Solution: Luis Molina y Corina Pérez Figuera

css/style.css

@@ -0,0 +1,258 @@
+/* Font family */
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+:root{
+    --bg-color: #FFFFFF;
+    --secondary-color: #E89119;
+    --primary-color: #2EC4B6;
+    --details-blue: #BEEEE9;
+    --details-orange: #FFBF69;
+    --warning:#AE2012;
+    --disabled:#C4C4C4;
+}
+
+/* if delete method commes error or success */
+body{
+    position:relative;
+    font-family: 'Roboto', sans-serif;
+}
+#statusMessage{
+    position:absolute;
+    top:100px;
+    right:20px;
+}
+.alert-success p{
+    margin:0;
+}
+
+/*NavBar*/
+.welcome{
+    display: flex;
+    height: 40px;
+    line-height: 40px;
+    overflow: hidden;
+    justify-content: center;
+    margin: 2vh;
+}
+picture{
+    display: flex;
+    align-items: center;
+
+}
+
+#logoImg{
+    width: 45px;
+    border-radius: 50px;
+    margin: 15px;
+}
+#logoP{
+    color: var(--bg-color);
+    font-weight: bold;
+    font-size: 2em;
+    margin-top: 1.5vh;
+}
+.menuBlue{
+    background-color: var(--primary-color);
+    height: 7vh;
+}
+
+.nav-link{
+    margin-top: 2.7vh;
+    color: var(--bg-color);
+}
+
+.nav-link:hover{
+    color: var(--details-orange);
+}
+
+.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
+    background-color: var(--details-blue);
+    border-color: var(--details-blue);
+    color: var(--primary-color);
+    font-weight: bold;
+}
+
+.welcome ul{
+    list-style: none;
+    margin: 0;
+    animation: change 6s infinite;
+}
+
+.welcome ul, h1{
+    color: var(--secondary-color);
+    font-size: 30px;
+    margin:0;
+    font-weight: bold;
+    align-items: center;
+}
+
+@keyframes change{
+    0%{ margin-top: 0;}
+    20%{ margin-top: 0;}
+
+    25%{ margin-top: -40px;}
+    50%{ margin-top: -40px;}
+
+    55%{ margin-top: -80px;}
+    80%{ margin-top: -80px;}
+
+    85%{ margin-top: -40px;}
+    95%{ margin-top: -40px;}
+
+    100%{margin-top: 0;}
+}
+
+/*Container body posts main*/
+/* @media only screen and (max-width: 600px) {
+
+    .sectionMain > .row {
+        background-color: var(--secondary-color);
+    }
+} */
+
+/* MODAL POST */
+#post-header{
+    background-color:var(--primary-color);
+}
+.modalPost{
+    max-width:920px;
+}
+.head-icons{
+    width:20px;
+    cursor:pointer;
+    transition:0.5s;
+    color:var(--bg-color)
+}
+.head-icons:nth-child(2n){
+    margin-left:10px;
+}
+#trash{
+    margin-left:20px;
+    width:16px;
+}
+.photoPostContainer{
+    max-width:450px;
+    max-height: 300px;
+    overflow: hidden;
+
+}
+#photoTitle{
+    object-fit: fill;
+}
+.fa-user,.fa-envelope,.fa-comments{
+    margin-right:5px;
+    padding:8px;
+}
+#infoUser{
+    color:var(--secondary-color);
+}
+
+.fa-arrow-right, .fa-arrow-left{
+    cursor:pointer;
+}
+
+#description{
+    margin-top: 20px;
+    font-size: 20px;
+}
+/* COMMENTS */
+#commentSection{
+    color:var(--secondary-color);
+    margin-bottom: 10px;
+}
+.loadComments{
+    background-color:var(--secondary-color);
+    color:white;
+    border:none;
+    border-radius: 10px;
+    padding: 10px;
+
+}
+.bodyComment{
+    color:black;
+    border-left:2px solid black;
+}
+/* DELETE MODAL */
+.modalDelte{
+    max-width:500px;
+}
+#exampleModalToggle3 h1{
+    color:black;
+}
+.fa-exclamation-triangle::before {
+    color:var(--warning);
+    display:block;
+    width:106px !important;
+}
+#deleteButton{
+    color:var(--bg-color);
+    background-color:var(--warning);
+}
+#cancelButton{
+    background-color: var(--disabled);
+    color:var(--bg-color);
+}
+#cancelButton,#deleteButton{
+    border-radius:30px;
+    border:none;
+    width:80px;
+    height: 40px;
+}
+
+
+.row{
+    height: 50%;
+}
+
+.sectionMain>.row{
+    height: 38vh;
+}
+
+.divPost{
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    background-size: cover;
+    background-repeat: no-repeat;
+    margin: 5px;
+}
+
+
+.divPostDetail{
+    background-color: var(--bg-color);
+    width:auto;
+    height: auto;
+    padding: 5%;
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+.titlePost{
+    font-size: 1em;
+}
+
+/*Comments style*/
+.commentsContainer{
+    text-align: justify;
+    margin-top: 2vh;
+}
+.titleComment{
+    font-weight: bold;
+    text-transform: capitalize;
+    margin-bottom: 1vh;
+}
+.comment{
+    color: var(--secondary-color);
+}
+.photoComment{
+    width:60px;
+    height:60px;
+    border-radius:50px;
+    object-fit: cover;
+}
+
+/*Modal Edit*/
+#aceptEditBtn{
+    background-color: var(--secondary-color);
+    border: none;
+}