home page responcive layout

stharzun · Jan 10, 2020 · 7e5fb96 · 7e5fb96
1 parent 86044c7
commit 7e5fb96
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 68 deletions.
diff --git 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);
+  //   }
+  // }
 }
diff --git a/src/components/item-home/item-home.scss b/src/components/item-home/item-home.scss
@@ -1,12 +1,12 @@
-.slider-container{
+.slider-container {
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   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%
+    }
+  }
+}
diff --git 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 (
 			<div className="about flex-c">
-				<Waypoint onEnter={this.handleWaypoint} />
+
 				<div className={`letters ${this.state.revield ? 'show' : ''}`}>Photographer.</div>
 				<div className="backround" />
-				<div className={`about-text flex-c ${this.state.revield ? 'show' : ''}`}>
+        <div className={`about-text flex-c ${this.state.revield ? 'show' : ''}`}>
+        <Waypoint onEnter={this.handleWaypoint} />
 					<h1 className="title">About me</h1>
 					<h2>I'm a photographer who loves a challange and exiting projects.</h2>
 					<p>

diff --git 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,25 +54,26 @@
     transition: all .8s;
     transition-delay: 1s;
     opacity: 0;
+
     p {
       margin-top: 1rem;
       font-size: 1.1rem;
-      
+
       word-spacing: .2rem;
       text-align: justify;
 
     }
 
     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;
+
   }
-}
+}