Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

use NavLink instead for navigation links #21

Merged
merged 4 commits into from
Oct 24, 2022
Merged

use NavLink instead for navigation links #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
142f34c
use NavLink instead for navigation links
tr1ms Oct 24, 2022
4ffdede
use svg instead for transparent background
tr1ms Oct 24, 2022
2724291
essentials section
tr1ms Oct 24, 2022
c4888d5
center cards on mobile
tr1ms Oct 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 14 additions & 11 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import "./App.css";
import Footer from "./Components/Footer/Footer";
import Home from "./Components/Pages/Home/Home";
import About from "./Components/Pages/About/About";
import NavBar from "./Components/Nav/NavBar";
import Contact from "./Components/Pages/Contact/Contact"
import { Route, Routes } from "react-router-dom";
import { Route, Routes, Navigate } from "react-router-dom";


function App() {
return (
<div className="container">
<NavBar />
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/ContactUs" element={<Contact />}></Route>
</Routes>
<Footer />
</div>
);
return (
<div className="container">
<NavBar />
<Routes>
<Route path="/" element={<Navigate to="/home" replace={true} />}></Route>
<Route path="/home" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/contacts" element={<Contact />}></Route>
</Routes>
<Footer />
</div>
);
}

export default App;
Binary file removed src/Assets/about.jpg
View file
Open in desktop
Binary file not shown.
361 changes: 361 additions & 0 deletions src/Assets/about.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/essentials/telescope.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/essentials/work-process.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 27 additions & 32 deletions src/Components/Nav/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,39 @@ import logo from '../../Assets/logo.png'
import './NavBar.css'
import { BiMenu } from 'react-icons/bi'
import { BsMoon } from 'react-icons/bs'
import { Link } from 'react-router-dom'
import { NavLink } from 'react-router-dom'

const NavBar = () => {
const [isExpanded, setIsExpanded] = useState(false);
const [active, setActive] = useState('#');
const [sticky, setSticky] = useState('');
const [isExpanded, setIsExpanded] = useState(false);
const [sticky, setSticky] = useState('');

//update sticky state
window.addEventListener('scroll', ()=>{
if(window.pageYOffset > 80){
setSticky("sticky");
}else setSticky("");
})
//update sticky state
window.addEventListener('scroll', () => {
if (window.pageYOffset > 80) {
setSticky("sticky");
} else setSticky("");
})

return (
<header className={`header ${sticky === "sticky" ? `sticky` : ""}`}>
<div className="logo">
<img src={logo} alt="logo" />
</div>
return (
<header className={`header ${sticky === "sticky" ? `sticky` : ""}`}>
<div className="logo">
<img src={logo} alt="logo" />
</div>

<nav className={`nav-links ${isExpanded ? `nav-toggled` : ""}`}>
<a className={`nav-link ${active === '#' ? `active` : ''}`} href="/"
onClick={()=>setActive("#")}>Home</a>
<a className={`nav-link ${active === '1' ? `active` : ''}`} href="/"
onClick={()=>setActive("1")}>About Us</a>
<a className={`nav-link ${active === '2' ? `active` : ""}`} href="/"
onClick={()=>setActive('2')}>Services</a>
<a className={`nav-link ${active === '3' ? `active` : ""}`} href="/"
onClick={()=>setActive('3')}><Link to="/ContactUs">Contact Us</Link></a>
</nav>
<nav className={`nav-links ${isExpanded ? `nav-toggled` : ""}`}>
<NavLink className="nav-link" to="/home">Home</NavLink>
<NavLink className="nav-link" to="/about">About Us</NavLink>
<NavLink className="nav-link" to="/services">Services</NavLink>
<NavLink className="nav-link" to="/contacts">Contact Us</NavLink>
</nav>

<div className="nav-buttons">
<BsMoon className='nav-icons theme-toggle'/>
<button className='btn'>Sign In</button>
<BiMenu className='nav-icons nav-toggle' onClick={ () => setIsExpanded(!isExpanded)}/>
</div>
</header>
)
<div className="nav-buttons">
<BsMoon className='nav-icons theme-toggle' />
<button className='btn'>Sign In</button>
<BiMenu className='nav-icons nav-toggle' onClick={() => setIsExpanded(!isExpanded)} />
</div>
</header>
)
}

export default NavBar
171 changes: 125 additions & 46 deletions src/Components/Pages/About/About.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,139 @@
h1, span{
font-size: 3.5rem;
h1,
span {
font-size: 3.5rem;
}
h1{
color:white;
margin-bottom:1rem;

h1 {
color: white;
margin-bottom: 1rem;
}
span{
color: #009a90;
display: block;

span {
color: #009a90;
display: block;
}
.about-intro{
display:flex;

.about-intro {
display: flex;
}
.about-text{
display: flex;
flex-direction: column;
margin:5rem ;
flex:1;

.about-text {
display: flex;
flex-direction: column;
margin: 5rem;
flex: 1;
}
.about-text p{
color: #ffff;
font-size:1rem;

.about-text p {
color: #ffff;
font-size: 1rem;
}
.about-button{
margin-top:2rem;

.about-button {
margin-top: 2rem;
}
.about-button a{
color: #ffff;
background-color: #009a90;
border: none;
padding: 0.7rem 3rem;
border-radius: 25px;
font-size: 18px;
cursor:pointer;

.about-button button {
color: #ffff;
background-color: #009a90;
border: none;
padding: 0.7rem 3rem;
border-radius: 25px;
font-size: 18px;
cursor: pointer;
}
.about-button a:hover{
background-color: #056761;

.about-button button:hover {
background-color: #056761;
}

.about-img {
flex:1;
flex: 1;
}
.about-img img{
max-width:100%;
height:auto;

.about-img img {
max-width: 100%;
height: auto;
}
/*Media Queries*/
@media(max-width: 768px){
h1, span{
font-size: 2rem;
}
.about-intro{
display: block;
}
.about-button a{
padding: 0.7rem 1rem;
border-radius: 25px;
font-size: 18px;


#essentials {
margin-top: 10rem;
text-align: center;
color: #fff;
}

.essentials_main {
font-size: 3rem;
margin-bottom: 1rem;
}
.essentials_sub {
font-size: 1.1rem;
}

.essentials_projects-link {
font-size: 1.5rem;
margin-bottom: 4rem;
}

.essentials_cards {
margin: 2rem 0;
display: flex;
justify-content: center;
}

.essentials_card {
background-color: rgba(0, 0, 0, .1);;
border-radius: 24px;
border: 2px solid rgba(255, 255, 255, .1);
padding: 2rem 1rem;
margin: 1.5rem;
max-width: 450px;
}

.essentials_img {
max-width: 50%;
margin-bottom: 1rem;
}

.essentials_caption {
/* width: 80%; */
margin: 0 auto;
}

.essentials_title {
text-transform: uppercase;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: normal;
}

.essentials_description {
line-height: 1.7;
}


/*Media Queries*/
@media(max-width: 768px) {

h1,
span {
font-size: 2rem;
}

.about-intro {
display: block;
}

.about-button a {
padding: 0.7rem 1rem;
border-radius: 25px;
font-size: 18px;
}

.essentials_cards {
flex-direction: column;
align-items: center;
}

}
Loading