Merge pull request #29 from MabelM1/master

Get back to develop branch so we can add new features

README.md

@@ -3,7 +3,7 @@
 ![out of bounds website](https://i.imgur.com/mcqGs4M.png)
 
 ## Mission
-*Out of Bounds* is an organization who's mission is to provide support to children of incarcerated parents through support groups and creative coping skill workshops and special bonding projects.
+*Out of Bounds* is an organization whose mission is to provide support to children of incarcerated parents through support groups and creative coping skill workshops and special bonding projects.
 
 This website was created to bring attention to cause, raise awareness of the organization and get donation pledges.
 
@@ -17,4 +17,4 @@ This website was created to bring attention to cause, raise awareness of the org
 * [Mabel] (https://github.com/MabelM1)
 * [Tanya] (https://github.com/tantany)
 * [Julie] (https://github.com/julieg18/)
-* [Mariana] (https://github.com/Av1sa)
+* [Marina] (https://github.com/Av1sa)

blocks/about/__italic-text/about__italic-text.css

@@ -1,4 +1,3 @@
 .about__italic-text {
-  font-weight: 500;
   font-style: italic;
 }

blocks/about/__text/_type/about__text_type_subtitle.css

@@ -0,0 +1,19 @@
+.about__text_type_subtitle {
+  margin: 8px 0 34px;
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+  .about__text_type_subtitle {
+    margin: 15px 0 40px;
+    font-size: 23px;
+    line-height: 31px;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .about__text_type_subtitle {
+    margin: 12px 0 45px;
+    font-size: 28px;
+    line-height: 39px;
+  }
+}

blocks/about/__text/about__text.css

@@ -1,11 +1,8 @@
 .about__text {
   font-size: 20px;
   line-height: 28px;
-  margin: 14px 0 34px;
-}
-
-.about__text:nth-of-type(2) {
-  margin: 9px 0 18px;
+  font-weight: 500;
+  margin: 34px 0 18px;
 }
 
 .about__text:last-child {
@@ -14,16 +11,16 @@
 
 @media only screen and (min-width: 769px) and (max-width: 1024px) {
   .about__text {
-    margin: 15px 0 40px;
-  }
-
-  .about__text:nth-of-type(2) {
-    margin: 0 0 18px;
+    margin: 40px 0 18px;
+    font-size: 23px;
+    line-height: 31px;
   }
 }
 
 @media only screen and (min-width: 1025px) {
   .about__text {
-    margin: 4px 0 20px;
+    margin: 45px 0 20px;
+    font-size: 28px;
+    line-height: 39px;
   }
 }

blocks/about/about.css

@@ -1,18 +1,20 @@
 @import url(./__text/about__text.css);
 @import url(./__italic-text/about__italic-text.css);
+/* Modifiers */
+@import url(./__text/_type/about__text_type_subtitle.css);
 
 .about {
-  margin: 68px 30px 0;
+  padding: 68px 30px 0;
 }
 
 @media only screen and (min-width: 769px) and (max-width: 1024px) {
   .about {
-    margin: 84px 40px 0;
+    padding: 84px 40px 0;
   }
 }
 
 @media only screen and (min-width: 1025px) {
   .about {
-    margin: 100px 40px 0;
+    padding: 100px 40px 0;
   }
 }

blocks/arrow-icon/arrow-icon.css

@@ -2,9 +2,9 @@
   font-size: 19px;
   width: 34px;
   height: 34px;
-  background: url("../../images/blue-arrow.png") center center no-repeat;
+  background: url("./blue-arrow.png") center center no-repeat;
 }
 
 .arrow-icon:hover {
-  background: url("../../images/yellow-arrow.png") center center no-repeat;
+  background: url("./yellow-arrow.png") center center no-repeat;
 }

blocks/carousel/__nav/carousel__nav.css

@@ -3,19 +3,16 @@
   align-items: center;
   justify-content: space-between;
   margin-top: 20px;
-  padding-bottom: 60px;
 }
 
 @media screen and (max-width: 1024px) {
   .carousel__nav {
     margin-top: 21px;
-    padding-bottom: 50px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .carousel__nav {
     margin-top: 17px;
-    padding-bottom: 40px;
   }
 }

blocks/carousel/carousel.css

@@ -16,5 +16,3 @@
 @import url(./__slide-button/_type/carousel__slide-button_type_prev.css);
 @import url(./__slide/_type/carousel__slide_type_statistics.css);
 @import url(./__slide/_type/carousel__slide_type_about.css);
-@import url(./__track/_type/carousel__track_type_statistics.css);
-@import url(./__track/_type/carousel__track_type_about.css);

blocks/content-subtitle/content-subtitle.css

@@ -19,3 +19,10 @@
     padding-bottom: 34px;
   }
 }
+
+@media screen and (max-width: 425px) {
+  .content-subtitle {
+    font-size: 12px;
+    padding-bottom: 26px;
+  }
+}

blocks/content-title/content-title.css

@@ -19,3 +19,10 @@
     padding-bottom: 12px;
   }
 }
+
+@media screen and (max-width: 425px) {
+  .content-title {
+    font-size: 20px;
+    padding-bottom: 12px;
+  }
+}

blocks/header/header.css

@@ -1,7 +1,3 @@
-@import url(./__background-img/header__background-img.css);
-@import url(./__background-img/_name/header__background-img_name_trees.css);
-@import url(./__background-img/_name/header__background-img_name_window.css);
-@import url(./__background-img/_name/header__background-img_name_yellow-tree.css);
 @import url(./__links/header__links.css);
 @import url(./__link/header__link.css);
 @import url(./__link/_border/header__link_border.css);
@@ -14,12 +10,17 @@
   display: flex;
   height: 750px;
   border-bottom: 50px solid #429a6b;
+  background-image: url(../../images/tablet-header-bg.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: bottom;
 }
 
 @media (min-width: 1024px) {
   .header {
     height: 530px;
     border-bottom: 40px solid #429a6b;
+    background-image: url(../../images/desktop-header-bg.png);
   }
 }
 

blocks/statistics/statistics.css

@@ -1,15 +1,17 @@
 .statistics {
   padding: 100px 40px 0;
+  padding-bottom: 60px;
 }
 
 @media screen and (max-width: 1024px) {
   .statistics {
     padding-top: 84px;
+    padding-bottom: 50px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .statistics {
-    padding: 68px 30px 0;
+    padding: 68px 30px 40px;
   }
 }

index.html

@@ -9,22 +9,6 @@
 
   <body class="page">
     <header class="header">
-      <img
-        src="./images/trees.png"
-        alt="two trees"
-        class="header__background-img header__background-img_name_trees"
-      />
-      <img
-        src="./images/window.png"
-        alt="a girl and a dog looking out a window"
-        class="header__background-img header__background-img_name_window"
-      />
-      <img
-        src="./images/yellow-tree.png"
-        alt="a yellow tree"
-        class="header__background-img header__background-img_name_yellow-tree"
-      />
-
       <div class="logo logo_place_header"></div>
       <ul class="header__links">
         <li>
@@ -52,7 +36,7 @@
     <main class="content">
       <section class="about">
         <h2 class="content-title">We provide help</h2>
-        <p class="about__text">
+        <p class="about__text about__text_type_subtitle">
           <span class="about__italic-text">Out of Bounds</span> focuses on
           prevention by showing the children of incarcerated parents that Love
           and Life have No Bounds.
@@ -76,6 +60,27 @@ <h2 class="content-title">We provide help</h2>
                   alt="2 children"
                 />
               </li>
+              <li class="carousel__slide carousel__slide_type_about">
+                <img
+                  class="carousel__bg-image"
+                  src="./images/image_children.jpg"
+                  alt="2 children"
+                />
+              </li>
+              <li class="carousel__slide carousel__slide_type_about">
+                <img
+                  class="carousel__bg-image"
+                  src="./images/image_children.jpg"
+                  alt="2 children"
+                />
+              </li>
+              <li class="carousel__slide carousel__slide_type_about">
+                <img
+                  class="carousel__bg-image"
+                  src="./images/image_children.jpg"
+                  alt="2 children"
+                />
+              </li>
             </ul>
           </div>
           <div class="carousel__nav">
@@ -106,7 +111,7 @@ <h2 class="content-title">We provide help</h2>
           coping skill workshops.
         </p>
         <p class="about__text">
-          Out of Bounds will assist in fostering and maintaining relationships
+          <span class="about__italic-text">Out of Bounds</span> will assist in fostering and maintaining relationships
           between parents and their children through programming and special
           projects.
         </p>
@@ -118,8 +123,6 @@ <h1 class="content-title">statistics are real</h1>
         <div class="carousel">
           <div class="carousel__track-container">
             <ul class="carousel__track carousel__track_type_statistics">
-              <!-- if you add new slides to the carousel, don't forget to update
-                   the width in the carousel__track_type_statistics.css file -->
               <li class="carousel__slide carousel__slide_type_statistics">
                 <img
                   src="./images/dots-background.png"