3
\$\begingroup\$

Hello I've just finished coding one of my first websites. And I would love some feedback. I know that I really need to improve my design and improve my code and for that I need some tips from you guys

The webiste (hosted on github.io) can be viewed here, and the code itself is also available on Github.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  background-color: #EBEBEB;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 576px) {
  .container {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 540px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
    padding: 30px 20px;
  }
}

@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 112.5em) {
  .container {
    max-width: 1440px;
  }
}

section {
  padding: 80px 0;
}

@media (max-width: 1200px) {
  section {
    padding: 50px 0;
  }
}

.section-header {
  font-size: 48px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
  scroll-margin-top: 1rem;
}

@media (max-width: 1200px) {
  .section-header {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .section-header {
    font-size: 26px;
    text-align: center;
  }
}

@media (max-width: 992px) {
  .section-header {
    text-align: center;
  }
}

.header__logo {
  font-size: 20px;
  font-weight: bold;
}

.header__logo span {
  color: black;
  font-family: 'Righteous', cursive;
}

.header__logo-link {
  color: #810a51;
}

.header__link {
  font-size: 17px;
  font-weight: 500;
  color: #000000;
}

.hamburger {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: inline-block;
  }
}

.hamburger__wrapper {
  width: 30px;
  height: 100%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 200;
}

