From 7e5fb96f09d9d760fa9cfea70eee6028d54a6caf Mon Sep 17 00:00:00 2001 From: iliyan Date: Fri, 10 Jan 2020 13:33:22 +0100 Subject: [PATCH] home page responcive layout --- src/components/hero/hero.scss | 24 +++--- src/components/item-home/item-home.scss | 107 +++++++++++++++++++----- src/pages/about/about.cmp.jsx | 9 +- src/pages/about/about.scss | 77 +++++++++++------ src/pages/contact/contact.scss | 12 ++- 5 files changed, 161 insertions(+), 68 deletions(-) diff --git a/src/components/hero/hero.scss b/src/components/hero/hero.scss index b4a8362..d20d878 100644 --- a/src/components/hero/hero.scss +++ b/src/components/hero/hero.scss @@ -10,22 +10,22 @@ filter: grayscale(1); width: 100%; height: 100%; - -webkit-transform: scale(2); - transform: scale(2); + // -webkit-transform: scale(2); + // transform: scale(2); opacity: 0.3; -webkit-animation: heroAnim 15s ease 1s forwards; animation: heroAnim 15s ease 1s forwards; } - @keyframes heroAnim { - from { - transform: scale(2); - -webkit-transform: scale(2); - } + // @keyframes heroAnim { + // from { + // transform: scale(2); + // -webkit-transform: scale(2); + // } - to { - transform: scale(1); - -webkit-transform: scale(1); - } - } + // to { + // transform: scale(1); + // -webkit-transform: scale(1); + // } + // } } \ No newline at end of file diff --git a/src/components/item-home/item-home.scss b/src/components/item-home/item-home.scss index a9a5e32..b3c7a65 100644 --- a/src/components/item-home/item-home.scss +++ b/src/components/item-home/item-home.scss @@ -1,4 +1,4 @@ -.slider-container{ +.slider-container { width: 100%; height: 100vh; display: flex; @@ -6,7 +6,7 @@ align-items: center; cursor: pointer; - .slide { + .slide { width: 50rem; height: 30rem; background-size: cover; @@ -17,7 +17,7 @@ position: relative; } - .title{ + .title { font-family: 'Exo', sans-serif; position: absolute; z-index: -1; @@ -26,62 +26,123 @@ font-size: 6rem; letter-spacing: 1px; color: rgb(255, 255, 255); - + } - .title-border{ + .title-border { font-family: 'Exo', sans-serif; position: absolute; color: transparent; top: 8rem; left: -6.7rem; font-size: 6rem; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #191a1d; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #191a1d; letter-spacing: 1px; } - .title, .title-border{ + .title, + .title-border { + transition: all .5s ease-out; transform: translateX(-10rem); opacity: 0; + transition-delay: .5s; } - .container-subtitile{ - background-color:#191a1d82; + .container-subtitile { + display: flex; justify-content: center; - align-items:center; + align-items: center; position: absolute; top: 16.5rem; left: -6.2rem; opacity: 0; transform: translateX(-10rem); transition: all .5s ease-out; - transition-delay:.3s ; + transition-delay: .7s; } - .subtitle{ + + .subtitle { + background-color: #191a1d82; font-size: 1.4rem; - margin: 0rem 1rem 0.2rem 1rem; + padding: 0rem 1rem 0.2rem 1rem; + margin-left: 1rem; line-height: 1.35rem; } - .redline{ - width:0; - height:2px; - background-color:crimson; + + .redline { + width: 0; + height: 2px; + background-color: crimson; transition: all .6s ease-out; - transition-delay:.7s ; + transition-delay: .7s; + } - .revield{ - .title, .title-border, .container-subtitile{ + .revield { + + .title, + .title-border, + .container-subtitile { opacity: 1; transform: translateX(0); } - .redline{ + + .redline { width: 2rem; } - + + } +} + +@media (max-width: 1025px) { + .slider-container { + + .title, + .title-border { + left: -4rem; + } + + .container-subtitile{ + left: -2.5rem; + } } } +@media (max-width: 800px) { + .slider-container { + + .title, + .title-border { + left: -2rem; + } + + .container-subtitile{ + left: -1.5rem; + } + } + +} + +@media (max-width: 600px) { + .slider-container { + + .slide { + width: 100%; + height: 100%; + } + + .title, + .title-border { + left: 1rem; + top:40%; + } + + .container-subtitile{ + left: 1.5rem; + top:56% + } + } +} \ No newline at end of file diff --git a/src/pages/about/about.cmp.jsx b/src/pages/about/about.cmp.jsx index dd179a5..b93a3b8 100644 --- a/src/pages/about/about.cmp.jsx +++ b/src/pages/about/about.cmp.jsx @@ -15,18 +15,19 @@ class AboutPage extends React.Component { handleWaypoint = () => { this.setState((prevState) => ({ - revield: !prevState.revield + revield:true })); }; render() { - console.log(this.state.revield); + return (
- +
Photographer.
-
+
+

