Skip to content

Commit

Permalink
Merge pull request #17 from sahhoArjun097/main
Browse files Browse the repository at this point in the history 
ADD FOOTER SECTION TO THE PAGE #14
  • Loading branch information
@skmirajulislam
skmirajulislam authored Oct 4, 2024
2 parents 697f668 + 9d0e199 commit 4458942
Show file tree
Hide file tree
Showing 7 changed files with 395 additions and 199 deletions.
31 changes: 17 additions & 14 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,29 @@ import Quiz from './Quiz.js';
import Craft from './Craft.js';
import Sef from './Sef.js';
import Act from './Act.js';
import Footer from './Footer.js';



function App () {
return (
<>

<div>
<Nabar/>
<Routes>

<Route path ='/' element={<Hom/>}/>
<Route path ='educ' element={<Educ/>}/>
<Route path ='sef' element={<Sef/>}/>
<Route path ='craft' element={<Craft/>}/>
<Route path ='quiz' element={<Quiz/>}/>
<Route path ='act' element={<Act/>}/>
</Routes>


<Nabar />
<main>
<Routes>
<Route path='/' element={<Hom />} />
<Route path='educ' element={<Educ />} />
<Route path='sef' element={<Sef />} />
<Route path='craft' element={<Craft />} />
<Route path='quiz' element={<Quiz />} />
<Route path='act' element={<Act />} />
</Routes>
</main>
<Footer/>

</div>
</>
</>
);
}

Expand Down
4 changes: 1 addition & 3 deletions src/Educ.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,7 @@ Turn lessons into adventures with activity-based discovery.

</main>

<footer style={{ backgroundColor: '#333', color: '#fff', padding: '20px', textAlign: 'center' }}>
<p>&copy; Edu@enyanjyoti. All rights reserved.</p>
</footer>




Expand Down
33 changes: 33 additions & 0 deletions src/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import './footer.css';

function Footer() {
return (
<footer>
<div class="footer-content">
<h3>Ready to Elevate Your Future?</h3>
<p>
Dive into our resources for education, career opportunities, and financial assistance. Unlock your potential with us!
</p>
<div class="footer-buttons">
<button class="btn" id="explore-education">Explore Education</button>
<button class="btn">Start Your Career</button>
<button class="btn">Learn About Grants</button>
</div>
</div>
<hr />
<div class="social-links">
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer">Instagram</a>
<a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<a href="https://www.twitter.com" target="_blank" rel="noopener noreferrer">Twitter</a>
<a href="https://www.github.com" target="_blank" rel="noopener noreferrer">GitHub</a>
</div>
<p class="copyright">&copy; 2024 Edu@enyanjyoti. All rights reserved.</p>
</footer>



)
}

