28.11.2022

src/components/Menu.scss

@@ -1,22 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
 
 .nav-item {
-    color: black;
+    color: black !important;
     text-decoration: none;
     font-family: 'Raleway';
     font-size: 12px;
     padding-left: 5px;
-    padding-right: 5px;
+    padding-right: 5px !important;
 }
 
 .nav-active {
-    text-decoration: none;
-    color: white;
+    text-decoration: none !important;
+    color: white !important;
     background-color: black;
     border-radius: 3px;
     width: 100%;
-    font-family: 'Raleway';
-    font-size: 13px;
+    font-family: 'Raleway' !important;
+    font-size: 13px !important;
     padding-left: 5px;
     padding-right: 5px;
 }

src/container/Footer/Footer.tsx

@@ -3,6 +3,8 @@ import React from 'react'
 import './Footer.scss'
 import logo from 'assets/footer-logo.png'
 import like from 'assets/like.png'
+import MenuItem from 'components/MenuItem'
+import 'components/Menu.scss'
 
 type Props = {}
 
@@ -95,10 +97,11 @@ const Footer = (props: Props) => {
                         <div className="info">
                             <img src={logo} alt=""></img>
                             <nav className="categories">
-                                <a href="http://localhost:3000/">LIFESTYLE</a>
-                                <a href="http://localhost:3000/">TRAVEL</a>
-                                <a href="http://localhost:3000/">STYLE</a>
-                                <a href="http://localhost:3000/">INTERIOR</a>
+                                <MenuItem to="/">Home</MenuItem>
+                                <MenuItem to="/lifestyle">Lifestyle</MenuItem>
+                                <MenuItem to="/travel">Travel</MenuItem>
+                                <MenuItem to="/style">Style</MenuItem>
+                                <MenuItem to="/interior">Interior</MenuItem>
                             </nav>
                         </div>
                         <div className="footer-description">

src/container/Header/Header.tsx

@@ -86,7 +86,13 @@ export default function SearchAppBar(props: Props) {
                                     flexGrow: 1,
                                 }}
                             >
-                                <img src={logo} alt="" className="logo"></img>
+                                <a href="http://localhost:3000/">
+                                    <img
+                                        src={logo}
+                                        alt=""
+                                        className="logo"
+                                    ></img>
+                                </a>
                             </Typography>
                             <Search>
                                 <SearchIconWrapper>

src/pages/Scss/InteriorPage.scss

@@ -0,0 +1,3 @@
+.interior-post-8 {
+    margin-bottom: 50px;
+}

src/pages/Scss/LifestylePage.scss

@@ -75,6 +75,7 @@
 }
 
 .entry-title-pages {
+    width: 800px;
     font-size: 43.6px;
     font-family: 'Raleway';
     line-height: 50px;
@@ -95,6 +96,7 @@
 }
 
 .post-title-pages {
+    width: 380px;
     font-size: 24px;
     font-family: 'Raleway';
     color: #000000;
@@ -103,3 +105,207 @@
     margin-bottom: 60px;
 }
 
+.kzjkcvzxv {
+    width: 380px;
+    height: 475px;
+}
+
+.zxcjvn {
+    padding: 30px !important;
+}
+
+.zjcvzs {
+    font-size: 32px !important;
+    line-height: 35px !important;
+}
+
+.kkmdkvm {
+    margin-bottom: 50px;
+}
+
+.lifestyle-page-image:hover {
+    opacity: 0.7;
+    cursor: pointer;
+    transition: 0.25s all ease;
+}
+
+.lifestyle-page-category:hover, .lifestyle-page-article-title:hover {
+    opacity: 0.6;
+    cursor: pointer;
+    transition: 0.2s all ease;
+}
+
+.lifestyle-page-instagram {
+    font-size: 16px;
+    font-family: "Raleway";
+    text-transform: uppercase;
+    padding-top: 80px;
+}
+
+.parent1234 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 0px;
+}
+
+.div1 { grid-area: 1 / 1 / 2 / 2; }
+.div2 { grid-area: 2 / 1 / 3 / 2; }
+.div3 { grid-area: 1 / 2 / 2 / 3; }
+.div4 { grid-area: 2 / 2 / 3 / 3; }
+
+.lifestyle-page-image-1 {
+    width: 150px;
+    height: 150px;
+}
+
+.lifestyle-page-images {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    margin-top: 30px;
+}
+
+.lifestyle-page-images1 {
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+
+.w:hover .lifestyle-page-middle {
+    opacity: 1;
+}
+
+@mixin middle-settings {
+    transition: 0.5s ease;
+    opacity: 0;
+    position: absolute;
+    display: flex;
+    top: 44.4%;
+    cursor: pointer;
+}
+
+.lifestyle-page-middle {
+    @include middle-settings();
+    left: 33%;
+}
+
+.lifestyle-page-like, .lifestyle-page-middle{
+    width: 25px;
+    height: 22.5px;
+    background-color: rgba(0, 0, 0, 0.4);
+    font-family: 'Raleway';
+}
+
+.lifestyle-page-like {
+    background-color: rgba(0, 0, 0, 0.5)
+}
+
+.follow-us, .trending-posts-title {
+    text-transform: uppercase;
+    font-family: 'Raleway';
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+
+.lifestyle-page-social-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.lifestyle-page-logo {
+    width: 17px;
+    height: 17px;
+    margin-right: 15px;
+}
+
+.lifestyle-page-logo:hover {
+    opacity: 0.5;
+    transition: 0.2s all ease;
+}
+
+.social-numbers {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.social-number {
+    margin-right: 12.5px;
+    font-family: 'Cormorant Garamond';
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.trending-posts-title {
+    padding-top: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.lifestyle-page-post-item {
+    display: flex;
+    margin-top: 15px;
+}
+
+.lifestyle-page-post-image {
+    display: flex;
+    margin-right: 15px;
+    margin-left: 14px;
+}
+
+.lifestyle-page-post-name {
+    line-height: 20px;
+    margin-top: 15px;
+    font-size: 16px;
+    font-family: 'Raleway';
+}
+
+.lifestyle-page-post-title {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.lifestyle-page-trending-image {
+    width: 90px;
+    height: 110px;
+}
+
+.lifestyle-page-post-date {
+    font-family: 'Cormorant Garamond';
+}
+
+.lifestyle-page-post-date:hover, .lifestyle-page-trending-image:hover, .lifestyle-page-post-name:hover {
+    opacity: 0.6;
+    cursor: pointer;
+    transition: 0.25s all ease;
+}
+
+.lifestyle-page-post-number {
+    position: absolute;
+    font-family: 'Raleway';
+    font-size: 13px;
+    color: white;
+    background-color: #262626;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.abcdefg {
+    width: 300px;
+    height: 360px;
+}
+
+.main-page-image:hover {
+    opacity: 0.75;
+    transition: 0.25s all ease;
+    cursor: pointer;
+}

src/pages/Scss/StylePage.scss

@@ -0,0 +1,4 @@
+.style-page-image {
+    width: 800px;
+    height: 550px;
+}

src/pages/Scss/TravelPage.scss

@@ -0,0 +1,3 @@
+.travel-page-image {
+    width: 800px;
+}