add project

Hometask4/css/practice.css

@@ -0,0 +1,193 @@
+* {
+    box-sizing: border-box;
+}
+html {
+    font-size: 14px;
+}
+body {
+    margin: 0;
+}
+li {
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+.header {
+    position: relative;
+    
+}
+.header-container {
+    width: 100%;
+    height: 92px;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    padding: 62px 61px 0 61px;
+    background-color: black;
+}
+.header__logo {
+    height: 100%;
+    align-items: flex-end;
+    display: flex;
+}
+.header__info {
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    
+}
+.header__nav {
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+.info__list {
+    display: flex;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+}
+.info__list a {
+    color: rgba(255, 255, 255, 1);
+    font-size: 14px;
+}
+.info__list li {
+    margin-right: 59px;
+    height: 20px;
+}
+.info__list li:last-child a {
+    color: rgba(255, 202, 0, 1);
+}
+.info__list li:last-child {
+    margin-right: 0;
+    width: 105px;
+}
+.info__list li:nth-child(4) {
+    border-right: 1px solid rgba(240, 240, 240, 1);
+    width: 80px;
+    margin-right: 41px;
+}
+.nav__email {
+    display: flex;
+    align-items: center;
+}
+.nav__email svg {
+    margin-right: 15px;
+}
+.nav__email svg:hover {
+    cursor: pointer;
+    transform: scale(2);
+    transition: 1s;
+}
+.nav__email a{
+    color: white;
+    font-size: 19px;
+}
+.nav__menu {
+    margin-left: 150px;
+    margin-right: 25px;
+}
+.nav__menu a {
+    color: white;
+}
+.menu__btn {
+    display: block;
+    position: relative;
+}
+.menu__btn span {
+    margin-top: 5px;
+}
+.menu__btn span,
+.menu__btn span::before {
+    position: absolute;
+    width: 50px;
+    height: 1px;
+    background-color: #ffffff;
+}
+.menu__btn span::before {
+    content: '';
+    display: block;
+    transform: translateY(10px);
+}
+.asd {
+    height: 600px;
+    width: 100%;
+    background-color: black;
+}
+/* .main {
+    display: flex;
+    justify-content: center;
+} */
+.main-title {
+    height: 100vh;
+    width: 100%;
+    background-image: url(../img/Bitmap.png);
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    
+}
+.main-title__content {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+.welcome {
+    width: 100%;
+    font-family: Roboto;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 21px;
+    margin-bottom: 23px;
+    color: rgba(255, 255, 255, 1);
+    display: flex;
+    justify-content: flex-start
+
+}
+.web-production {
+    font-family: Roboto;
+    font-size: 64px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 75px;
+    margin-bottom: 100px;
+    color: rgba(255, 255, 255, 1);
+}
+
+.discus-btn {
+    width: 240px;
+    height: 68px;
+    display: flex;
+    background-color: #FFCA00;
+    align-items: center;
+}
+/* .discus-btn:hover {
+    background-color: green;
+    transition: 1s;  
+    color: yellow;
+} */
+.discuse-btn__text:hover {
+    color: yellow;
+    transition: 1s;
+}
+.discus-btn__text {
+    color: rgba(32, 32, 32, 1);
+    margin: 25px 67px 27px 30px;
+}
+.dott {
+    width: 8px;
+    height: 8px;
+    background-color: rgba(32, 32, 32, 1);
+    border-radius: 50%;
+}
+.main-title__btn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+}

Hometask4/css/style.css

@@ -0,0 +1,618 @@
+* {
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+li {
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+.header {
+    position: relative;
+    max-width: 1920px;
+}
+.header-container {
+    width: 100%;
+    height: 92px;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    padding: 62px 61px 0 61px;
+    z-index: 10;
+    /* display: none; */
+}
+.header__logo {
+    /* width: 480px; */
+    height: 100%;
+    
+}
+.header__info {
+    /* width: 960px; */
+    height: 100%;
+   
+    
+}
+.header__nav {
+    height: 100%;
+    display: flex;
+}
+.info__list {
+    display: flex;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+}
+.info__list a {
+    color: rgba(255, 255, 255, 1);
+    font-size: 14px;
+}
+.info__list li {
+    margin-right: 59px;
+    height: 20px;
+}
+.info__list li:last-child a {
+    color: rgba(255, 202, 0, 1);
+}
+.info__list li:last-child {
+    margin-right: 0;
+    width: 105px;
+}
+.info__list li:nth-child(4) {
+    border-right: 1px solid rgba(240, 240, 240, 1);
+    width: 80px;
+    margin-right: 41px;
+}
+.nav__email {
+    display: flex;
+    justify-content: space-between;
+}
+.nav__email a{
+    color: white;
+}
+.nav__menu {
+    margin-left: 0px;
+    margin-right: 25px;
+}
+.nav__menu a {
+    color: white;
+}
+.menu__btn {
+    display: block;
+    position: relative;
+}
+.menu__btn span {
+    margin-top: 5px;
+}
+.menu__btn span,
+.menu__btn span::before {
+    position: absolute;
+    width: 50px;
+    height: 1px;
+    background-color: #ffffff;
+}
+.menu__btn span::before {
+    content: '';
+    display: block;
+    transform: translateY(10px);
+}
+.asd {
+    height: 600px;
+    width: 100%;
+    background-color: black;
+}
+.main {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+.main-header {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    margin-bottom: 41px;
+    background-color: black;
+    z-index: 3;
+}
+.video__media {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    top: 100px;
+    left: calc(50% - 600px);
+    z-index: 1;
+}
+.main-header__title {
+    padding-top: 282px;
+    width: 50%;
+}
+.welcome {
+    font-family: Roboto;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 21px;
+    margin-bottom: 23px;
+    color: rgba(255, 255, 255, 1);
+}
+.web-production {
+    font-family: Roboto;
+    font-size: 64px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 75px;
+    margin-bottom: 100px;
+    color: rgba(255, 255, 255, 1);
+}
+.discus-btn {
+    width: 240px;
+    height: 68px;
+    display: flex;
+    background-color: #FFCA00;
+    align-items: center;
+    justify-content: space-around;
+    overflow: hidden;
+    cursor: pointer;
+}
+.discus-btn:hover div:first-child {
+    transition: 2s;
+    transition-delay: 0.5s;
+    transition-property: color;
+    color: yellow;
+}
+.discus-btn__text {
+    color: rgba(32, 32, 32, 1);
+    position: relative;
+    z-index: 5;
+}
+.dott {
+    width: 8px;
+    height: 8px;
+    background-color: #202020;
+    border-radius: 50%;
+}
+.discus-btn:hover div:last-child {
+    transform: scale(70);
+    transition: 1.5s;
+}
+.arrow {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    bottom: 174px;
+    left: 10px;
+    transform: rotate(-90deg);
+}
+.arrow svg {
+    transform: rotate(90deg);
+    margin-right: 40px;
+}
+.chat {
+    height: 76px;
+    width: 76px;
+    border-radius: 50%;
+    background-color: rgba(255, 204, 0, 1);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 68px;
+    bottom: 109px;
+    box-shadow: 0 0 0 24px rgba(255, 204, 0, 0.1);
+    cursor: pointer;
+    transition: 2s;
+}
+.chat:hover {
+    background-color: white;
+    transform: scale(1.8);
+    box-shadow: 0 0 0 0;
+}
+.chat:hover svg{
+    transform: scale(1.4);
+    transition: 1s;
+    color: green;
+}
+.main-content {
+    margin-bottom: 123px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 50%;
+    align-items: center;
+}
+.main-content__services {
+    margin-bottom: 50px;
+    height: 21px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+.services {
+    font-family: Roboto;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 21px;
+    margin-left: 10px;
+}
+.main-content__wrap {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+.main-content__blocks {
+    width: 50%;
+    height: 179px;
+    display: flex;
+    margin-bottom: 110px;
+}
+.main-content__blocks:last-child {
+    margin-bottom: 181px;
+}
+.main-content__blocks__img {
+    width: 130px;
+    height: 130px;
+    margin-right: 17px;
+}
+.main-content__blocks__text {
+    width: 332px;
+    height: 179px;
+    border-bottom: 1px solid rgba(240, 240, 240, 1);
+}
+.blocks-name {
+    width: 100%;
+    height: 26px;
+    font-family: Roboto;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 26px;
+    color: rgba(32, 32, 32, 1);
+
+}
+.blocks-text {
+    height: 88px;
+    width: 100%;
+    padding-top: 28px;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    color: rgba(126, 126, 126, 1);
+}
+.blocks-arrow {
+    width: 100%;
+    height: 65px;
+    display: flex;
+    align-items: center;
+}
+#learn-more {
+    display: flex;
+}
+.learn-more__text {
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 16px;
+    margin-right: 22px;
+}
+.main-content__portfolio {
+    height: 21px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 45px;
+}
+.main-content__portfolio-1 {
+    display: flex;
+    align-items: center;
+}
+.Portfolio {
+    margin-left: 10px;
+    font-family: Roboto;
+    font-size: 18px;
+    color: rgba(32, 32, 32, 1);
+    margin: 0 0 0 10px;
+
+}
+
+.main-content__portfolio-2 {
+    color: rgba(126, 126, 126, 1);
+    font-size: 14px;
+}
+.main-content__projects {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+}
+.projects__block {
+    width: calc(33.33333% - 10px);
+    height: 484px;
+}
+/* .projects__block:first-child div {
+    height: 314px;
+} */
+.projects__picture1 {
+    height: 314px;
+    background-image: url(../img/Rectangle\ Copy\ 22.png);
+    background-repeat: no-repeat;
+    padding: 226px 145px 33px 30px;
+}
+
+.picture__text1 {
+    color: rgba(152, 152, 152, 1);
+    font-size: 14px;
+    margin: 0 0 9px 0;
+}
+.picture__text2 {
+    color: rgba(255, 255, 255, 1);
+    font-size: 22px;
+    margin: 0;
+}
+.projects__text {
+    padding: 20px 26px 40px 30px;
+    height: 170px;
+}
+.text__text {
+    font-size: 14px;
+    color: rgba(126, 126, 126, 1);
+    margin: 0 0 31px 0;
+}
+.arrow__border {
+    width: 100%;
+    height: 38px;
+    border-bottom: 1px solid rgba(240, 240, 240, 1);
+    padding-left: 21px;
+}
+.projects__picture2 {
+    height: 396px;
+    background-image: url(../img/Rectangle\ Copy\ 24.jpg);
+    background-repeat: no-repeat;
+    padding: 308px 28px 28px 28px;
+}
+.projects__picture3 {
+    height: 396px;
+    background-image: url(../img/Rectangle\ Copy\ 30.jpg);
+    background-repeat: no-repeat;
+    padding: 308px 30px 28px 26px;
+}
+.btn-projects {
+    width: 100%;
+    height: 68px;
+    border: 2px solid rgba(255, 202, 0, 1);
+    font-size: 14px;
+    font-weight: bold;
+    background-color: #E5E5E5;
+    margin-bottom: 150px;
+    cursor: pointer;
+}
+.btn-projects:hover {
+    transition: 1s;
+    width: 70%;
+    border-radius: 70%;
+}
+.btn-projects:hover span {
+    animation-name: button;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+}
+@keyframes button {
+    0% {
+        font-size: 14px;
+        color: black;
+    }
+    25% {
+        font-size: 16px;
+        color: blue;
+    }
+    50% {
+        font-size: 18px;
+        color: red;
+    }
+    75% {
+        font-size: 20px;
+        color: green;
+    }
+    100% {
+        font-size: 22px;
+        color: yellow;
+    }
+
+}
+.main-content__info {
+    display: flex;
+    justify-content: space-between;
+    height: 355px;
+    flex-wrap: wrap;
+    margin-bottom: 180px;
+}
+@media (max-width: 1000px) {
+    .main-content__info {
+        display: block;
+    }
+    .info-block {
+        width: 100%;
+        
+    }
+}
+.info-block {
+    width: calc(50% - 8px);
+    height: calc(50% - 15px);
+    background-color: rgba(245, 247, 247, 1);
+    padding: 0 19px 0 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-block__img {
+    width: 109px;
+    height: 75px;
+}
+#info-block-img1 {
+    width: 72px;
+    height: 75px;
+    margin-left: 22px;
+}
+.info-block__text {
+    padding-left: 65px;
+    padding-top: 11px;
+}
+.info__text1 {
+    height: 26px;
+    width: 100%;
+    font-family: Roboto;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+.info__text2 {
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    color: rgba(126, 126, 126, 1);
+    margin: 0;
+}
+.main-content__clients {
+    height: 21px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 23px;
+}
+.main-content__clients__blocks {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 158px;
+}
+.clients__blocks__block {
+    height: 150px;
+    width: 25%;
+    margin-right: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(245, 247, 247, 1);
+}
+.clients__blocks__block:last-child {
+    margin-right: 0;
+}
+.main-content__seo-text {
+    width: 100%;
+}
+.seo-text__top {
+    font-family: Roboto;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 26px;
+    margin-bottom: 23px;
+}
+.seo-text__text {
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: rgba(126, 126, 126, 1);
+    margin-bottom: 20px;
+}
+.seo-text__read-more {
+    display: flex;
+    align-items: center;
+}
+.seo-text__read-more p {
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    margin-right: 10px;
+}
+.footer {
+    max-width: 1920px;
+    height: 110px;
+    background: rgba(18, 18, 18, 1);
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
+    border-top: 4px solid rgba(255, 202, 0, 1);
+}
+.footer-container {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.footer__logo {
+    display: flex;
+    align-items: center;
+}
+.footer__copyright {
+    display: flex;
+    align-items: center;
+    color: rgba(126, 126, 126, 1);
+    font-size: 12px;
+    font-weight: 400;
+}
+.footer__contact {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.footer__contact a {
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 19px;
+    color: rgba(255, 255, 255, 1);
+    margin-left: 16px;
+}
+.social-box {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 50%;
+}
+.social-box:hover {
+    background-color: white;
+}
+.social-box:hover svg {
+    fill: blue;
+}
+.social-box svg {
+    margin: 0;
+    fill: white;
+}
+.footer__social {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.footer__social {
+    cursor: pointer;
+}
+.footer__social:last-child div {
+    margin-left: 15px;
+}

css/style.css

@@ -0,0 +1,533 @@
+* {
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+}
+a {
+    text-decoration: none;
+}
+li {
+    list-style: none;
+}
+.header {
+    max-width: 1920px;
+}
+.header-container {
+    width: 100%;
+    max-height: 124px; 
+}
+.header-top {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    justify-content: space-around;
+    background-color: #000000;
+}
+.header-top a {
+    font-family: PT Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    color: rgba(150, 150, 150, 1);
+
+}
+.header-top__contacts {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.header-top__contacts svg {
+    margin-right: 16px;
+}
+.header-top__contacts__list {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+}
+.header-top__contacts__list li {
+    margin-right: 12.5px;
+    padding-left: 12.5px;
+    border-left: 1px solid rgba(150, 150, 150, 1);
+}
+.header-top__contacts__list li:first-child {
+    border-left: none;
+    padding-left: 0;
+}
+.header-top__contacts__list li:last-child {
+    margin-right: 0px;
+}
+.header-top__login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.header-top__login a {
+    margin-left: 15px;
+}
+.header-top__login span {
+    display: block;
+    width: 1px;
+    height: 16px;
+    background-color: rgba(150, 150, 150, 1);
+    margin-left: 15px;
+    transform: rotate(30deg);
+}
+.header-bottom {
+    width: 100%;
+    height: 80px;
+    background: #0F0F0F;
+    display: flex;
+    justify-content: space-between;
+}
+.header-bottom__logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    padding-right: 150px;
+}
+.header-bottom__nav {
+    width: 50%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 11px;
+}
+.header-bottom__nav svg {
+    margin-left: 61px;
+}
+.header-bottom__nav svg:last-child {
+    margin-left: 44px;
+}
+.header-bottom__nav__list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+.header-bottom__nav__list li{
+    padding: 30px 20px;
+    margin: 0;
+}
+.header-bottom__nav__list a {
+    color: rgba(150, 150, 150, 1);
+}
+.header-bottom__nav__list li:hover {
+    background-color: #1F1F1F;
+    cursor: pointer;
+}
+.header-bottom__nav__list li:hover a {
+    color: #fff;
+}
+.main {
+    max-width: 1920px;
+}
+.main-title {
+    width: 100%;
+    height: 810px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-image: url(../img/Rectangle\ 3.png);
+}
+.main-title__name {
+    width: 320px;
+    height: 320px;
+    border: 4px solid #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 80px;
+}
+.main-title__name p {
+    font-family: PT Sans;
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+    color: rgba(255, 255, 255, 1);
+    margin: 0;
+}
+.main-title__name svg {
+    margin-bottom: 15px;
+}
+.main-title__text {
+    width: 730px;
+    height: 96px;
+    justify-content: center;
+    align-items: center;
+    color: rgba(255, 255, 255, 1);
+    font-family: PT Sans;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+}
+.main-collections {
+    width: 100%;
+    height: 1330px;
+}
+.main-collections-top {
+    height: 730px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.main-collections-top__products {
+    height: 100%;
+    width: 55%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #000000;
+}
+.main-collections-top__img {
+    height: 100%;
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url(../img/Rectangle\ 8.png);
+}
+.main-collections-top__products__inner {
+    height: 540px;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 60px;
+}
+.inner-block {
+    height: 405px;
+    width: 260px;
+
+}
+.background__img {
+    width: 260px;
+    height: 325px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #191B1C;
+}
+.background__img__text {
+    width: 260px;
+    height: 80px;
+    background-color: #000000;
+}
+.main-collections-top__products__name {
+    font-family: Playfair Display;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 48px;
+    color: rgba(255, 255, 255, 1);
+    margin-bottom: 50px;
+}
+
+.name {
+    font-family: Playfair Display;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: rgba(255, 255, 255, 1);
+}
+.cost {
+    font-family: Playfair Display;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 21px;
+    color: white;
+}
+.main-collections-bottom {
+    height: 600px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.main-collections-bottom__img {
+    height: 100%;
+    width: 45%;
+    background-image: url(../img/Rectangle\ 9.png);
+}
+.main-collections-bottom__collection {
+    height: 100%;
+    width: 55%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #000000;
+}
+.main-collections-bottom__collection svg{
+    margin-bottom: 40px;
+}
+.bottom-text {
+    font-family: PT Sans;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    color: rgba(255, 255, 255, 1);
+    width: 471px;
+    height: 173px;
+    margin-bottom: 60px;
+}
+.main-collections-bottom__collection__name {
+    font-family: Playfair Display;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 48px;
+    color: #fff;
+    margin-bottom: 40px;
+}
+.collection-btn {
+    width: 311px;
+    height: 47px;
+    border: 1px solid #FFFFFF;;
+    background: rgba(0, 0, 0, 1);
+    color: #fff;
+    font-family: PT Sans;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 23px;
+    letter-spacing: 0,1em;
+    cursor: pointer;
+}
+.collection-btn:hover {
+    cursor: pointer;
+    background-color: #1F1F1F;
+}
+.main-new-arrivals {
+    width: 100%;
+    height: 1289px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #000000;
+}
+.main-new-arrivals__name {
+    font-family: Playfair Display;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 48px;
+    letter-spacing: 0em;
+    color: rgba(255, 255, 255, 1);
+    margin-bottom: 40px;
+}
+.main-new-arrivals svg {
+    margin-bottom: 81px;
+}
+.main-new-arrivals__produscts {
+    width: 60%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.main-new-arrivals__produscts>div:nth-child(-n+4) {
+    margin-bottom: 40px;
+}
+.main-our-brands {
+    width: 1005;
+    height: 302px;
+    background: #0F0F0F;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.main-our-brands>svg {
+    margin-bottom: 40px;
+}
+
+.main-our-brands__name {
+    font-family: Playfair Display;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 48px;
+    letter-spacing: 0em;
+    color: rgba(255, 255, 255, 1);
+    margin-bottom: 40px;
+}
+.brands-icon {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+}
+.footer-container {
+    width: 100%;
+    height: 450px;
+    background-image: url(../img/Rectangle\ 15.png);
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+}
+.footer-about {
+    width: 60%;
+    height: 400px;
+    display: flex;
+    justify-content: space-between;
+
+}
+.footer-about__about {
+    width: 33.33333%;
+    height: 100%;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+}
+.footer-about__about__name {
+    font-family: Playfair Display;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 0em;
+    color: #fff;
+    margin-bottom: 40px;
+
+}
+.footer-about__about p {
+    font-family: PT Sans;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    letter-spacing: 0em;
+    color: #fff;
+    margin: 0;
+}
+.footer-about__category {
+    width: 33.33333%;
+    height: 100%;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+}
+.footer-about__category__name {
+    font-family: Playfair Display;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 0em;
+    color: #fff;
+    margin-bottom: 40px;
+}
+.footer-about__category__buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+.footer-about__mailing {
+    width: 33.33333%;
+    height: 100%;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+}
+.btn {
+    padding: 10px 20px;
+    margin-bottom: 20px;
+    margin-right: 20px;
+    background: #0F0F0F;
+    color: rgba(208, 208, 208, 1);
+    border: none;
+    cursor: pointer;
+}
+.btn:hover {
+    cursor: pointer;
+    background: #1F1F1F;
+    color: #fff;
+}
+.footer-about__mailing__name {
+    font-family: Playfair Display;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 0em;
+    color: #fff;
+    margin-bottom: 40px;
+}
+.footer-about__mailing p {
+    font-family: PT Sans;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    letter-spacing: 0em;
+    color: #fff;
+    margin: 0 0 37px 0;
+}
+.sign-up {
+    width: 100%;
+    height: 42px;
+    display: flex;
+
+}
+.inner-btn {
+    width: 60%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.4);
+    color: rgba(150, 150, 150, 1);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 15px;
+    cursor: text;
+}
+.sign-btn {
+    width: 40%;
+    height: 100%;
+    background: #0F0F0F;
+    color: rgba(255, 255, 255, 1);
+    border: none;
+    cursor: pointer;
+}
+.sign-btn:hover {
+    background-color: #1F1F1F;
+}
+.footer-about__copyright {
+    height: 60px;
+    width: 100%;
+    background: rgba(15, 15, 15, 1);
+    display: flex;
+    justify-content: space-between;
+}
+.copyright {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+}
+.made-by {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+}