feat(ReadOurBlog): implemented border to set space

lucasmbrute2 · Oct 27, 2021 · 35dcd8a · 35dcd8a
1 parent 798b16d
commit 35dcd8a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/src/components/ReadOurBlog/ReadOurBlog.js b/src/components/ReadOurBlog/ReadOurBlog.js
@@ -10,33 +10,46 @@ import food4 from "../../img/bloco_image_4.svg"
 export default function ReadOurBlog(){
 
     return(
-        <div >
-            <Carousel
+        <div className='readOurBlog' >
+            <div style={{ marginTop: '3rem' }}>
+
+
+            <div className='readOurBlog-title' >
+                    <h2 className='readOurBlog-title-h2'>
+                        Read Our Blog
+                    </h2>
+                <p className='readOurBlog-title-p'>Far far away, behind the word mountains,  far from the countries </p>
+                <p className='readOurBlog-title-p readOurBlog-title-p-bottom'>Vokalia and Consonantia, there live the blind texts.</p>
+            </div>
+
+
+            <Carousel className='carousel'
             showThumbs = {false}
             width='30%'
             infiniteLoop = {true}
             interval= {3000}
             showIndicators= {false}
 
             >
-            <div>
+            <div className='carousel-div'>
                 <img src={food1} alt='food'/>
                 <p>Quick-start guide<br/>to nuts and seeds</p>
             </div>
-            <div>
+            <div className='carousel-div'>
                 <img src={food2} alt='food'/>
                 <p>Quick-start guide<br/>to nuts and seeds</p>
             </div>
-            <div>
+            <div className='carousel-div'>
                 <img src={food3} alt='food'/>
                 <p>Quick-start guide<br/>to nuts and seeds</p>
             </div>
-            <div>
+            <div className='carousel-div'>
                 <img src={food4} alt='food'/>
                 <p>Quick-start guide<br/>to nuts and seeds</p>
             </div>
 
             </Carousel>
         </div>
+        </div>
     ) 
 }
diff --git a/src/components/ReadOurBlog/ReadOurBlog.scss b/src/components/ReadOurBlog/ReadOurBlog.scss
@@ -0,0 +1,30 @@
+@import '../../styles/font.scss';
+@import '../../styles/style.scss';
+
+.readOurBlog{
+    background-color: #fafafc;
+
+    //===ESTILIZAÇÃO DO TÍTULO=====    
+
+    border: 2px solid rgba(255, 255, 255, 0); 
+    &-title{
+        text-align: center;
+
+        &-h2{
+            color: #1d164d;
+            font-size: 30px;
+            margin-top: 0;
+
+        }   
+
+        &-p{
+            color: #9e9baf;
+            margin: 0;
+            &-bottom{
+                margin: .7rem auto;
+
+            }
+        }
+    }
+}
+