Skip to content

Commit

Permalink
updated banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahidmonowarr
shahidmonowarr committed Apr 27, 2023
1 parent 7c040e6 commit 450cc7f
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 118 deletions.
22 changes: 11 additions & 11 deletions .firebase/hosting.YnVpbGQ.cache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ fakeDB.JSON,1674368028478,8f0974d8ed36739fe0ae4c676b14cc059bc80e83621b9f29c76bdb
favicon.ico,1655560771700,5e12c71418e52a573911a3e5128e1b55e316b5912f8e749f649084d26d4f483b
manifest.json,1655353656276,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
robots.txt,1655353657779,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
asset-manifest.json,1677187746698,c7ae2988315ac6f7beba236c7c30df5e0bbe734ff8226dd4be8f56b5c2b1d00e
index.html,1677187746698,5eb13bcb489c140582158c987f0e61a439f6708aff7e897c2b234c457f482f30
static/js/787.beb77ff5.chunk.js,1677187746734,864efbac16a80e6f42adeaa335e089695d7873578a88cd006045ebb9cfa16cbe
static/js/787.beb77ff5.chunk.js.map,1677187746734,a49faf1fb700667092e4f4cad92519fb3364e7fccfe2c911b0346534a2a9dcbd
static/js/main.32e57a60.js.LICENSE.txt,1677187746734,a4bf333c58f9e94274c19b9aee77a652337affee13e747a3e15415ca14c01597
static/media/review.8693276546367883219d.jpg,1677187746734,6e79fc230beb384db59ceec9ebcdf2eb74b2270d4c032860146711b7f4e501bb
static/media/logo.e89c1383872aa95a5c3c.png,1677187746734,0562a877f82e12c660fc14436a6da61e9a7033cda1b7e95fd9d4e0d9e0a06d57
static/css/main.1b79b855.css,1677187746734,84a0931ca3bbd63689f2816ad4b169c4875261b0e9bb961845281eed56985f95
static/css/main.1b79b855.css.map,1677187746734,70d5640db8e98f7e32e4908e761fd3e68797e658c6b7f6bb548d9a853ff89822
static/js/main.32e57a60.js,1677187746734,44e320fe8878c5daa4ca135068c26e1c91cfd0ffd4a208f7399c4f8782781e7e
static/js/main.32e57a60.js.map,1677187746734,8ca3e683c5bc11a1658c4947a20b24c57bdb2518377faeb4d7f5902a19c71c28
asset-manifest.json,1677191618050,a3639ed21a96467a59ef840556097811861ff6175baaf993f410ca83400974f2
index.html,1677191618050,42469948036246f3bd8687bcba3e3b6aa96e577c2bff4df300629ef44615850e
static/js/787.beb77ff5.chunk.js,1677191618065,864efbac16a80e6f42adeaa335e089695d7873578a88cd006045ebb9cfa16cbe
static/js/787.beb77ff5.chunk.js.map,1677191618081,a49faf1fb700667092e4f4cad92519fb3364e7fccfe2c911b0346534a2a9dcbd
static/js/main.42abb3ac.js.LICENSE.txt,1677191618065,a4bf333c58f9e94274c19b9aee77a652337affee13e747a3e15415ca14c01597
static/media/review.8693276546367883219d.jpg,1677191618065,6e79fc230beb384db59ceec9ebcdf2eb74b2270d4c032860146711b7f4e501bb
static/media/logo.e89c1383872aa95a5c3c.png,1677191618065,0562a877f82e12c660fc14436a6da61e9a7033cda1b7e95fd9d4e0d9e0a06d57
static/css/main.1b79b855.css,1677191618065,84a0931ca3bbd63689f2816ad4b169c4875261b0e9bb961845281eed56985f95
static/css/main.1b79b855.css.map,1677191618065,70d5640db8e98f7e32e4908e761fd3e68797e658c6b7f6bb548d9a853ff89822
static/js/main.42abb3ac.js,1677191618065,d27ed7a5c61cf200210eada1945c8601adf5eeb985821fbed89c6a49b539895a
static/js/main.42abb3ac.js.map,1677191618081,f0f793491a0a04c99915cf052127e7af5378e4dc023690d1406e5762c38b81bd
74 changes: 3 additions & 71 deletions src/Components/Banner/Banner.css
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,5 @@
/* .banner {
background: linear-gradient(#000000b3, #000000ab),
url("https://i.ibb.co/gtPQ7Qk/african-business-male-people-shaking-hands-1.jpg");
background-attachment: fixed;
font-family: 'Alfa Slab One', cursive;
background-size: cover;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
} */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