About me

I'm a photographer who loves a challange and exiting projects.

diff --git a/src/pages/about/about.scss b/src/pages/about/about.scss index 0b8547a..eef33fc 100644 --- a/src/pages/about/about.scss +++ b/src/pages/about/about.scss @@ -19,7 +19,7 @@ transition: all 2s ease-in-out; } - .backround{ + .backround { position: absolute; z-index: -101; top: 0; @@ -54,10 +54,11 @@ transition: all .8s; transition-delay: 1s; opacity: 0; + p { margin-top: 1rem; font-size: 1.1rem; - + word-spacing: .2rem; text-align: justify; @@ -65,14 +66,14 @@ h2 { font-weight: 900; - + } } &-image-area { position: relative; width: 60%; - align-items:flex-end; + align-items: flex-end; } &-title { @@ -84,58 +85,82 @@ left: -11rem; } - .about-social{ + .about-social { margin-top: 2rem; } - .react-icons{ - margin-left:1rem; + + .react-icons { + margin-left: 1rem; width: 2rem; height: 2rem; vertical-align: middle; justify-content: center; - align-items:center; + align-items: center; color: #343333; } - .link-button{ + .link-button { border: 1px solid #343333; border-radius: 2px; color: #525050; - padding:0.5rem 1rem; + padding: 0.5rem 1rem; } - .show{ - transform:translate(0%); + .show { + transform: translate(0%); opacity: 1; } } -@media (max-width: 1024px) { - .about{ +@media (max-width: 1025px) { + .about { flex-direction: column-reverse; - height: 100vh; + height: auto; + .letters { font-size: 7rem; } - &-text, - &-image-area { - width: 100%; - flex-direction: column; - + &-text, + &-image-area { + width: 100%; + flex-direction: column; + + } + + .about-text { + margin: 2rem; + justify-content: flex-start; + align-items: flex-start; + color: #525050; + } + + &-img { + box-shadow: 0 4px 15px -15px rgb(86, 86, 86); + width: 100%; + } } +} +@media (max-width: 800px) {} + +@media (max-width: 600px) { + .about { + .letters { + font-size: 4rem; + } + } .about-text { - margin-top: 1rem; + margin: 2rem; justify-content: flex-start; align-items: flex-start; color: #525050; } - &-img { - box-shadow: 0 4px 15px -15px rgb(86, 86, 86); - width: 100%; - } + .title { + + font-size: 4rem; + } -} +} \ No newline at end of file diff --git a/src/pages/contact/contact.scss b/src/pages/contact/contact.scss index ad8c81e..83d738e 100644 --- a/src/pages/contact/contact.scss +++ b/src/pages/contact/contact.scss @@ -7,8 +7,7 @@ $grey-secondary:rgb(160, 160, 160); position: relative; height: 100vh; color: grey; - background: #191a1d; - mix-blend-mode: multiply; + &-title { margin-bottom: 2.5rem; @@ -86,7 +85,7 @@ $grey-secondary:rgb(160, 160, 160); } -@media (max-width: 1024px) { +@media (max-width: 1023px) { .contact { &-content { @@ -107,6 +106,13 @@ $grey-secondary:rgb(160, 160, 160); } } +@media (max-width: 800px) { + .contact { + height: auto; + } + +} + @media (max-width: 600px) { .contact { padding: 5em 1rem 3rem 1rem;