Skip to content

[Footer] and[css effects]:Added #39

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

Open
PranjaliBhardwaj wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Footer] and[css effects]:Added #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
}

.light-mode {
background-image: linear-gradient(to right, #FFffff 0%, #B4CEFF 100%);
background-image: linear-gradient(to right, #a7d7bc 0%, #d784b9 100%);
/* Other light mode styles */
}

.dark-mode {
background-image: radial-gradient(black, rgb(9, 7, 43), rgb(3, 67, 67));
background-image: radial-gradient(rgb(102, 76, 76), rgb(9, 7, 43), rgb(3, 67, 67));
/* Other dark mode styles */
}

Expand Down Expand Up @@ -182,6 +182,6 @@ body {
}
.btn-hover:hover {
background-color: white;
color: black !important;
color: rgb(177, 189, 128) !important;
}

4 changes: 4 additions & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
import Profile from "./pages/Profile";
import Home from "./pages/Home";
import ContactUs from "./pages/ContactUs";
import Footer from "./footer/footer";

function App() {
return (
Expand All @@ -13,8 +14,11 @@ function App() {
<Route exact path="/" element={<Home />} />
<Route exact path="/tasty-tips" element={<Home />} />
<Route exact path="/contactus" element={<ContactUs />} />

</Routes>
<Footer/>
</div>

</BrowserRouter>
);
}
Expand Down
122 changes: 122 additions & 0 deletions src/footer/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
.scetion_padding{
padding: 4rem 4rem;
}
.footer{
background-color: #2d2d32;
}
.sb_footer{
display: flex;

}

.sb_footer-links{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
text-align: left;
margin-bottom: 2rem;
}
.sb_footer-links_div{
width: 150px;
margin: 1rem;
display: flex;
justify-content: flex-start;
flex-direction: column;
color: white;
margin-left: 120px;
}

a{
color: rgb(175, 175, 179);
text-decoration: none;
}
.socialmedia{
display: flex;
flex-direction: row;
}
.socialmedia img{
width: 80%;
}
.sb_footer-links_div h4{
font-size: 14px;
line-height: 17px;
margin-bottom: 0.9rem;
}
.sb_footer-links-div p{
font-size: 12px;
line-height: 15px;
margin: 0.5rem 0;
cursor: pointer;
}
.sb_footer-below{
display: flex;
flex-direction: row!important;
justify-content: space-between;
margin-top: 0.2rem;
}
.sb_footer-below-links{
display: flex;
flex-direction: row;

}
.sb_footer-below-links p{
font-size: 13px;
line-height: 15px;
margin-left: 2rem;
margin-right: 2rem;
padding-left: 2rem;
padding-right: 2rem;
color: white;
font-weight: 600;
display: flex;
flex-direction: row;
margin: 0;
justify-content: space-evenly;
align-items: row;
}
hr{
color: white !important;
width: 100%;
}
.sb_footer-copyright p{
font-size: 13px;
line-height: 15px;
color:white;
font-weight: 600;
}
@media screen and (max-width: 850px) {
.sb_footer-heading h1{
font-size: 44px;
line-height: 50px;
}
}
@media screen and (max-width: 550px){
.sb_footer-heading h1{
font-size: 34px;
line-height: 42px;
}
.sb_footer-links div{
margin: 1rem 0;
}
.sb_footer-btn p{
font-size: 14px;
line-height: 20px;
}
.sb_footer-below{
flex-direction: column;
justify-content: left;
}
.sb_footer-below-links p{
margin-left: 0rem;
margin-top: 1rem;
}
}
@media screen and (max-width: 400px) {
.sb_footer-heading h1{
font-size: 27px;
line-height: 38px;
}
}
83 changes: 83 additions & 0 deletions src/footer/footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from "react";
import './footer.css';

const Footer=()=>{
return (
<div className="footer">
<div classNmae="Sb_footer section_padding">
<div className="sb_footer-links">
<div className="sb_footer-links_div">
<h4>For Buisness</h4>
<a href="/employer">
<p>Employer</p>
</a>
<a href="/employer">
<p>Collaborate</p>
</a>
<a href="/employer">
<p>Indivisual</p>
</a>
</div>
<div className="sb_footer-links_div">
<h4>Explore</h4>
<a href="/resource">
<p>Healthy</p>
</a>
<a href="/resource">
<p>Fast Food</p>
</a>
<a href="/resource">
<p>Desserts</p>
</a>
</div>
<div className="sb_footer-links_div">
<h4>Cusines</h4>
<a href="/employer">
<p>Chineese</p>
</a>
<a href="/employer">
<p>Thai</p>
</a>
<a href="/employer">
<p>Mexican</p>
</a>
</div>
<div className="sb_footer-links_div">
<h4>Company</h4>
<a href="/about">
<p>About</p>
</a>
<a href="/press">
<p>Press</p>
</a>
<a href="/career">
<p>Career</p>
</a>
<a href="/contact">
<p>Contact</p>
</a>
</div>
<div className="socialmedia">
<p></p>
</div>
</div>
</div>
<hr></hr>
<div className="sb_footer-below">

<div className="sb_footer-copyright">
<p>
@{new Date().getFullYear()} CodeInn. All right reserved.
</p>
</div>
<div className="sb_footer-below-links">
<a href="/terms"><div><p>Terms and Conditions</p></div></a>
<a href="/account"><div><p>Create Account</p></div></a>
<a href="/security"><div><p>Give Feedback</p></div></a>
<a href="/cookie"><div><p>Cookie Decleration</p></div></a>
</div>
</div>
</div>
)
}
export default Footer;