.banner{
position: relative;
background: linear-gradient(#000000b3, #000000ab),
url("https://i.ibb.co/gtPQ7Qk/african-business-male-people-shaking-hands-1.jpg");
background-attachment: fixed;
background-size: cover;
font-family: 'sans-serif';
font-weight: 800;

height: 90vh;

}
.banner h1{
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
padding-top: 20vh;
font-weight: 900;
font-size: 7.5vh;
}

.bannerBtn{
background-color : transparent;
border: none;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
text-align: center;
border-radius: 20px;
transition: all .5s ease;
}

.bannerBtn:hover{
background-color: #FFFFFF;
color: #000000;

}

.custom-shape-divider-bottom-1665992396 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}

.custom-shape-divider-bottom-1665992396 svg {
position: relative;
display: block;
width: calc(150% + 2.5px);
height: 63px;
}

.custom-shape-divider-bottom-1665992396 .shape-fill {
fill: #FFFFFF;
body {
font-family: "Poppins", sans-serif !important;
}
51 changes: 15 additions & 36 deletions src/Components/Banner/Banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,24 @@ import React from "react";
import { Link } from "react-router-dom";
import PageTitle from "../Shared/PageTitle/PageTitle";
import "./Banner.css";

const imageUrl = "https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80";
const Banner = () => {
return (
<div className="banner">
<PageTitle title="Home"></PageTitle>
<h1 className="text-center">
FIND YOUR <br /> SOLUTIONS HERE
</h1>
<Link to="/services">
{" "}
<button className="bannerBtn">Explore Now</button>
</Link>
<div class="custom-shape-divider-bottom-1665992396">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1200 120"
preserveAspectRatio="none"
>
<path
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
class="shape-fill"
></path>
</svg>
return (
<div style={{height: "100vh", backgroundImage: `url(${imageUrl})`, backgroundSize: "cover", backgroundPosition: "center"}} className="position-relative w-100"><PageTitle title="Home"></PageTitle>
<div className="position-absolute text-white d-flex flex-column align-items-start justify-content-center" style={{top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "rgba(0,0,0,.7)"}}>
<div className="container">
<div className="col-md-6">
<span style={{color: "#bbb"}} className="text-uppercase">Hello There...</span>
<h1 className="mb-4 mt-2 display-4 font-weight-bold">Find Your</h1>
<h1 className="mb-4 mt-2 display-5 font-weight-bold"><span style={{color: "#9B5DE5"}}>Solutions Here</span></h1>
<p style={{color: "#bbb"}}>We are providing best solutions here</p>
<div className="mt-5">
<Link to="/services" className="btn px-5 py-3 text-white mt-3 mt-sm-0" style={{borderRadius: "30px", backgroundColor: "#9B5DE5"}}>Get Started</Link>
</div>
</div>
</div>
{/* <div>
<h1 className="text-center">
FIND YOUR <br/> SOLUTIONS HERE
</h1>
<div className="text-center">
<Link to="/services">
{" "}
<button className="btn btn-warning text-dark">
Explore Now
</button>
</Link>
</div>{" "}
</div> */}
</div>
</div>
);
};

Expand Down

0 comments on commit 450cc7f

Please sign in to comment.