landing page responsive
This commit is contained in:
parent
7051807ccf
commit
53a7fa6494
|
|
@ -16,6 +16,10 @@ body {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-75{
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.h-fit{
|
||||
height: fit-content;
|
||||
}
|
||||
|
|
@ -355,9 +359,17 @@ body {
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.ilustration-img{
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.landing-page section:not(:last-of-type){
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Navbar, Nav, Container, Button } from 'react-bootstrap';
|
||||
import { Navbar, Nav, Container, Button, Offcanvas } from 'react-bootstrap';
|
||||
import logo from '../../../assets/images/logo.png';
|
||||
import logoWhite from '../../../assets/images/logo-w.png';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
|
@ -8,6 +8,10 @@ const MainNav = () => {
|
|||
const location = useLocation();
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
const [show, setShow] = useState(false);
|
||||
const handleClose = () => setShow(false);
|
||||
const handleShow = () => setShow(true);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 80) {
|
||||
setScrolled(true);
|
||||
|
|
@ -25,14 +29,15 @@ const MainNav = () => {
|
|||
|
||||
const getNavbarMenu = () => {
|
||||
if (location.pathname === '/') {
|
||||
return 'd-block w-100';
|
||||
return 'd-block flex-grow-1';
|
||||
} else{
|
||||
return 'd-none'
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar collapseOnSelect expand="md" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}>
|
||||
<>
|
||||
<Navbar collapseOnSelect expand="lg" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}>
|
||||
<Container>
|
||||
{/* <Navbar.Brand href="#home" className='text-white'>
|
||||
<img
|
||||
|
|
@ -51,6 +56,7 @@ const MainNav = () => {
|
|||
/>{' '}
|
||||
</Navbar.Brand>
|
||||
<div className={getNavbarMenu()}>
|
||||
<div className='d-none d-lg-block'>
|
||||
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
|
||||
<Navbar.Collapse id="responsive-navbar-nav">
|
||||
<Nav className="w-100 w-lg-75 justify-content-center">
|
||||
|
|
@ -62,14 +68,37 @@ const MainNav = () => {
|
|||
<Nav.Link href="/signup" className='text-white me-3 d-block d-md-none'>Sign Up</Nav.Link>
|
||||
<Nav.Link href="/login" className='text-white me-3 d-block d-md-none'>Login</Nav.Link>
|
||||
</Nav>
|
||||
<Nav className='d-none d-lg-flex'>
|
||||
<Nav className='d-flex'>
|
||||
<Button as='a' href='/signup' variant='white-blue' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Sign<span className="ts">_</span>Up</Button>
|
||||
<Button as='a' href='/login' variant='outline-white' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Login</Button>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</div>
|
||||
<div className='d-flex d-lg-none justify-content-end'>
|
||||
<Button variant="outline-white" onClick={handleShow}>
|
||||
<i className="bi bi-list text-white"></i>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Navbar>
|
||||
<Offcanvas show={show} onHide={handleClose} placement='end'>
|
||||
<Offcanvas.Header closeButton>
|
||||
<Offcanvas.Title>Menu</Offcanvas.Title>
|
||||
</Offcanvas.Header>
|
||||
<Offcanvas.Body>
|
||||
<Nav.Link href="#hero" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
|
||||
<Nav.Link href="#whatis" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>What Is.</Nav.Link>
|
||||
<Nav.Link href="#feature" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Feature.</Nav.Link>
|
||||
<Nav.Link href="#youget" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>You Get.</Nav.Link>
|
||||
<Nav.Link href="#contacts" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top border-bottom text-blue'>Join Now.</Nav.Link>
|
||||
<div className="d-flex w-100 justify-content-between mt-3">
|
||||
<Nav.Link href="/signup" style={{fontSize:"3.5vh"}} className='w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
|
||||
<Nav.Link href="/login" style={{fontSize:"3.5vh"}} className='w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
|
||||
</div>
|
||||
</Offcanvas.Body>
|
||||
</Offcanvas>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -15,15 +15,15 @@ const Home = () => {
|
|||
<section id='hero' className='bg-gd h-screen position-relative'>
|
||||
<Container className='pt-5 position-relative' style={{zIndex:"2"}}>
|
||||
<Row>
|
||||
<Col md={6} className="col-12 pe-5 text-white d-flex flex-column">
|
||||
<Col lg={6} className="col-12 pe-5 text-white d-flex flex-column">
|
||||
<h1 className='fw-bold display-4'>Your Learning, <br /> Your Way</h1>
|
||||
<p className='pe-5 fs-5 mt-4'>Transform the way you learn <span className='text-warning'>English</span> with exercises that adapt to your pace and style.</p>
|
||||
<div className="d-flex w-100 pe-5 mt-4">
|
||||
<Button variant='warning' size='lg' className='rounded-4 me-3 w-100 text-dark'>SIGN UP</Button>
|
||||
<div className="d-flex w-100 pe-5 mt-4 flex-column flex-sm-row">
|
||||
<Button variant='warning' size='lg' className='rounded-4 me-3 mb-3 mb-sm-0 w-100 text-dark'>SIGN UP</Button>
|
||||
<Button variant='outline-light' size='lg' className='rounded-4 w-100'>READ MORE</Button>
|
||||
</div>
|
||||
</Col>
|
||||
<Col md={6} className="col-12 d-flex items-center">
|
||||
<Col lg={6} className="col-12 d-none d-lg-flex items-center">
|
||||
<img src={illustration} alt="/" className='w-100'/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -35,8 +35,8 @@ const Home = () => {
|
|||
<section id='whatis'>
|
||||
<Container className='mt-5'>
|
||||
<Row>
|
||||
<Col md={6} className='col-12'>
|
||||
<img src={illustration2} alt="/" />
|
||||
<Col md={6} className='col-12 d-none d-md-block'>
|
||||
<img src={illustration2} alt="/" className='w-75'/>
|
||||
</Col>
|
||||
<Col md={6} className='col-12 d-flex flex-column justify-content-center'>
|
||||
<div className='d-flex align-items-center mb-3'>
|
||||
|
|
@ -47,8 +47,8 @@ const Home = () => {
|
|||
<p className='fs-5'>
|
||||
<span className='text-blue fw-bold'>SEALS</span> refers to a personalized approach to language education that adjusts to the individual learner's needs, pace, and skill level.
|
||||
</p>
|
||||
<div className="d-flex">
|
||||
<Button variant='gd' size='lg' className='rounded-4 w-100 me-3'>Basic Learning</Button>
|
||||
<div className="d-flex flex-column flex-sm-row">
|
||||
<Button variant='gd' size='lg' className='rounded-4 w-100 me-3 mb-3 mb-sm-0'>Basic Learning</Button>
|
||||
<Button variant='gd' size='lg' className='rounded-4 w-100'>Advance Learning</Button>
|
||||
</div>
|
||||
</Col>
|
||||
|
|
@ -63,7 +63,7 @@ const Home = () => {
|
|||
<span className='text-blue fw-bold'> English</span> skills.
|
||||
</h5>
|
||||
<Row>
|
||||
<Col sm={6} md={3} className='col-12'>
|
||||
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
||||
<div className='p-4 rounded rounded-4 bg-white'>
|
||||
<img src={Feature1} alt="/" />
|
||||
<h4 className='my-3'>Listening</h4>
|
||||
|
|
@ -72,7 +72,7 @@ const Home = () => {
|
|||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={6} md={3} className='col-12'>
|
||||
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
||||
<div className='p-4 rounded rounded-4 bg-white'>
|
||||
<img src={Feature2} alt="/" />
|
||||
<h4 className='my-3'>Reading</h4>
|
||||
|
|
@ -81,7 +81,7 @@ const Home = () => {
|
|||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={6} md={3} className='col-12'>
|
||||
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
||||
<div className='p-4 rounded rounded-4 bg-white'>
|
||||
<img src={Feature3} alt="/" />
|
||||
<h4 className='my-3'>Grammar</h4>
|
||||
|
|
@ -90,7 +90,7 @@ const Home = () => {
|
|||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={6} md={3} className='col-12'>
|
||||
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
||||
<div className='p-4 rounded rounded-4 bg-white'>
|
||||
<img src={Feature4} alt="/" />
|
||||
<h4 className='my-3'>Vocabulary</h4>
|
||||
|
|
@ -105,8 +105,8 @@ const Home = () => {
|
|||
<section id='youget'>
|
||||
<Container className='mt-5'>
|
||||
<Row>
|
||||
<Col md={6} className='col-12'>
|
||||
<img src={SvgService} alt="/" />
|
||||
<Col md={6} className='col-12 d-none d-md-block'>
|
||||
<img src={SvgService} alt="/" className='w-75'/>
|
||||
</Col>
|
||||
<Col md={6} className='col-12'>
|
||||
<h1 className='fw-bold'>What Will You <span className='text-blue'>Get </span>?</h1>
|
||||
|
|
@ -176,7 +176,7 @@ const Home = () => {
|
|||
</div> */}
|
||||
<Container className='position-relative' style={{zIndex:"2"}}>
|
||||
<Row>
|
||||
<Col sm={6} className='col-12 pe-5'>
|
||||
<Col md={6} className='col-12 pe-5'>
|
||||
<div>
|
||||
<h4>SEALS</h4>
|
||||
<p className='text-blue-50'>The first free end-to-end analytics service for the site, designed to work with enterprises of various levels and business segments.</p>
|
||||
|
|
@ -211,7 +211,7 @@ const Home = () => {
|
|||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={6} className='col-12 ps-5 d-flex flex-column justify-content-between'>
|
||||
<Col md={6} className='col-12 ps-5 d-none d-md-flex flex-column justify-content-between'>
|
||||
<div className="d-flex">
|
||||
<a href="#whatis" className='me-4 text-white text-decoration-none'>What is.</a>
|
||||
<a href="#feature" className='me-4 text-white text-decoration-none'>Feature.</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user