index.scss

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed&display=swap');

$header_footer_color: hsl(25, 100%, 50%);
$theme_color: hsl(50, 100%, 80%);
$header_height: 10rem;
$header-margin: -1rem  -1.5rem 0 -1.5rem;

* {
    background-color: black;
}

#header {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
   background-color: $header_footer_color;
   height: $header_height;
   margin: $header-margin;

   #header-name {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 40%;
      background-color: $header_footer_color;
      img {
         width: 30rem;
         height: 5rem;
         margin: {
            top: 1rem;
            bottom: 1rem;
         }
         animation: slidein 2s ease-out;
      }
   }

   .nav-bar {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      background-color: $header_footer_color;
      width: 50%;
      a {  
         color: white;
         font-family: 'Bebas Neue', cursive;
         background-color: $header_footer_color;
         font-size: 1.5rem;
         text-decoration: none;
         transition: all 0.5s ease-out;
         h2 {
            background-color: $header_footer_color;
         }
      }

      a:hover {
         color: $theme_color;
         font-size: 1.75rem;
      }
   }
}


@keyframes slidein {
    0% {
        margin-right: 100rem;
    }

    100% {
        margin-right: 0rem;
    }
}

#front-page-photo {
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
   img {
      width: 70rem;
      height: 50rem;
      margin: {
         top: 3rem;
         bottom: 1rem;
      }
      border-radius: 5%;
   }

   .mobile {
      display: none;
      width: 20rem;
      height: 22rem;
      margin-top: 3rem;
      margin-bottom: 1rem;
      border-radius: 5%;
   }    
}

#title-header {
   display: flex;
   flex-direction: row;
   justify-content: center;
   h2 {
      font-family: 'Bebas Neue', cursive;
      font-size: 2rem;
      color: $theme-color;
   }

   .mobile {
      display: none;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.5rem;
      color: hsl(50, 100%, 80%);
      margin-top: 1rem;
      margin-bottom: 1rem;
   }
}

#about-me {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   background-color: $theme-color;
   margin: 0  -1.5rem 0 -1.5rem;
   #about-me-photo {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: $theme-color;
      img {
          width: 23rem;
          height: 24rem;
          margin: 2rem 0;
          border-radius: 5%;
      }
   }

   #about-me-text {
      background-color: $theme-color;
      width: 50%;
      #about-me-title {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         background-color: $theme-color;
         img {
            width: 25rem;
            height: 5rem;
            margin-top: 40px;
         }
      }

      p {
         background-color: $theme-color;
         font-size: 18pt;
         width: 100%;
         font-family: 'Asap Condensed', sans-serif;
         line-height: 1.5;
         text-align: justify;
      }    
   }
}

#blogs-section {
   #blogs-title {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      img {
         width: 20rem;
         height: 6rem;
         margin-left: 6rem;
         margin-top: 1rem;
         margin-bottom: 1rem;
      }
   }

   #blogs-container {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      .blog {
         display: flex;
         flex-direction: row;
         justify-content: space-evenly;
         align-items: center;
         border-color: $theme-color;
         border-style: solid;
         width: 60%;
         margin-bottom: 2rem;
         border-radius: 5%;
         .blog-photo {
            width: 20rem;
            height: 20rem;
            margin: 2rem;
            border-radius: 5%;
            transition: all 0.5s ease-out;
         }

         .blog-photo:hover {
            width: 22rem;
            height: 22rem;
            margin: 1rem;
         }

         .blog-title {
            color: white;
            width: 20rem;
            font-size: 24pt;
            font-family: 'Asap Condensed', sans-serif;
         }
      } 
   }
}

#footer {
   display: flex;
   flex-direction: row;
   background-color: $header_footer_color;
   margin: 0  -1.5rem -15rem -1.5rem;
   .nav-bar {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      width: 50%;
      background-color: $header_footer_color;
      h1 {
         color: white;
         background-color: $header_footer_color;
         margin-top: 2rem;
         margin-left: 3rem;
         font-family: 'Asap Condensed', sans-serif;
         font-size: 2rem;
      }

      i {
         color: white;
         background-color: $header_footer_color;
         margin-top: 2rem;
         margin-left: 2rem;
         margin-right: 2rem;
         font-size: 2rem;
      }

      #footer-nav-links {
         margin-left: 1rem;
         a {
            background-color: $header_footer_color;
            text-decoration: none;
            color: white;
            transition: all 0.5s ease-out;
         }

         a:hover {
            font-size: 2.5rem;
         }
      }    
   }

   #contact {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      width: 50%;
      background-color: $header_footer_color;
      #contact-photo {
         background-color: $header_footer_color;
         img {
            width: 10rem;
            margin: 2rem 2rem 2rem 5rem;
            background-color: $header_footer_color;
            border-radius: 5%;
         }
      }

      #contact-info {
         background-color: $header_footer_color;
         h1 {
            color: white;
            padding: 1rem 0;
            margin-bottom: 0;
            font-family: 'Asap Condensed', sans-serif;
            background-color: $header_footer_color;
         }

         #footer-email {
            margin-top: 0;
         }

         #contact-links {
            display: flex;
            flex-direction: row;
            background-color: $header_footer_color;
            margin-right: 3rem;
            a {
               background-color: $header_footer_color;
               i {
                  color: white;
                  background-color: $header_footer_color;
                  font-size: 3rem;
                  padding-right: 2rem;
                  padding-top: 1rem;
                  transition: all 0.5s ease-out;
               }

               i:hover {
                  color: black;
               }
            }
         }
      }
   }
}

