footer.js
import React from "react";
import {
Box,
Container,
Row,
Column,
FooterLink,
Heading,
} from "./FooterStyle";
import Navbar from "./navbar";
import { NavBtn } from "./NavbarElements";
const Footer = () => {
return (
<Box>
<h1 style={{ color: "green", textAlign: "center", marginTop: "-50px" }}>
Nature : Contact for Boking toursim packages.
</h1>
<Container>
<Row>
<Column>
<Heading>About Us</Heading>
<FooterLink href="#">Nature</FooterLink>
<FooterLink href="#"></FooterLink>
<FooterLink href="#"></FooterLink>
</Column>
<Column>
<Heading>Services</Heading>
<FooterLink href="#">Tour And Toursim</FooterLink>
<FooterLink href="#">Toursim Packages</FooterLink>
<FooterLink href="#">Booking Tours</FooterLink>
<FooterLink href="#">Booking Hotels</FooterLink>
</Column>
<Column>
<Heading>Packages For</Heading>
<FooterLink href="#">Himachal Pradesh</FooterLink>
<FooterLink href="#">Jammu and kasmir (Jk)</FooterLink>
<FooterLink href="#">Punjab</FooterLink>
<FooterLink href="#">Chandighrah</FooterLink>
</Column>
<Column>
<Heading>Help Line</Heading>
<FooterLink href="#">Mobile No. +91865959885</FooterLink>
<FooterLink href="#">Phone No. 554985</FooterLink>
<FooterLink href="#">EMAIL</FooterLink>
</Column>
</Row>
</Container>
<Row>
<Heading>
Socail Media
<FooterLink href="#">
<i className="fab fa-facebook-f">
<span style={{ marginLeft: "10px" }}>Facebook</span>
</i>
</FooterLink>
<FooterLink href="#">
<i className="fab fa-instagram">
<span style={{ marginLeft: "10px" }}>Instagram</span>
</i>
</FooterLink>
<FooterLink href="#">
<i className="fab fa-twitter">
<span style={{ marginLeft: "10px" }}>Twitter</span>
</i>
</FooterLink>
<FooterLink href="#">
<i className="fab fa-youtube">
<span style={{ marginLeft: "10px" }}>Youtube</span>
</i>
</FooterLink>
</Heading>
</Row>
</Box>
);
};
export default Footer;
footerstyle.js
import styled from "styled-components";
export const Box = styled.div`
padding: 80px 60px;
background: #000a0b;
position: absolute;
bottom: 0;
width: 100%;
@media (max-width: 1000px) {
padding: 70px 30px;
}
`;
export const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
/* background: red; */
`;
export const Column = styled.div`
display: flex;
flex-direction: column;
text-align: left;
margin-left: 60px;
`;
export const Row = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
grid-gap: 20px;
@media (max-width: 1000px) {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
`;
export const FooterLink = styled.a`
color: #fff;
margin-bottom: 20px;
font-size: 18px;
text-decoration: none;
&:hover {
color: green;
transition: 200ms ease-in;
}
`;
export const Heading = styled.p`
font-size: 24px;
color: #fff;
margin-bottom: 40px;
font-weight: bold;
`;
app.css
.App {
width: 100%;
height: 100%;
}
h1 {
color: #000;
}
.span {
background-image: url(/src/images/13.jpg);
background-size: cover;
height: 100vh;
width: 10vw;
}
.Box {
display: flex;
flex-direction: column;
width: 30%;
margin-left: 60%;
border: 2px solid rgb(202, 192, 192);
border-radius: 12px;
box-shadow: 1px 3px 1px #9e9e9e;
height: 80%;
padding: 10px;
text-align: center;
position: absolute;
background-size: cover;
margin-top: 50px;
background-image: url(/src/images/15.jpg);
}
.Box:hover {
box-shadow: 0 8px 16px 0 slategrey;
}
.Box1 {
background-image: url(/src/images/logo.png);
background-size: cover;
width: 160px;
height: 150px;
margin-left: 5%;
position: absolute;
margin-top: 5%;
}
.Box2 {
position: absolute;
margin-top: 18%;
margin-left: 5%;
}
.text1 {
color: aliceblue;
font-size: large;
}
.par {
color: rgb(35, 204, 30);
}
.par:hover {
color: rgb(51, 136, 48);
}
.Avatar {
margin: auto;
}
.signup {
display: flex;
flex-direction: column;
justify-content: center;
width: 420px;
border: 2px solid rgb(235, 221, 221);
border-radius: 15px;
box-shadow: 1px 3px 4px #9e9e9e;
margin-top: 5%;
position: absolute;
background-color: blanchedalmond;
margin-left: 35%;
}
.butt {
text-align: center;
margin-bottom: 20px;
}
.Box3 {
background-image: url(/src/images/logo.png);
background-size: cover;
width: 160px;
height: 150px;
margin-left: 5%;
position: absolute;
margin-top: 5%;
}
.span1 {
background-image: url(/src/images/13.jpg);
background-size: cover;
height: 100vh;
width: 100vw;
}
.form {
width: 30%;
margin-left: 65%;
border: 2px solid rgb(202, 192, 192);
border-radius: 12px;
box-shadow: 1px 3px 1px #9e9e9e;
height: 80%;
position: absolute;
background-size: cover;
margin-top: 50px;
background-image: url(/src/images/12.jpeg);
}
.text2 {
color: #fff;
font-size: medium;
}
.head {
height: auto;
}
.footer {
position: relative;
margin-top: 110px;
width: 100vw;
height: 60vh;
}
.h1 {
text-align: center;
}
.table {
border: 2px solid rgb(10, 10, 10);
}
.td {
border: 2px solid rgb(10, 10, 10);
}
0 Comments