Design goal section.

TrueMoein · Feb 25, 2019 · 8e7dabb · 8e7dabb
1 parent bba98d7
commit 8e7dabb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
@@ -68,15 +68,16 @@ class Index extends React.Component {
         <div className="goal-section">
           <div className="wrapper">
             <div className="row">
-              <div className="col-md-7 col-xs-12">
+              <div className="col-md-7 col-xs-12 goal-text">
                 <h1>هدف</h1>
-                <p>این روزها جاوااسکریپت به امپراطور وب تبدیل شده است.
-                  این که این زبان و فریمورک های مربوط به آن را یا د بگیریم، کمک بسیاری
-                  برای تبدیل شدن به یک همه فن حریف در وب به ما خواهد داد.
+                <p>
+                    این روزها جاوااسکریپت به معروف‌ترین و پرکاربردترین زبان برنامه نویسی تبدیل شده.
+                    تقریبا هیچ کاری نیست که با این زبان نشه انجام داد.
+                    آقای <a href="https://en.wikipedia.org/wiki/Jeff_Atwood" target="_blank">Jeff Atwood</a> گفته "هر برنامه ای که بتوان با جاوااسکریپت نوشت، در نهایت با جاوااسکریپت نوشته خواهد شد."
                 </p>
               </div>
-              <div className="col-md-5 col-xs-12 booklet-image">
-                <img width="220" src="/img/booklets/JS-Book.png" />
+              <div className="col-md-5 col-xs-12 booklet-image hide-xs">
+                <img width="210" src="/img/booklets/JS-Book.png" alt="JSBooklet - کتابچه آموزش جاوااسکریپت" />
               </div>
             </div>
           </div>

diff --git a/website/static/css/custom.css b/website/static/css/custom.css
@@ -62,7 +62,9 @@
   .navigationSlider .slidingNav ul li a {
     color: #101010;
   }
-
+  .hide-xs {
+    display: none;
+  }
   .navigationSlider .slidingNav ul li a:focus, .navigationSlider .slidingNav ul li a:hover, .navigationSlider .slidingNav ul li.siteNavItemActive a, .navigationSlider .slidingNav ul li.siteNavGroupActive a {
     color: white;
   }
@@ -184,14 +186,22 @@ table {
   margin-bottom: 25px;
 }
 
-.booklet-image-link{
+.booklet-image-link {
   height: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   display: block;
 }
 
+.homeSplashFade {
+  padding: 30px 0;
+}
+
+#booklets {
+  padding-top: 75px;
+}
+
 .nav-footer .sitemap a {
   margin: 0;
 }
@@ -200,7 +210,22 @@ table {
   background: #20232A;
   color: white;
   margin-top: -48px;
-  height: 400px;
+}
+
+.goal-section h1 {
+  font-size: 10vh;
+  margin-top: .5em;
+}
+
+.goal-section p {
+  line-height: 2;
+  font-size: 21px;
+  text-align: justify;
+}
+
+.goal-section img {
+  margin-top: -10px;
+  transform: rotate(-2deg);
 }
 
 .booklet-image {