export default Footer
273 changes: 135 additions & 138 deletions src/Hom.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import './Hom.css'
import {Navigate} from 'react-router-dom'
import { Navigate } from 'react-router-dom'
import {
MDBCard,
MDBCardTitle,
Expand All @@ -10,152 +10,149 @@ import {
MDBRow,
MDBCol
} from 'mdb-react-ui-kit';
function Hom () {
const [goToEduc,setGoToEduc] = React.useState(false);
if (goToEduc)
{
return <Navigate to ='/educ' />;
}
return (


function Hom() {
const [goToEduc, setGoToEduc] = React.useState(false);
if (goToEduc) {
return <Navigate to='/educ' />;
}
return (


<div style={{ backgroundImage: 'url("./images/e13.jpg")', backgroundSize: 'cover', backgroundPosition: 'center' }}>
<main>
<section>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src="./images/e2.png" class="d-block w-100" alt="..."/>

</div>


</div>


</div>
<b></b>
</section>

<section class="my-5" >
<div class="py-5">
<div className="container">
<div className="col">
<h1 align="center" style={{color : 'white'}}>Dive into the World of Knowledge, Skills and Wisdom</h1>
<div class="py-5">

</div>

<div>
<MDBCard style={{ maxWidth: '700px', margin: 'auto', marginBottom: '200px', borderRadius : '5px',borderColor : 'black', backgroundColor :'#1565C0',}}>
<MDBRow className='g-0'>
<MDBCol md='4'>
<MDBCardImage src='./images/e3.png' alt='...' fluid style={{ height: '100%',width :'auto'}}/>
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<div class="card-header" style={{backgroundColor : 'lightblue'}}>
<MDBCardTitle className='card-title' align='center' style={{fontWeight :'bold' }} >Education</MDBCardTitle>
</div>
<div class="py-5">
<MDBCardText className='card-text' style={{color :'white' }} >
Get complete understanding of concepts. Adapt life skills.
Gain general knowledge and enjoy activity based learning.
</MDBCardText>
</div>
<div class="py-2">
<button type="button" class="btn btn-primary" onClick ={() =>{ setGoToEduc(true);}}>Learn Now</button>
</div>

</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>




</div>
<div>
<MDBCard style={{ maxWidth: '700px', margin: 'auto', marginBottom: '200px', borderRadius : '5px',borderColor : 'black', backgroundColor :'#4527A0'}}>
<MDBRow className='g-0'>
<MDBCol md='4'>
<MDBCardImage src='./images/e4.png' alt='...' fluid style={{ height: '100%',width :'auto'}} />
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<div class="card-header" style={{backgroundColor : 'lightblue'}}>
<MDBCardTitle className='card-title' align='center' style={{fontcolor :'white',fontWeight :'bold' }}>Career </MDBCardTitle>
</div>
<div class="py-5">
<MDBCardText className='card-text' style={{color :'white' }}>
Explore Career opportunities and make yourself ready for employment in various fields.
Learn how to build your own startup and become a successful Entrepreneur
</MDBCardText>
</div>
<div class="py-2">
<button type="button" class="btn btn-primary">Explore Now</button>
</div>
<div>

</div>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>




</div>
<div>
<MDBCard style={{ maxWidth: '700px', margin: 'auto', marginBottom: '200px', borderRadius : '5px',borderColor : 'black', backgroundColor :'#00838F'}}>
<MDBRow className='g-0'>
<MDBCol md='4'>
<MDBCardImage src='./images/e5.png' alt='...' fluid style={{ height: '100%',width :'auto'}} />
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<div class="card-header" style={{backgroundColor : 'lightblue'}}>
<MDBCardTitle className='card-title' align='center' style={{fontcolor :'white',fontWeight :'bold' }}>Loans and Grants</MDBCardTitle>
<main>
<section>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src="./images/e2.png" class="d-block w-100" alt="..." />

</div>


</div>


</div>
<b></b>
</section>

<section class="" >
<div class="py-5">
<MDBCardText className='card-text' style={{color :'white' }}>
Complete information about loans, grants and scholarships. Simple procedure and steps to apply easily.
</MDBCardText>
</div>
<div class="py-2">
<button type="button" class="btn btn-primary">Check Now </button>
</div>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>
<div className="container">
<div className="col">
<h1 align="center" style={{ color: 'white' }}>Dive into the World of Knowledge, Skills and Wisdom</h1>
<div class="py-5">

</div>

<div>
<MDBCard style={{ maxWidth: '700px', margin: 'auto', marginBottom: '200px', borderRadius: '5px', borderColor: 'black', backgroundColor: '#1565C0', }}>
<MDBRow className='g-0'>
<MDBCol md='4'>
<MDBCardImage src='./images/e3.png' alt='...' fluid style={{ height: '100%', width: 'auto' }} />
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<div class="card-header" style={{ backgroundColor: 'lightblue' }}>
<MDBCardTitle className='card-title' align='center' style={{ fontWeight: 'bold' }} >Education</MDBCardTitle>
</div>
<div class="py-5">
<MDBCardText className='card-text' style={{ color: 'white' }} >
Get complete understanding of concepts. Adapt life skills.
Gain general knowledge and enjoy activity based learning.
</MDBCardText>
</div>
<div class="py-2">
<button type="button" class="btn btn-primary" onClick={() => { setGoToEduc(true); }}>Learn Now</button>
</div>


</div>

</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>


</div>
</div>
</div>
</section>


</main>

<footer style={{ backgroundColor: '#333', color: '#fff', padding: '20px', textAlign: 'center' }}>
<p>&copy; Edu@enyanjyoti. All rights reserved.</p>
</footer>
</div>

</div>
<div>
<MDBCard style={{ maxWidth: '700px', margin: 'auto', marginBottom: '200px', borderRadius: '5px', borderColor: 'black', backgroundColor: '#4527A0' }}>
<MDBRow className='g-0'>
<MDBCol md='4'>
<MDBCardImage src='./images/e4.png' alt='...' fluid style={{ height: '100%', width: 'auto' }} />
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<div class="card-header" style={{ backgroundColor: 'lightblue' }}>
<MDBCardTitle className='card-title' align='center' style={{ fontcolor: 'white', fontWeight: 'bold' }}>Career </MDBCardTitle>
</div>
<div class="py-5">
<MDBCardText className='card-text' style={{ color: 'white' }}>
Explore Career opportunities and make yourself ready for employment in various fields.
Learn how to build your own startup and become a successful Entrepreneur
</MDBCardText>
</div>
<div class="py-2">
<button type="button" class="btn btn-primary">Explore Now</button>
</div>
<div>

</div>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>




</div>
<div>
<MDBCard style={{ maxWidth: '700px', margin: 'auto', marginBottom: '200px', borderRadius: '5px', borderColor: 'black', backgroundColor: '#00838F' }}>
<MDBRow className='g-0'>
<MDBCol md='4'>
<MDBCardImage src='./images/e5.png' alt='...' fluid style={{ height: '100%', width: 'auto' }} />
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<div class="card-header" style={{ backgroundColor: 'lightblue' }}>
<MDBCardTitle className='card-title' align='center' style={{ fontcolor: 'white', fontWeight: 'bold' }}>Loans and Grants</MDBCardTitle>
</div>
<div class="py-5">
<MDBCardText className='card-text' style={{ color: 'white' }}>
Complete information about loans, grants and scholarships. Simple procedure and steps to apply easily.
</MDBCardText>
</div>
<div class="py-2">
<button type="button" class="btn btn-primary">Check Now </button>
</div>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>




</div>



</div>
</div>
</div>
</section>


</main>


</div>
);
}

export default Hom;
Loading

0 comments on commit 4458942

Please sign in to comment.