@media only screen and (max-width: 1300px) and (min-width: 1000px) {
    #blogs-section {
       #blogs-container {
          .blog {
             border-style: none;
          }
       }
    }

    #footer {
       .nav-bar {
          h1:first-child {
             display: none;
          }

          i {
             display: none;
          }
       }    
    }
}

@media only screen and (max-width: 1000px) and (min-width: 700px) {
    #header {
       display: flex;
       flex-direction: column;
       height: 12rem;
       #header-name {
          width: 60%;
          img {
             margin-top: 2rem;
             margin-bottom: 0;
          }
       }
       .nav-bar {
          justify-content: space-evenly;
          width: 100%;
          a { 
             font-size: 1.2rem;
          }
          a:hover {
             font-size: 1.5rem;
          } 
       } 
    }

    #front-page-photo {
       img {
          width: 40rem;
          height: 30rem;
       }
    }

    #title-header {
       h2 {
          font-size: 1.5rem;
       } 
    }

    #about-me {
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       align-items: center;
       #about-me-text {
          width: 80%; 
          #about-me-title {
             justify-content: center;
             img {
                margin-top: 0;
             }    
          }   
       }
    }

    #blogs-section {
       #blogs-title {
          justify-content: center;
          img {
             margin-left: 0;
          }
       }
       #blogs-container {
          .blog {
             border-style: none;
             flex-direction: column;
             .blog-title {
                margin-top: 0;
             }
          }
       }
    }

    #footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .nav-bar {
           width: 80%; 
           h1:first-child {
              display: none;
           }
 
           i {
              display: none;
           }
        }
        #contact {
           display: flex;
           flex-direction: row;
           justify-content: center;
        }    
    }
}

@media only screen and (max-width: 700px) and (min-width: 400px) {
    #header {
       display: flex;
       flex-direction: column;
       height: 12rem;
       width: 115%;
       #header-name {
          width: 60%;
          img {
             width: 25rem;
             height: 4rem; 
             margin-top: 2rem;
             margin-bottom: 0;
          }
       }
       .nav-bar {
          justify-content: space-evenly;
          width: 100%;
          a { 
             font-size: 1.2rem;
          }
          a:hover {
             font-size: 1.5rem;
          } 
       } 
    }

    #front-page-photo {
       img {
          display: none
       }

       .mobile {
           display: block
       }
    }

    #title-header {
       h2 {
          font-size: 1.2rem;
       } 
    }

    #about-me {
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       align-items: center;
       #about-me-text {
          width: 80%; 
          #about-me-title {
             justify-content: center;
             img {
                margin-top: 0;
             }    
          }   
       }
    }

    #blogs-section {
       #blogs-title {
          justify-content: center;
          img {
             margin-left: 0;
          }
       }
       #blogs-container {
          .blog {
             border-style: none;
             flex-direction: column;
             .blog-title {
                margin-top: 0;
             }
          }
       }
    }

    #footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .nav-bar {
           width: 60%;
           h1:first-child {
              display: none;
           }
 
           i {
              display: none;
           }

           #footer-nav-links {
              font-size: 1.5rem;
   
              a:hover {
                 font-size: 2rem;
              }
           }  
        }
        #contact {
           display: flex;
           flex-direction: row;
           justify-content: center;
        }    
    }
}

@media only screen and (max-width: 400px) {
    #header {
       display: flex;
       flex-direction: column;
       height: 12rem;
       width: 115%;
       #header-name {
          width: 60%;
          img {
             width: 20rem;
             height: 4rem; 
             margin-top: 2rem;
             margin-bottom: 0;
          }
       }
       .nav-bar {
          justify-content: space-evenly;
          width: 100%;
          a { 
             font-size: 1rem;
          }
          a:hover {
             font-size: 1.2rem;
          } 
       } 
    }

    #front-page-photo {
       img {
          display: none
       }

       .mobile {
           display: block;
        //    width: 16rem;
        //    height: 17rem;
           margin-top: 2rem;
           margin-bottom: 1rem;
           border-radius: 5%;
       }
    }

    #title-header {
       h2 {
          display: none;
       }
       
       .mobile {
           display: block;
       }
    }

    #about-me {
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       align-items: center;
       #about-me-photo {
          img {
            width: 18rem;
            height: 18rem;
          } 
       }
       #about-me-text {
          width: 80%; 
          #about-me-title {
             justify-content: center;
             img {
                width: 20rem;
                height: 5rem;
                margin-top: 0;
             }    
          }
          p {
            font-size: 15pt;
          }   
       }
    }

    #blogs-section {
       #blogs-title {
          justify-content: center;
          img {
             width: 20rem;
             height: 5rem; 
             margin-left: 0;
          }
       }
       #blogs-container {
          .blog {
             border-style: none;
             flex-direction: column;
             .blog-title {
                margin-top: 0;
             }
          }
       }
    }

    #footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .nav-bar {
           width: 80%;
           h1:first-child {
              display: none;
           }
 
           i {
              display: none;
           }

           #footer-nav-links {
              font-size: 1.2rem;
              a:hover {
                 font-size: 1.5rem;
              }
           }  
        }
        #contact {
           display: flex;
           flex-direction: column;
           justify-content: center;
           #contact-photo {
               display: flex;
               flex-direction: row;
               justify-content: center;
               img {
                  width: 15rem;
                  height: 16rem;
                  margin: 0;
                  margin-top: 2rem;
               }
           }
           #contact-links {
               margin-bottom: 3rem;
           }
        }    
    }
}