fixed the major UI issues (#195)

Author: Rupeshiya

src/components/Activities/ActivityCard.js

@@ -5,8 +5,8 @@ const ActivityCard = (props) => {
         <Card style={{ width: '18rem',marginBottom:"2vh",border:"0px" }} className="shadow-lg">
 			<Card.Img variant="top" src={props.activity.img} />
 			<Card.Body>
-                <Card.Title><h3>{props.activity.title}</h3></Card.Title>
-				<Card.Text>
+                <Card.Title><h3 style={{textTransform: "capitalize"}}>{props.activity.title}</h3></Card.Title>
+				<Card.Text style={{textTransform: "capitalize"}}>
 					{props.activity.text}
 				</Card.Text>
 				<a href={props.activity.link} class="shadow lift mr-1" style={{color:"#22247A"}}><u>Read More</u></a>

src/components/ProjectSlide/ProjectSlide.js

@@ -37,16 +37,18 @@ const ProjectSlide = () => {
         <Fade {...fadeProperties}>  
         {
           images.map((each, index) =>  
-            <> 
-            <div className="each-fade">
-              <div className="image-container">
-                <img key={index} src={each.image} style={{width:"100%",height:"60vh"}} alt="images"/>
+           <div className="row">
+             <div className="col-md-12">
+               <div className="each-fade">
+                <div className="image-container">
+                  <img key={index} src={each.image} style={{width:"100%",height:"60vh"}} alt="images"/>
+                </div>
+                <h2>{each.project}</h2>
+                  <p style={{fontSize:"1.2rem"}}>{each.content}</p>
+                <button type="button" className="btn btn-default" key={index} onClick={function(e){readmore(each.link)}}>Read More</button>
               </div>
-              <h2>{each.project}</h2>
-                <p style={{fontSize:"1.2rem"}}>{each.content}</p>
-              <button type="button" className="btn btn-default" key={index} onClick={function(e){readmore(each.link)}}>Read More</button>
-            </div>
-            </>
+             </div>
+           </div>
           )
         }
         </Fade>

src/components/WhyCodeuino/WhyCodeuino.js

@@ -13,9 +13,9 @@ const WhyCodeuino = () => {
                 <Container className="col-md-6 col-0" id="whycodeuino1" style={{paddingTop:"8%",paddingBottom:"12%"}} >
                     <Image src={whycodeuino} style={{height:"100%"}} alt="why codeuino"/>
                 </Container>
-                <Container className="col-md-6 col-12" style={{paddingTop:"8%",paddingBottom:"12%",textAlign:"left"}}>
+                <Container className="col-md-6 col-12" style={{paddingTop:"8%",paddingBottom:"12%"}}>
                    <h1>What is CODEUINO?</h1> 
-                   <p>Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration platforms by giving prospectus to various other organisations, users and outreachers to showcase their products in a custom way. This wide social open networking framework organisation is driven by the volunteers all over the globe. This helps open source enthusiast to build up various technocratic social wide living softwares and researching FOSS projects under code survivors and challenging world. Codeuino takes into house the development of some of the coolest Open Source Projects that are made with the sole motive to benefit more and more people present all over the world.</p>
+                   <p style={{textAlign: "justify"}}>Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration platforms by giving prospectus to various other organisations, users and outreachers to showcase their products in a custom way. This wide social open networking framework organisation is driven by the volunteers all over the globe. This helps open source enthusiast to build up various technocratic social wide living softwares and researching FOSS projects under code survivors and challenging world. Codeuino takes into house the development of some of the coolest Open Source Projects that are made with the sole motive to benefit more and more people present all over the world.</p>
                    {/* <button type="button" class="btn btn-default">Join Us</button> */}
                 </Container>
                 <Container className="col-md-0 col-12" id="whycodeuino" style={{paddingTop:"8%",paddingBottom:"12%"}} >

src/pages/About/About.css

@@ -1,7 +1,12 @@
 .cover-img-wrapper {
     text-align: center;
     padding:20px;
-    background-color: rgb(224,226,228);
+    position: relative;
+    background: url('./codeuino-banner.jpg') no-repeat;
+    background-size: cover;
+    background-position: center;
+    height: 25vh;
+    width: 100%;
 }
 .cover-img-wrapper > img {
     width:auto;

src/pages/About/About.js

@@ -37,7 +37,6 @@ class Blog extends Component {
 
 			<div class="mt-12"></div>
             <div className="cover-img-wrapper">
-              <img src={codeuino} alt="img" />
             </div>
             <div className="container mt-5">
                 <div className="row">