.hamburger__bar {
  width: 100%;
  height: 4px;
  background-color: black;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.hamburger__bar::before {
  top: -8px;
}

.hamburger__bar::after {
  top: 8px;
}

.hamburger__bar::before, .hamburger__bar::after {
  content: '';
  width: 100%;
  height: 4px;
  background-color: black;
  position: absolute;
  left: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.hamburger__nav {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  right: 0;
  top: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all .4s;
  transition: all .4s;
}

@media (max-width: 576px) {
  .hamburger__nav {
    width: 100%;
  }
}

.hamburger__menu {
  list-style: none;
  margin-top: 150px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.hamburger__link {
  font-size: 25px;
  font-weight: 500;
  color: #000000;
  margin-top: 30px;
  border-bottom: 1px solid black;
  width: 100%;
  display: inline-block;
}

.hamburger__link:active .hamburger__nav {
  display: none;
}

.hamburger__checkbox {
  display: none;
}

.hamburger__checkbox:checked ~ .hamburger__nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hamburger__checkbox:checked + .hamburger__wrapper .hamburger__bar::before {
  -webkit-transform: translatey(8px) rotate(45deg);
          transform: translatey(8px) rotate(45deg);
}

.hamburger__checkbox:checked + .hamburger__wrapper .hamburger__bar::after {
  -webkit-transform: translatey(-8px) rotate(-45deg);
          transform: translatey(-8px) rotate(-45deg);
}

.hamburger__checkbox:checked + .hamburger__wrapper .hamburger__bar {
  background: transparent;
}

.header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 10vh;
}

@media (max-width: 768px) {
  .header .container {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #EBEBEB;
    z-index: 100;
    height: 5vh;
  }
}

.header__logo {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.header__logo-link {
  margin-left: 10px;
  display: inline-block;
}

.header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
}

@media (max-width: 768px) {
  .header__menu {
    display: none;
  }
}

.header__link {
  position: relative;
}

.header__link::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #810a51;
  left: 0;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.header__link:hover::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.header__socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 992px) {
  .header__socials {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (max-width: 768px) {
  .header__insta {
    display: none;
  }
}

nav, .header__socials {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (max-width: 1200px) {
  nav, .header__socials {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
  }
}

.landing-page .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 90vh;
}

@media (max-width: 768px) {
  .landing-page .container {
    margin-top: 10vh;
  }
}

@media (max-width: 992px) {
  .landing-page .container {
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 576px) {
  .landing-page .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    height: 90vh;
  }
}

.plant {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
}

.plant__tree {
  display: none;
}

.plant__thin {
  width: 80%;
}

@media (max-width: 1200px) {
  .plant__thin {
    display: none;
  }
}

@media (min-width: 112.5em) {
  .plant__thin {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .plant {
    height: auto;
  }
  .plant__tree {
    display: block;
  }
}

@media (max-width: 576px) {
  .info {
    text-align: center;
    margin-bottom: 40px;
  }
}

.info__header {
  font-size: 32px;
  font-weight: 500;
}

@media (max-width: 576px) {
  .info__header {
    font-size: 26px;
  }
}

.info__header span {
  color: #810a51;
}

.info__hr {
  border: 2px solid black;
  width: 225px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .info__hr {
    margin: 20px auto 0;
    border-width: 1px;
  }
}

.info__desc {
  font-size: 16px;
  margin-top: 20px;
}

.info__button {
  display: inline-block;
  border: solid 2px #810a51;
  padding: 18px 52px;
  background-color: #810a51;
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-top: 38px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: 5px;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 992px) {
  .info__button {
    padding: 9px 26px;
  }
}

.info__button:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.info__button:active {
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

.about {
  background-color: white;
}

.about__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .about__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.about__desc {
  font-size: 16px;
}

@media (max-width: 992px) {
  .about__desc {
    text-align: center;
  }
}

.about__desc:not(:first-child) {
  font-size: 16px;
  margin-top: 25px;
}

@media (max-width: 576px) {
  .about__desc {
    width: 100%;
  }
}

.about__desc--bold {
  font-weight: 500;
}

.about__hr {
  height: 3px;
  background-color: black;
  border: none;
  margin-top: 20px;
}

@media (max-width: 992px) {
  .about__hr {
    display: none;
  }
}

.about__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.about__img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 992px) {
  .about__img {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.about__img img:last-child {
  display: none;
}

@media (max-width: 1200px) {
  .about__img img:last-child {
    display: block;
  }
}

@media (max-width: 576px) {
  .about__img img:last-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .about__img img:last-child {
    display: none;
  }
}

.about__img img:first-child {
  width: 75%;
}

@media (max-width: 1200px) {
  .about__img img:first-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .about__img img:first-child {
    display: inline-block;
    margin-top: 50px;
    width: 65%;
  }
}

@media (max-width: 576px) {
  .about__img img:first-child {
    display: none;
  }
}

.benefits-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.benefits-boxes {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

@media (min-width: 112.5em) {
  .benefits-boxes {
    width: 620px;
    height: 620px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px 300px;
        grid-template-columns: 300px 300px;
    grid-row: auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media (max-width: 1200px) {
  .benefits-boxes {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(250px, 1fr))[auto-fill];
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media (max-width: 992px) {
  .benefits-boxes {
    margin: 0 auto;
    width: 530px;
    height: 530px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 250px 250px;
        grid-template-columns: 250px 250px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media (max-width: 576px) {
  .benefits-boxes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.benefits-boxes__box {
  width: 250px;
  height: 250px;
  border-radius: 10px;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.benefits-boxes__box img {
  margin-bottom: 15px;
  width: 60px;
  height: 70px;
}

.benefits-boxes__box .img-switch-2 {
  display: none;
}

.benefits-boxes__box--black {
  background-color: #413D3D;
  color: #FFFFFF;
}

@media (min-width: 112.5em) {
  .benefits-boxes__box--switch-1 {
    background-color: #413D3D;
    color: #FFFFFF;
  }
  .benefits-boxes__box--switch-1 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-1 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 992px) {
  .benefits-boxes__box--switch-1 {
    background-color: #413D3D;
    color: #FFFFFF;
  }
  .benefits-boxes__box--switch-1 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-1 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 576px) {
  .benefits-boxes__box--switch-1 {
    background-color: white;
    color: black;
  }
  .benefits-boxes__box--switch-1 .img-switch {
    display: block;
  }
  .benefits-boxes__box--switch-1 .img-switch-2 {
    display: none;
  }
}

@media (min-width: 112.5em) {
  .benefits-boxes__box--switch-2 {
    background-color: white;
    color: black;
  }
  .benefits-boxes__box--switch-2 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-2 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 992px) {
  .benefits-boxes__box--switch-2 {
    background-color: white;
    color: black;
  }
  .benefits-boxes__box--switch-2 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-2 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 576px) {
  .benefits-boxes__box--switch-2 {
    background-color: #413D3D;
    color: #FFFFFF;
  }
  .benefits-boxes__box--switch-2 .img-switch {
    display: block;
  }
  .benefits-boxes__box--switch-2 .img-switch-2 {
    display: none;
  }
}

@media (min-width: 112.5em) {
  .benefits-boxes__box {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 1200px) {
  .benefits-boxes__box:last-child {
    margin-top: 25px;
  }
}

@media (max-width: 992px) {
  .benefits-boxes__box:last-child {
    margin-top: 0px;
  }
}

@media (max-width: 576px) {
  .benefits-boxes__box:not(:first-child) {
    margin-top: 20px;
  }
}

.benefits-boxes__title {
  font-size: 20px;
  font-weight: bold;
  position: relative;
}

.benefits-boxes__desc {
  font-size: 13px;
  font-weight: 300;
  margin-top: 10px;
}

.benefits-img {
  display: none;
}

@media (min-width: 112.5em) {
  .benefits-img {
    display: block;
  }
}

.ideas {
  background-color: white;
}

.ideas-box {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ideas-box__column {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ideas-box__column--1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 576px) {
  .ideas-box__column--1 {
    display: block;
  }
}

.ideas-box__column--2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 1200px) {
  .ideas-box__column--2 {
    display: none;
  }
}

.ideas-box__column--2 img {
  height: 80%;
}

.ideas-box__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 25px;
}

@media (max-width: 576px) {
  .ideas-box__left {
    margin-bottom: 35px;
    text-align: center;
  }
}

.ideas-box__right {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  padding-bottom: 25px;
}

.ideas-box__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.ideas-box__content:not(:first-child) {
  margin-top: 50px;
}

.ideas-box__circle {
  background-color: #810a51;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ideas-box__header {
  font-size: 25px;
  font-weight: 500;
}

@media (max-width: 576px) {
  .ideas-box__header {
    font-size: 21px;
  }
}

.ideas-box__title {
  width: 80%;
  font-size: 20px;
  font-weight: normal;
  margin-left: 10px;
  position: relative;
}

@media (max-width: 576px) {
  .ideas-box__title {
    font-size: 18px;
  }
}

.ideas-box__title::after {
  content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
  position: absolute;
  width: 100%;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 300;
  top: 100%;
  left: 0;
}

.ideas-box__desc {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
}

.ideas-box__wrapper {
  border-left: 1px solid black;
  padding-left: 25px;
}

@media (max-width: 576px) {
  .ideas-box__wrapper {
    border-left: none;
    padding-left: 0;
  }
}

.footer .container {
  padding-top: 80px;
  padding-bottom: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

@media (max-width: 1200px) {
  .footer .container {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 1200px) {
  .footer .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: (1fr)[2];
        grid-template-rows: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer .container {
    display: block;
  }
}

.footer__column {
  height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (max-width: 576px) {
  .footer__column:not(:first-child) {
    margin-top: 50px;
  }
}

.footer__column--first {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 2 / 2;
}

.footer__column--second {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 2 / 1 / 3 / 2;
}

.footer__column--third {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 3 / 3;
}

.footer__header {
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-bottom: 35px;
}

.footer__header--center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.footer__link {
  margin-left: 10px;
  display: inline-block;
  color: #810a51;
  font-weight: bold;
}

.footer__link span {
  color: black;
  font-family: 'Righteous', cursive;
}

.footer__desc {
  margin-bottom: 15px;
  font-size: 16px;
  color: #282828;
  width: 80%;
}

.footer__desc--bold {
  font-weight: 500;
}

.footer__link {
  margin-right: 30px;
}

.footer__input {
  margin-bottom: 25px;
  border: 1px solid #282828;
  background-color: transparent;
  width: 100%;
  padding: 5px;
  resize: none;
}

.footer__btn {
  font-weight: 500;
  font-size: 16px;
  background-color: #810a51;
  color: white;
  border: none;
  width: 100%;
  padding: 12px;
  border-radius: 15px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
}

.footer__btn:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.footer__btn:active {
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

.footer__rights {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  font-weight: 500;
  font-size: 16px;
  color: #DADADA;
  background-color: #323131;
  top: 100%;
  left: 0;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="sass/main.css">
        <title>Minihouse</title>
        <link rel="icon" type="img/png" sizes="16x16" href="img/favicon-16x16.png">
    </head>
    <body>

    <header class='header'>
        <div class="container">
            <div class="header__logo">
                <img src="img/logo.svg" alt="logo">
                <a class="header__logo-link" href="#header">Mini<span>house</span></a>
            </div>
            <nav>
                <ul class="header__menu">
                    <li><a href="#about" class="header__link">about</a></li>
                    <li><a href="#benefits" class="header__link">benefits</a></li>
                    <li><a href="#ideas" class="header__link">ideas</a></li>
                </ul>
            </nav>
            <div class="header__socials">
                <a href="https://www.instagram.com/" target="_blank" class="header__insta">
                    <img src="img/ig-header.png" alt="insta" >
                </a>
                <div class="hamburger">
                    <input type="checkbox" id="navi-toggle" class='hamburger__checkbox'>
                    <label class='hamburger__wrapper' for='navi-toggle'>
                        <span class='hamburger__bar'></span>
                    </label>  
                    <div class="hamburger__nav" id="hamburger__nav">
                        <ul class="hamburger__menu">
                            <li><a href="#about" class="hamburger__link">about</a></li>
                            <li><a href="#benefits" class="hamburger__link">benefits</a></li>
                            <li><a href="#ideas" class="hamburger__link">ideas</a></li>
                            <li><a href="#contact" class="hamburger__link">contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="landing-page">
        <div class="container">
            <div class="info">
                <h2 class="info__header">The beauty of <span>mini</span>malism</h2>
                <hr class="info__hr">
                <p class="info__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <a href="#about" class="info__button">Learn more</a>
            </div>
            <div class="plant">
                <img src="img/plant.png" alt="plant" class='plant__thin'>
                <img src="img/tree.png" alt="tree" class='plant__tree'>
            </div>
        </div>
    </div>   

    <section class="about" id='about'>
        <div class="container">
            <h2 class="section-header">About.</h2>
            <div class="about__wrapper">
                <div class="about__text">
                    <p class="about__desc about__desc--bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <p class="about__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat nesciunt eaque ab aliquid optio? Deserunt, cum reiciendis quasi, laborum blanditiis debitis inventore, maiores repudiandae saepe eveniet non nemo voluptate tempore?</p>
                    <p class="about__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat nesciunt eaque ab aliquid optio? Deserunt, cum reiciendis quasi, laborum blanditiis debitis inventore, maiores repudiandae saepe eveniet non nemo voluptate tempore?</p>
                    <hr class="about__hr">
                </div>
                <div class="about__img">
                    <img src="img/about-img.png" alt="clean room">
                    <img src="img/about-img-2.png" alt="alternative image of minimalism">
                </div>
            </div>
        </div>
    </section>

    <section class="benefits" id="benefits">
        <div class="container">
            <h2 class="section-header">Benefits.</h2>
            <div class="benefits-wrapper">
                <div class="benefits-boxes">
                    <div class="benefits-boxes__box benefits-boxes__box--black">
                        <img src="img/earth-outline.svg" alt="earth">
                        <p class="benefits-boxes__title">Good for the Environment</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                    <div class="benefits-boxes__box ">
                        <img src="img/brush-outline.svg" alt="clean">
                        <p class="benefits-boxes__title">Easier to Clean</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                    <div class="benefits-boxes__box benefits-boxes__box--black benefits-boxes__box--switch-2"> 
                        <img src="img/heart-outline.svg" alt="heart" class="img-switch">
                        <img src="img/heart-outline-black.svg" alt="heart" class="img-switch-2">
                        <p class="benefits-boxes__title">Less Stress</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                    <div class="benefits-boxes__box benefits-boxes__box--switch-1">
                        <img src="img/cash-outline.svg" alt="cash" class="img-switch">
                        <img src="img/cash-outline-white.svg" alt="cash" class="img-switch-2">
                        <p class="benefits-boxes__title">Spend Less</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                </div>
                <div class="benefits-img">
                    <img src="img/benefits.png" alt="wardrobe">
                </div>
            </div>
        </div>
    </section>
     
    <section class="ideas" id='ideas'>
        <div class="container">
            <h2 class="section-header">Ideas.</h2>
            <div class="ideas-box">
                <div class="ideas-box__column ideas-box__column--1">
                    <div class="ideas-box__left">
                        <h2 class="ideas-box__header">Inspire your self with those few ideas</h2>
                        <p class="ideas-box__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    </div>
                    <div class="ideas-box__right">
                        <div class="ideas-box__wrapper">
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Start with throwing out stuff you don’t need</h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Save money by buying less  </h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Sell clothes you don’t wear</h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Clean your house</h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Take a look at your PC and phone</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ideas-box__column ideas-box__column--2">
                    <img src="img/idea.png" alt="bulb">
                </div>
            </div>
        </div>
    </section>
            
        

        
        <footer class="footer" id='contact'>
            <div class="container">
                <div class="footer__column footer__column--first">
                    <div class="footer__header footer__header--center">
                        <img src="img/logo.svg" alt="logo">
                        <a class="footer__link" href="#header">Mini<span>house</span></a>
                    </div>
                    <p class="footer__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <p class="footer__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                <div class="footer__column footer__column--second">
                    <h2 class="footer__header">Follow us on social media</h2>
                    <a href="https://www.instagram.com/" target="_blank" class="footer__link">
                        <img src="img/ig-footer.png" alt="ig logo">
                    </a>
                    <a href="" target="_blank" class="footer__link">
                        <img src="img/fb-footer.png" alt="fb logo">
                    </a>
                    <a href="" target="_blank" class="footer__link">
                        <img src="img/tw-footer.png" alt="tw logo">
                    </a>
                </div>
                <div class="footer__column footer__column--third">
                    <h2 class="footer__header">Contact us</h2>
                    <p class="footer__desc--bold">E-mail</p>
                    <input type="text" class="footer__input">
                    <p class="footer__desc--bold">Message</p>
                    <textarea cols="30" rows="10" class="footer__input"></textarea>
                    <button class="footer__btn">Send</button>
                </div>
            </div>
        </footer>
        
        <div class="footer__rights">&copy; 2020 All Rights reserved.</div>

        <script src='script.js'></script>
    </body>
</html>

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

Well, there are a lot of things that come up to my mind but the first is that your CSS is overloaded with media queries. Ideally a well-structured CSS should have not so many declarations in the media queries, because you should choose a fluid approach from the beginning. You should choose also if using a desktop-first or mobile-first approach.

Your most important media-query breakpoint is for mobile devices; by now a mobile viewport does not exceed 500px while for a tablet this is set to 600px. For a desktop you can safely assume that you find nothing under 980px so your breakpoints could be for mobile-first:

  • Normal sytle --> Everything for mobile.
  • Breakpoint > 576px --> Rules for tablets
  • Breakpoint >= 980px --> Rules for small desktops
  • Breakpoint >= 1366px --> Rules for large desktops

This approach is more modern, mobile-oriented but not ideal for beginners. If you want to prioritise desktops you should write the queries following a reversed logic:

  • Normal sytle --> Everything for large desktops.
  • Breakpoint <= 1366px --> Rules for small desktops
  • Breakpoint <= 980px --> Rules for small tablets
  • Breakpoint <= 576px --> Rules for mobile

There are even better and more efficient approaches to media-queries but, in my opinion, are not well-suited for beginners.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.