fixing-alignment-of-badges

Signed-off-by: PRANJALRANA11 <[email protected]>
layer5io · Sep 13, 2023 · 14f027b · 14f027b
1 parent 5210a1a
commit 14f027b
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 57 deletions.
diff --git a/src/sections/Community/Members-grid/index.js b/src/sections/Community/Members-grid/index.js
@@ -34,59 +34,7 @@ const MembersGrid = (props) => {
               ))}
             </Row>
           </div>
-          <div className="AboutCommunity">
-            <div>
-              <h3 className="sectionTitle">Recognizing Community Members</h3>
-              <img id="Badge_img" src={badgeImg} alt="Layer5 Community" />
-            </div>
-            <div className="detailsCommunity">
-              <p>
-              Layer5 badges are one of the many ways that we recognize the efforts 
-              of our contributors and uplift our users. Layer5 badges represent milestones 
-              that you achieve both in using and in contributing to Layer5-supported 
-              open source projects. As a contributor, this is how you demonstrate your ownership, 
-              dedication, skills and loyalty to Layer5. As a user, 
-              this is how you demonstrate your prowess.
-              </p>
-              <p>
-                Whether as a user or a contributor, 
-                community members are awarded badges as and when they 
-                achieve any number of different milestones throughout 
-                their journey whether that accomplishment lie within a 
-                community activity or an aspect of using or contributing to a project .
-                Every community member, whether contributing with code or not, 
-                has the opportunity to obtain any number of badges in 
-                recognition of your achievements.
-              </p>
-              <p>
-              See what badges you can earn by visiting the Layer5 badges site. Collect the whole set!
-              </p>
-
-              {/* <p className="text-gray">Would you like to participate?</p> */}
-              <div className="">
-                <VintageBox right={true} vintageOne={true}>
-                  <Button
-                    primary
-                    className="banner-btn memberProfileBtn"
-                    title="Collect Badges"
-                    url="https://badges.layer5.io/"
-                    external={true}
-                  >
-                    <FaCertificate size={21} className="icon-left" />
-                  </Button>
-
-                  <Button
-                    secondary
-                    className="banner-btn two memberProfileBtn"
-                    title="Join the Community"
-                    url="https://slack.layer5.io"
-                  >
-                    <FaUsers size={21} className="icon-left" />
-                  </Button>
-                </VintageBox>
-              </div>
-            </div>
-          </div>
+
           <div className="AboutCommunity">
             <div>
               <h3 className="sectionTitle">Community Membership</h3>
@@ -163,6 +111,71 @@ const MembersGrid = (props) => {
               </div>
             </div>
           </div>
+          <div className="AboutCommunity" style={{
+            textAlign: "left",
+          }}>
+
+            <div className="detailsCommunity">
+            <h3 className="sectionTitle"
+             style={{
+              textAlign: "left",
+            }}>Recognizing Community Members</h3>
+              <p>
+              Layer5 badges are one of the many ways that we recognize the efforts
+              of our contributors and uplift our users. Layer5 badges represent milestones
+              that you achieve both in using and in contributing to Layer5-supported
+              open source projects. As a contributor, this is how you demonstrate your ownership,
+              dedication, skills and loyalty to Layer5. As a user,
+              this is how you demonstrate your prowess.
+              </p>
+              <p>
+                Whether as a user or a contributor,
+                community members are awarded badges as and when they
+                achieve any number of different milestones throughout
+                their journey whether that accomplishment lie within a
+                community activity or an aspect of using or contributing to a project .
+                Every community member, whether contributing with code or not,
+                has the opportunity to obtain any number of badges in
+                recognition of your achievements.
+              </p>
+              <p>
+              See what badges you can earn by visiting the Layer5 badges site. Collect the whole set!
+              </p>
+
+              {/* <p className="text-gray">Would you like to participate?</p> */}
+              <div className="">
+                <VintageBox left={true} vintageOne={true}>
+                <Button
+                    secondary
+                    className="banner-btn two memberProfileBtn"
+                    title="Join the Community"
+                    url="https://slack.layer5.io"
+                  >
+                    <FaUsers size={21} className="icon-left" />
+                  </Button>
+
+                  <Button
+                    primary
+                    className="banner-btn memberProfileBtn"
+                    title="Collect Badges"
+                    url="https://badges.layer5.io/"
+                    external={true}
+                    style={{
+                      marginLeft: 0,
+                    }}
+                  >
+                    <FaCertificate size={21} className="icon-left" />
+                  </Button>
+                </VintageBox>
+              </div>
+            </div>
+            <div>
+
+              <img id="Badge_img" src={badgeImg} alt="Layer5 Community" style={{
+                    marginLeft: "6rem"
+              }}/>
+            </div>
+          </div>
         </Container>
       </div>
     </MembersGridWrapper>

diff --git a/src/sections/Community/Members-grid/membersGrid.style.js b/src/sections/Community/Members-grid/membersGrid.style.js
@@ -184,6 +184,7 @@ export const MembersGridWrapper = styled.div`
     text-align: center;
     margin: auto auto 4rem;
     align-items: center;
+    margin-top: 10rem;
 
     .sectionTitle {
       width: 100%;
@@ -195,11 +196,11 @@ export const MembersGridWrapper = styled.div`
       padding-right: 3rem;
       padding-left: 3rem;
       margin-right: 3rem;
-      margin-top: 3rem;
+      margin-top: 2rem;
     }
     #Badge_img {
       width: 444px;
-      height: 305px;
+      height: auto;
     }
     .detailsCommunity {
       width: 60%;
@@ -240,6 +241,7 @@ export const MembersGridWrapper = styled.div`
     }
     .memberProfileBtn {
       margin: 1rem;
+      margin-left: 0;
     }
   }
 `;
diff --git a/src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js b/src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js
@@ -130,6 +130,7 @@ export const NewcomersGuideWrapper = styled.section`
     .table-wrapper{
       text-align: center;
       margin-bottom: 4rem;
+      margin-top: 5rem;
     }
     @media only screen and (max-width: 991px) {
       .heading-start {

diff --git a/src/sections/Community/Newcomers-guide/index.js b/src/sections/Community/Newcomers-guide/index.js
@@ -218,7 +218,7 @@ const NewcomersGuide = () => {
             </Col>
           </Row>
           <Row>
-          <Col sm={12} lg={6}>
+            <Col sm={12} lg={6} style={{marginTop:"3rem"}}>
               <h3>Recognizing Community Members</h3>
               <ol type="i">
                 <li>
@@ -231,7 +231,7 @@ const NewcomersGuide = () => {
                 <li>See what badges you can earn by visiting the {" "}
                   <a
                     href="https://badges.layer5.io"
-                    target="_blank"
+                    target="_blank" rel="noreferrer"
                   >
                     Layer5 badges site
                   </a>{" "}