diff --git a/public/images/blog-instagram-logo.png b/public/images/blog-instagram-logo.png new file mode 100644 index 0000000..4c95b40 Binary files /dev/null and b/public/images/blog-instagram-logo.png differ diff --git a/public/images/blog-vimeo-logo.png b/public/images/blog-vimeo-logo.png new file mode 100644 index 0000000..0f034cd Binary files /dev/null and b/public/images/blog-vimeo-logo.png differ diff --git a/public/images/blog-youtube-logo.png b/public/images/blog-youtube-logo.png new file mode 100644 index 0000000..acaa4e2 Binary files /dev/null and b/public/images/blog-youtube-logo.png differ diff --git a/public/images/interior-page-1.jpeg b/public/images/interior-page-1.jpeg new file mode 100644 index 0000000..7c2e712 Binary files /dev/null and b/public/images/interior-page-1.jpeg differ diff --git a/public/images/interior-page-2.jpeg b/public/images/interior-page-2.jpeg new file mode 100644 index 0000000..a0c4a70 Binary files /dev/null and b/public/images/interior-page-2.jpeg differ diff --git a/public/images/interior-page-3.jpeg b/public/images/interior-page-3.jpeg new file mode 100644 index 0000000..253643b Binary files /dev/null and b/public/images/interior-page-3.jpeg differ diff --git a/public/images/interior-page-4.jpeg b/public/images/interior-page-4.jpeg new file mode 100644 index 0000000..7c2e712 Binary files /dev/null and b/public/images/interior-page-4.jpeg differ diff --git a/public/images/interior-page-5.jpeg b/public/images/interior-page-5.jpeg new file mode 100644 index 0000000..232fe04 Binary files /dev/null and b/public/images/interior-page-5.jpeg differ diff --git a/public/images/interior-page-6.jpeg b/public/images/interior-page-6.jpeg new file mode 100644 index 0000000..4dd5c91 Binary files /dev/null and b/public/images/interior-page-6.jpeg differ diff --git a/public/images/interior-page-7.jpeg b/public/images/interior-page-7.jpeg new file mode 100644 index 0000000..0d4e46a Binary files /dev/null and b/public/images/interior-page-7.jpeg differ diff --git a/public/images/interior-page-8.jpeg b/public/images/interior-page-8.jpeg new file mode 100644 index 0000000..d6b8d8e Binary files /dev/null and b/public/images/interior-page-8.jpeg differ diff --git a/public/images/interior-page-9.jpeg b/public/images/interior-page-9.jpeg new file mode 100644 index 0000000..232fe04 Binary files /dev/null and b/public/images/interior-page-9.jpeg differ diff --git a/public/images/interior-page.jpeg b/public/images/interior-page.jpeg new file mode 100644 index 0000000..0f1c72a Binary files /dev/null and b/public/images/interior-page.jpeg differ diff --git a/public/images/lifestyle-page-10.jpeg b/public/images/lifestyle-page-10.jpeg new file mode 100644 index 0000000..dc4068e Binary files /dev/null and b/public/images/lifestyle-page-10.jpeg differ diff --git a/public/images/style-page-1.jpeg b/public/images/style-page-1.jpeg new file mode 100644 index 0000000..ba8d4f8 Binary files /dev/null and b/public/images/style-page-1.jpeg differ diff --git a/public/images/style-page-2.jpeg b/public/images/style-page-2.jpeg new file mode 100644 index 0000000..1d59bc7 Binary files /dev/null and b/public/images/style-page-2.jpeg differ diff --git a/public/images/style-page-3.jpeg b/public/images/style-page-3.jpeg new file mode 100644 index 0000000..66eb30e Binary files /dev/null and b/public/images/style-page-3.jpeg differ diff --git a/public/images/style-page-4.jpeg b/public/images/style-page-4.jpeg new file mode 100644 index 0000000..3694ec6 Binary files /dev/null and b/public/images/style-page-4.jpeg differ diff --git a/public/images/style-page-5.jpeg b/public/images/style-page-5.jpeg new file mode 100644 index 0000000..7293a89 Binary files /dev/null and b/public/images/style-page-5.jpeg differ diff --git a/public/images/style-page-6.jpeg b/public/images/style-page-6.jpeg new file mode 100644 index 0000000..9bdb869 Binary files /dev/null and b/public/images/style-page-6.jpeg differ diff --git a/public/images/style-page-7.jpeg b/public/images/style-page-7.jpeg new file mode 100644 index 0000000..c20a0a3 Binary files /dev/null and b/public/images/style-page-7.jpeg differ diff --git a/public/images/style-page-8.jpeg b/public/images/style-page-8.jpeg new file mode 100644 index 0000000..b6ca40f Binary files /dev/null and b/public/images/style-page-8.jpeg differ diff --git a/public/images/style-page-9.jpeg b/public/images/style-page-9.jpeg new file mode 100644 index 0000000..917724b Binary files /dev/null and b/public/images/style-page-9.jpeg differ diff --git a/public/images/style-page.jpeg b/public/images/style-page.jpeg new file mode 100644 index 0000000..2279df1 Binary files /dev/null and b/public/images/style-page.jpeg differ diff --git a/public/images/travel-page-1.jpeg b/public/images/travel-page-1.jpeg new file mode 100644 index 0000000..0a892ce Binary files /dev/null and b/public/images/travel-page-1.jpeg differ diff --git a/public/images/travel-page-2.jpeg b/public/images/travel-page-2.jpeg new file mode 100644 index 0000000..d80daba Binary files /dev/null and b/public/images/travel-page-2.jpeg differ diff --git a/public/images/travel-page-3.jpeg b/public/images/travel-page-3.jpeg new file mode 100644 index 0000000..b698ccd Binary files /dev/null and b/public/images/travel-page-3.jpeg differ diff --git a/public/images/travel-page-4.jpeg b/public/images/travel-page-4.jpeg new file mode 100644 index 0000000..71b8843 Binary files /dev/null and b/public/images/travel-page-4.jpeg differ diff --git a/public/images/travel-page-5.jpeg b/public/images/travel-page-5.jpeg new file mode 100644 index 0000000..2708635 Binary files /dev/null and b/public/images/travel-page-5.jpeg differ diff --git a/public/images/travel-page-6.jpeg b/public/images/travel-page-6.jpeg new file mode 100644 index 0000000..f0dff41 Binary files /dev/null and b/public/images/travel-page-6.jpeg differ diff --git a/public/images/travel-page-7.jpeg b/public/images/travel-page-7.jpeg new file mode 100644 index 0000000..2aee597 Binary files /dev/null and b/public/images/travel-page-7.jpeg differ diff --git a/public/images/travel-page-8.jpeg b/public/images/travel-page-8.jpeg new file mode 100644 index 0000000..0e5fe58 Binary files /dev/null and b/public/images/travel-page-8.jpeg differ diff --git a/src/assets/city-life-image-4.jpeg b/src/assets/city-life-image-4.jpeg new file mode 100644 index 0000000..7320d18 Binary files /dev/null and b/src/assets/city-life-image-4.jpeg differ diff --git a/src/assets/lifestyle-image-1.jpeg b/src/assets/lifestyle-image-1.jpeg new file mode 100644 index 0000000..490674e Binary files /dev/null and b/src/assets/lifestyle-image-1.jpeg differ diff --git a/src/components/Menu.scss b/src/components/Menu.scss index dfc2f35..48b37bc 100644 --- a/src/components/Menu.scss +++ b/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; } \ No newline at end of file diff --git a/src/container/Footer/Footer.tsx b/src/container/Footer/Footer.tsx index e2aa451..42a3ba8 100644 --- a/src/container/Footer/Footer.tsx +++ b/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) => {
diff --git a/src/container/Header/Header.tsx b/src/container/Header/Header.tsx index 8dc39e3..0e4516e 100644 --- a/src/container/Header/Header.tsx +++ b/src/container/Header/Header.tsx @@ -86,7 +86,13 @@ export default function SearchAppBar(props: Props) { flexGrow: 1, }} > - + + + diff --git a/src/pages/InteriorPage.tsx b/src/pages/InteriorPage.tsx index 9257fa1..319142a 100644 --- a/src/pages/InteriorPage.tsx +++ b/src/pages/InteriorPage.tsx @@ -1,11 +1,524 @@ +import { Container } from '@mui/material' +import './Scss/LifestylePage.scss' +import './Scss/InteriorPage.scss' import React from 'react' +import like from 'assets/like.png' +import image1 from 'assets/slider-picture-1.jpeg' +import image2 from 'assets/slider-picture-2.jpeg' +import image3 from 'assets/slider-picture-3.jpeg' +import image4 from 'assets/city-life-image-4.jpeg' +import image5 from 'assets/lifestyle-image-1.jpeg' type Props = {} -const InteriorPage = (props: Props) => { - return ( -
InteriorPage
- ) +const LifestylePage = (props: Props) => { + return ( + <> + +
+
+
Interior
+
10 posts
+
+
+ + Interior + +
+ How to Protect Your Camera Against Lens + Fungal Damage +
+
+ +
+
+
+
+
+ +
+
+ + Interior + +
+ 5 Top Tips for Marketing Your + Photography Business Successfully +
+
+
+
+
+ +
+
+ + Interior + +
+ Telescope Photography: 5 Important + Tips for Shooting the Moon +
+
+
+
+
+ +
+
+ + Interior + +
+ Photo Print Size Comparisons, + Explanations, and Hanging Size +
+
+
+
+
+ +
+
+ + Interior + +
+ The Importance of Straightening the + Horizon and Aligning Lines +
+
+
+
+
+
+
+ +
+
+ + Interior + +
+ How to Use Vibrant Colors in + Photography With Great Success +
+
+
+
+
+
+

+
+ +
+

+ What You Can Learn From Entirely + Different Photography Genres +

+ + +
+
+
+ +
+
+ + Interior + +
+ Underexposure vs Overexposure – a + Beginner’s Guide +
+
+
+
+
+

+
+ +
+

+ 14 Portrait Photography Tips You’ll + Never Want to Forget +

+ + +
+
+ +
+
+ + Interior + +
+ How to Shoot Product Photography + With Single Strobe Lighting +
+
+
+
+
+
+ +
+ + + ) } -export default InteriorPage \ No newline at end of file +export default LifestylePage diff --git a/src/pages/LifestylePage.tsx b/src/pages/LifestylePage.tsx index 306c208..3af11ed 100644 --- a/src/pages/LifestylePage.tsx +++ b/src/pages/LifestylePage.tsx @@ -1,12 +1,18 @@ import { Container } from '@mui/material' import './Scss/LifestylePage.scss' import React from 'react' +import like from 'assets/like.png' +import image1 from 'assets/slider-picture-1.jpeg' +import image2 from 'assets/slider-picture-2.jpeg' +import image3 from 'assets/slider-picture-3.jpeg' +import image4 from 'assets/city-life-image-4.jpeg' +import image5 from 'assets/lifestyle-image-1.jpeg' type Props = {} const LifestylePage = (props: Props) => { return ( -
+ <>
@@ -14,10 +20,10 @@ const LifestylePage = (props: Props) => {
11 posts
- + Lifestyle -
+
How Using Props in Portraits Can Make Your Photos More Interesting
@@ -40,13 +46,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="570" + className="lifestyle-page-image" />
- + Lifestyle -
+
9 Ways to Use Reflections More Creatively for Stunning Photography
@@ -59,13 +66,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="253" + className="lifestyle-page-image" />
- + Lifestyle -
+
How to Be a Second Shooter at Weddings and Why It’s Important
@@ -78,13 +86,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="570" + className="lifestyle-page-image" />
- + Lifestyle -
+
The 9 Most Powerful Composition Rules for Dynamic Landscape Shots
@@ -97,13 +106,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="253" + className="lifestyle-page-image" />
- + Lifestyle -
+
How to Photograph Fireworks – Everything You Need to Know
@@ -116,13 +126,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="568" + className="lifestyle-page-image" />
- + Lifestyle -
+
Sunbursts and Starbursts: Shoot Stunning Sun Flare Photography
@@ -131,23 +142,31 @@ const LifestylePage = (props: Props) => {
-
- -
-
- - Lifestyle - -
+
+
+

+
+ +
+

An Introduction to Amazing Abstract Automotive Photography -

-
+ + +
@@ -156,13 +175,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="475" + className="lifestyle-page-image" />
- + Lifestyle -
+
How to Shoot a Self Portrait to Support Your Brand Identity
@@ -175,13 +195,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="285" + className="lifestyle-page-image" />
- + Lifestyle -
+
6 Scenarios to Try for More Interesting Beach Photography
@@ -194,14 +215,16 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="253" + className="lifestyle-page-image" />
- + Lifestyle -
- What Is Lens Compression and How to Use It in Your Photos +
+ What Is Lens Compression and How to + Use It in Your Photos
@@ -212,13 +235,14 @@ const LifestylePage = (props: Props) => { alt="" width="380" height="570" + className="lifestyle-page-image" />
- + Lifestyle -
+
How to Create a Panoramic Photograph With a Tilt-Shift Lens
@@ -228,21 +252,289 @@ const LifestylePage = (props: Props) => {
-
+ ) } diff --git a/src/pages/Scss/InteriorPage.scss b/src/pages/Scss/InteriorPage.scss new file mode 100644 index 0000000..c4e1635 --- /dev/null +++ b/src/pages/Scss/InteriorPage.scss @@ -0,0 +1,3 @@ +.interior-post-8 { + margin-bottom: 50px; +} \ No newline at end of file diff --git a/src/pages/Scss/LifestylePage.scss b/src/pages/Scss/LifestylePage.scss index cd82d07..c3d8572 100644 --- a/src/pages/Scss/LifestylePage.scss +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Scss/StylePage.scss b/src/pages/Scss/StylePage.scss new file mode 100644 index 0000000..ba92561 --- /dev/null +++ b/src/pages/Scss/StylePage.scss @@ -0,0 +1,4 @@ +.style-page-image { + width: 800px; + height: 550px; +} \ No newline at end of file diff --git a/src/pages/Scss/TravelPage.scss b/src/pages/Scss/TravelPage.scss new file mode 100644 index 0000000..a286830 --- /dev/null +++ b/src/pages/Scss/TravelPage.scss @@ -0,0 +1,3 @@ +.travel-page-image { + width: 800px; +} \ No newline at end of file diff --git a/src/pages/StylePage.tsx b/src/pages/StylePage.tsx index 185f0af..becba91 100644 --- a/src/pages/StylePage.tsx +++ b/src/pages/StylePage.tsx @@ -1,11 +1,512 @@ +import { Container } from '@mui/material' +import './Scss/LifestylePage.scss' +import './Scss/StylePage.scss' import React from 'react' +import like from 'assets/like.png' +import image1 from 'assets/slider-picture-1.jpeg' +import image2 from 'assets/slider-picture-2.jpeg' +import image3 from 'assets/slider-picture-3.jpeg' +import image4 from 'assets/city-life-image-4.jpeg' +import image5 from 'assets/lifestyle-image-1.jpeg' type Props = {} -const StylePage = (props: Props) => { - return ( -
StylePage
- ) +const LifestylePage = (props: Props) => { + return ( + <> + +
+
+
Style
+
10 posts
+
+
+ + Style + +
+ Equipment Versus Photographer – Which + Matters More? +
+
+ +
+
+
+
+
+ +
+
+ + Style + +
+ 5 Essential Tools for Wedding + Photography That Aren’t Gear-Related +
+
+
+
+
+ +
+
+ + Style + +
+ How to Photograph Food Coloring or + Dye Dropped in Water +
+
+
+
+
+ +
+
+ + Style + +
+ Photography Rights and Licensing + Your Work for Commercial Use +
+
+
+
+
+ +
+
+ + Style + +
+ How to Photograph Interior Domes of + Popular Landmarks +
+
+
+
+
+ +
+
+ + Style + +
+ Capture Flower Photography Outside: + Diffuse Light With a DIY Studio +
+
+
+
+
+
+
+ +
+
+ + Style + +
+ 3 Tips for Becoming a Unique and + Successful Photographer +
+
+
+
+
+ +
+
+ + Style + +
+ Your Ultimate Guide to Hanging Wall + Art and Photos Like a Pro +
+
+
+
+
+ +
+
+ + Style + +
+ The Complete Guide to Landscape + Photography: 185 Tips +
+
+
+
+
+ +
+
+ + Style + +
+ 7 Things All Photographers Need to + Know About Copyright +
+
+
+
+
+
+ +
+ + + ) } -export default StylePage \ No newline at end of file +export default LifestylePage diff --git a/src/pages/TravelPage.tsx b/src/pages/TravelPage.tsx index 3e44829..dcbc019 100644 --- a/src/pages/TravelPage.tsx +++ b/src/pages/TravelPage.tsx @@ -1,11 +1,499 @@ +import { Container } from '@mui/material' +import './Scss/LifestylePage.scss' +import './Scss/TravelPage.scss' import React from 'react' +import like from 'assets/like.png' +import image1 from 'assets/slider-picture-1.jpeg' +import image2 from 'assets/slider-picture-2.jpeg' +import image3 from 'assets/slider-picture-3.jpeg' +import image4 from 'assets/city-life-image-4.jpeg' +import image5 from 'assets/lifestyle-image-1.jpeg' type Props = {} -const TravelPage = (props: Props) => { - return ( -
TravelPage
- ) +const LifestylePage = (props: Props) => { + return ( + <> + +
+
+
Travel
+
9 posts
+
+
+ + Travel + +
+ Do Cheap Photographers Take Work Away From + the Rest of Us? +
+
+ +
+
+
+
+
+ +
+
+ + Travel + +
+ Tips for Creating Awesome Double + Exposures In-Camera +
+
+
+
+
+ +
+
+ + Travel + +
+ Photography Lighting Lesson – How + Light Reflects Off Glass +
+
+
+
+
+
+

+
+ +
+

+ Recommended Filters to Use With + Black and White Photography +

+ + +
+
+
+ +
+
+ + Travel + +
+ Can You Break the Rules of + Composition in Photography? +
+
+
+
+
+
+
+ +
+
+ + Travel + +
+ How to Add a Texture to Your Photos + – a Tutorial on Adding Textures +
+
+
+
+
+ +
+
+ + Travel + +
+ 12 Tips to Help You Improve Your + Nature Photography Skills +
+
+
+
+
+ +
+
+ + Travel + +
+ Everything You Need to Know About + Macro Photography +
+
+
+
+
+ +
+
+ + Travel + +
+ 11 Travel Photography Tips When + Traveling With Young Children +
+
+
+
+
+
+ +
+ + + ) } -export default TravelPage \ No newline at end of file +export default LifestylePage