prd version
This commit is contained in:
heyethereum
@@ -13,9 +13,16 @@ const About: React.FC = () => {
|
||||
<h3>About</h3>
|
||||
<span className="line"></span>
|
||||
<p>
|
||||
Sed quis nisi nisi. Proin consectetur porttitor
|
||||
dui sit amet viverra. Fusce sit amet lorem
|
||||
faucibus, vestibulum ante in, pharetra ante.
|
||||
Currently, in the QR code security landscape, there is a gap in comprehensive protection against potential
|
||||
threats posed by malicious QR codes. Existing solutions often provide basic functionality, such as scanning QR
|
||||
codes to extract website URLs. However, these applications lack robust security measures to defend users against
|
||||
various types of malicious content embedded within QR codes.
|
||||
</p>
|
||||
<p>
|
||||
Our intention with the SafeQR project is to bridge this gap by developing a comprehensive mobile application
|
||||
that offers advanced security features for scanning and interacting with QR codes. Unlike existing solutions
|
||||
that primarily focus on verifying website URLs, our app aims to take a more proactive and broad approach to QR
|
||||
code security.
|
||||
</p>
|
||||
</div>
|
||||
<div className="section-content text-center">
|
||||
@@ -30,11 +37,9 @@ const About: React.FC = () => {
|
||||
className="fa fa-life-ring"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<h5>Support</h5>
|
||||
<h5>QR Code Scanning</h5>
|
||||
<p>
|
||||
Phasellus lobortis justo a magna
|
||||
facilisis, in commodo tellus rutrum.
|
||||
Sed vitae condimentum nulla.
|
||||
The application will have the capability to scan QR codes directly using a camera or from saved images.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,9 +55,8 @@ const About: React.FC = () => {
|
||||
></i>
|
||||
<h5>Cross Platform</h5>
|
||||
<p>
|
||||
Phasellus lobortis justo a magna
|
||||
facilisis, in commodo tellus rutrum.
|
||||
Sed vitae condimentum nulla.
|
||||
Designed to function seamlessly on both iOS and Android platforms, ensuring a broad user base can
|
||||
benefit from the application's protective features.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,18 +70,17 @@ const About: React.FC = () => {
|
||||
className="fa fa-bolt"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<h5>Fast</h5>
|
||||
<h5>Sandboxing for Safe Browsing</h5>
|
||||
<p>
|
||||
Phasellus lobortis justo a magna
|
||||
facilisis, in commodo tellus rutrum.
|
||||
Sed vitae condimentum nulla.
|
||||
To enhance security, the application will open links in a sandboxed environment. This protected mode
|
||||
helps isolate and contain potential threats away from the user's device.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="about-btn">
|
||||
<a href="#" data-scroll-nav="2" className="about-btn">
|
||||
Learn More
|
||||
</a>{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
10
src/App.tsx
10
src/App.tsx
@@ -1,25 +1,25 @@
|
||||
import React from 'react';
|
||||
import Header from './Header'
|
||||
import Banner from './Banner'
|
||||
import About from './About'
|
||||
import Video from './Video'
|
||||
import Features from './Features'
|
||||
import Team from './Team'
|
||||
import Faq from './Faq'
|
||||
import Footer from './Footer'
|
||||
import ContactUs from './ContactUs'
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Header />
|
||||
<Banner />
|
||||
<About />
|
||||
<Video />
|
||||
<Features />
|
||||
<Team />
|
||||
<Faq />
|
||||
<ContactUs />
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,18 +11,6 @@ const Banner: React.FC = () => {
|
||||
<h2 className="white">
|
||||
Safe QR - Your Secure QR Code Scanner
|
||||
</h2>
|
||||
<h6 className="white">
|
||||
This awesome template designed by{" "}
|
||||
<a
|
||||
href="http://w3Template.com"
|
||||
target="_blank"
|
||||
rel="dofollow"
|
||||
className="weblink"
|
||||
>
|
||||
W3 Template
|
||||
</a>
|
||||
.
|
||||
</h6>
|
||||
<p className="banner-text white">
|
||||
Safe QR is a mobile app designed for
|
||||
scanning QR codes, offering a simple and
|
||||
@@ -30,15 +18,16 @@ const Banner: React.FC = () => {
|
||||
is easy to use and provides an interactive
|
||||
and intuitive experience for users. With
|
||||
Safe QR, you can quickly scan QR codes with
|
||||
high-quality results.
|
||||
a peace of mind.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<a href="#" rel="noopener noreferrer">
|
||||
<img
|
||||
src="../marketing/images/appstore.png"
|
||||
className="wow fadeInUp"
|
||||
data-wow-delay="0.4s"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
@@ -48,6 +37,7 @@ const Banner: React.FC = () => {
|
||||
src="../marketing/images/playstore.png"
|
||||
className="wow fadeInUp"
|
||||
data-wow-delay="0.7s"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
@@ -59,6 +49,7 @@ const Banner: React.FC = () => {
|
||||
<img
|
||||
src="../marketing/images/iphone-screen.png"
|
||||
className="img-fluid wow fadeInUp"
|
||||
alt=""
|
||||
/>{" "}
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,6 +60,7 @@ const Banner: React.FC = () => {
|
||||
<img
|
||||
className="svg-hero"
|
||||
src="../marketing/images/applight-wave.svg"
|
||||
alt=""
|
||||
/>{" "}
|
||||
</span>
|
||||
</section>
|
||||
|
||||
56
src/ContactUs.tsx
Normal file
56
src/ContactUs.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
|
||||
const ContactUs: React.FC = () => {
|
||||
return (
|
||||
<section className="contact section-padding" data-scroll-index='6'>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="sectioner-header text-center">
|
||||
<h3>Contact us</h3>
|
||||
<span className="line"></span>
|
||||
<p>We'd love to hear from you! Whether you are curious about the features, a free Trial, We're ready to serve you!</p>
|
||||
</div>
|
||||
<div className="section-content">
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-8">
|
||||
<form id="contact_form" action="mailto:safeqr.fyp.24.s2.43p@gmail.com">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<input type="text" id="your_name" className="form-input w-100" name="full-name" placeholder="Full Name" required/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<input type="email" id="email" className="form-input w-100" name="email" placeholder="Email" required />
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="subject" className="form-input w-100" name="subject" placeholder="Subject" />
|
||||
<textarea className="form-input w-100" id="message" placeholder="Message" name="message"></textarea>
|
||||
<button className="btn-grad w-100 text-uppercase" type="submit" name="button">submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="col-sm-12 col-md-12 col-lg-4">
|
||||
<div className="contact-info white">
|
||||
<div className="contact-item media"> <i className="fa fa-envelope media-left media-right-margin"></i>
|
||||
<div className="media-body">
|
||||
<p className="text-uppercase">E-mail</p>
|
||||
<p className="text-uppercase"><a className="text-white" href="mailto:safeqr.fyp.24.s2.43p@gmail.com">safeqr.fyp.24.s2.43p@gmail.com</a> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-item media"> <i className="fa fa-clock media-left media-right-margin"></i>
|
||||
<div className="media-body">
|
||||
<p className="text-uppercase">Working Hours</p>
|
||||
<p className="text-uppercase">Mon-Fri 9.00 AM to 5.00PM.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactUs;
|
||||
@@ -9,29 +9,31 @@ const Features: React.FC = () => {
|
||||
<div className="sectioner-header text-center">
|
||||
<h3>Features</h3>
|
||||
<span className="line"></span>
|
||||
<p>Safe QR is a mobile app designed for scanning QR codes, offering a simple and effective QR code scanning service. The app is easy to use and provides an interactive and intuitive experience for users. With Safe QR, you can quickly scan QR codes with high-quality results.</p>
|
||||
<p>Safe QR is a mobile app designed for scanning QR codes, offering a simple and effective QR code scanning service. The app is
|
||||
easy to use and provides an interactive and intuitive experience for users. With Safe QR, you can quickly scan QR codes with
|
||||
high-quality results.</p>
|
||||
</div>
|
||||
<div className="section-content text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="media single-feature wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="media-body text-right media-right-margin">
|
||||
<h5>Safe and Secure</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
|
||||
<h5>SSL Checking</h5>
|
||||
<p>The security of the connection to the website associated with the QR code by verifying its SSL/TLS certificate.</p>
|
||||
</div>
|
||||
<div className="media-right icon-border"> <span className="fa fa-bolt" aria-hidden="true"></span> </div>
|
||||
</div>
|
||||
<div className="media single-feature wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div className="media-body text-right media-right-margin">
|
||||
<h5>Efficient Scanning</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
|
||||
<h5>Payload Inspection</h5>
|
||||
<p> Preview the contents of a URL to assess its relevance and safety before deciding to proceed with opening it.</p>
|
||||
</div>
|
||||
<div className="media-right icon-border"> <span className="fa fa-battery-full" aria-hidden="true"></span> </div>
|
||||
</div>
|
||||
<div className="media single-feature wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div className="media-body text-right media-right-margin">
|
||||
<h5>User Friendly Interface</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
|
||||
<h5>Copy payload to Clipboard</h5>
|
||||
<p>Copy the contents of the URL extracted from a QR code to the device’s clipboard.</p>
|
||||
</div>
|
||||
<div className="media-right icon-border"> <span className="fa fa-wifi" aria-hidden="true"></span> </div>
|
||||
</div>
|
||||
@@ -43,22 +45,24 @@ const Features: React.FC = () => {
|
||||
<div className="media single-feature wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="media-left icon-border media-right-margin"> <span className="fa fa-check-double" aria-hidden="true"></span> </div>
|
||||
<div className="media-body text-left">
|
||||
<h5>Reliable Performance</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
|
||||
<h5>History of scans</h5>
|
||||
<p>View the list of saved QR codes in the application's history for reference.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="media single-feature wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div className="media-left icon-border media-right-margin"> <span className="fa fa-dollar-sign" aria-hidden="true"></span> </div>
|
||||
<div className="media-body text-left">
|
||||
<h5>Effortless QR Scanning</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
|
||||
<h5>Open in selected browser</h5>
|
||||
<p>Open the scanned QR code in your favourite browser</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="media single-feature wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div className="media-left icon-border media-right-margin"> <span className="fa fa-hdd" aria-hidden="true"></span> </div>
|
||||
<div className="media-body text-left">
|
||||
<h5>Instant Results</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
|
||||
<h5>Bookmarking scans</h5>
|
||||
<p>Automatically saved to the application's history for future reference or sharing. Bookmark a scanned QR code for
|
||||
easy access and reference during the payload inspection phase.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,12 @@ const Footer: React.FC = () => {
|
||||
<div className="sectioner-header text-center white">
|
||||
<h3>Download Our App</h3>
|
||||
<span className="line"></span>
|
||||
<p className="white">Sed quis nisi nisi. Proin consectetur porttitor dui sit amet viverra. Fusce sit amet lorem faucibus, vestibulum ante in, pharetra ante.</p>
|
||||
<p className="white">Inspired by the growing reliance on QR codes for various interactions and the increasing need for heightened
|
||||
security in the digital landscape, our motivation is to empower users with a secure and seamless QR code experience. We are driven
|
||||
by the desire to mitigate security risks associated with QR code usage and to provide users with peace of mind while engaging in
|
||||
digital transactions. Our motivation fuels our commitment to innovation and excellence in developing a solution that addresses
|
||||
the evolving challenges of QR code security.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
|
||||
@@ -21,7 +21,7 @@ const Header: React.FC = () => {
|
||||
return (
|
||||
<nav className="navbar navbar-expand-lg banner">
|
||||
<div className="container">
|
||||
<img src="../marketing/images/logo.png" alt="logo" className="logo-1" />
|
||||
<img src="../marketing/images/logo.png" alt="logo" />
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
@@ -75,16 +75,6 @@ const Header: React.FC = () => {
|
||||
Team
|
||||
</a>{" "}
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
{" "}
|
||||
<a
|
||||
className="nav-link"
|
||||
href="#"
|
||||
data-scroll-nav="4"
|
||||
>
|
||||
Testimonials
|
||||
</a>{" "}
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
{" "}
|
||||
<a
|
||||
|
||||
604
src/index.css
604
src/index.css
@@ -0,0 +1,604 @@
|
||||
* {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
a {
|
||||
color:#5f0099;
|
||||
}
|
||||
a:hover {
|
||||
color:#5f0099;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
h4, h5 {
|
||||
font-weight:600;
|
||||
}
|
||||
h6 {
|
||||
font-weight:500;
|
||||
}
|
||||
.white {
|
||||
color:#ffffff !important;
|
||||
}
|
||||
.black {
|
||||
color:#000000;
|
||||
}
|
||||
.navbar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-height: 50px;
|
||||
line-height: 50px;
|
||||
background: transparent;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.navbar .active {
|
||||
color: #5f0099 !important;
|
||||
}
|
||||
.navbar .navbar-brand {
|
||||
}
|
||||
.navbar .nav-item {
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar .nav-item a {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
.navbar .nav-item a:hover {
|
||||
color: #5f0099;
|
||||
}
|
||||
.navbar .nav-link {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar .navbar-toggler {
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar .navbar-toggler span {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-style2 .active:after, .navbar-style2 .nav-link:after {
|
||||
display: none;
|
||||
}
|
||||
.nav-scroll {
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
|
||||
box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
|
||||
-webkit-transition: all .4s ease;
|
||||
transition: all .4s ease;
|
||||
}
|
||||
.nav-scroll .navbar-nav > li > a {
|
||||
color: #333;
|
||||
}
|
||||
.nav-scroll .navbar-brand img {
|
||||
-webkit-transform: scale(1.03) !important;
|
||||
transform: scale(1.03) !important;
|
||||
}
|
||||
.nav-scroll .navbar-toggler {
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-scroll .navbar-toggler span {
|
||||
color: #333;
|
||||
}
|
||||
.nav-scroll .nav-link:hover:after {
|
||||
background-color: #2388ed;
|
||||
}
|
||||
.nav-scroll .active {
|
||||
position: relative;
|
||||
}
|
||||
.banner {
|
||||
background: #7a60ff;
|
||||
background: linear-gradient(to left, #7a60ff, #cd9ffa);
|
||||
padding:20px 0px;
|
||||
padding-bottom: 100px;
|
||||
position:relative;
|
||||
}
|
||||
.banner::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../public/images/pattern.png);
|
||||
}
|
||||
.banner a.weblink {
|
||||
color:#ffffff;
|
||||
border-bottom:1px dotted #ffffff;
|
||||
}
|
||||
.banner a:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
.svg-wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.banner-text {
|
||||
padding-right:80px;
|
||||
margin:50px 0px 0px;
|
||||
}
|
||||
.banner-text p {
|
||||
margin:40px 0px;
|
||||
}
|
||||
.banner-text ul {
|
||||
list-style: none;
|
||||
}
|
||||
.banner-text ul li {
|
||||
display: inline-block;
|
||||
margin: 0px 10px 10px 0px;
|
||||
}
|
||||
.banner-text ul li a {
|
||||
display: block;
|
||||
}
|
||||
.banner-text ul li a img {
|
||||
width: 150px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.prelative {
|
||||
position:relative
|
||||
}
|
||||
.section-padding {
|
||||
padding:80px 0px;
|
||||
}
|
||||
.sectioner-header {
|
||||
width:69%;
|
||||
margin:0 auto;
|
||||
}
|
||||
.line {
|
||||
height: 2px;
|
||||
width: 50px;
|
||||
background: #8e1efc;
|
||||
display: block;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
.line::after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 150px;
|
||||
height: 2px;
|
||||
border-bottom: 2px dashed #8e1efc;
|
||||
margin-left: -75px;
|
||||
}
|
||||
.sectioner-header p {
|
||||
color:#818992;
|
||||
font-size: 17px;
|
||||
}
|
||||
.section-content {
|
||||
margin-top: 80px;
|
||||
}
|
||||
.icon-box {
|
||||
margin-bottom:50px;
|
||||
}
|
||||
.icon-box i {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 135px;
|
||||
height: 135px;
|
||||
border-radius: 100px;
|
||||
background: #7a60ff;
|
||||
background: linear-gradient(to left, #7a60ff, #cd9ffa);
|
||||
color: #ffffff;
|
||||
font-size: 50px;
|
||||
line-height: 135px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.icon-box h5 {
|
||||
margin-top:30px;
|
||||
}
|
||||
.icon-box p {
|
||||
color: #818992;
|
||||
font-size: 14px;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about-btn {
|
||||
color: #8e1efc;
|
||||
padding: 10px 40px;
|
||||
border: 2px solid #8e1efc;
|
||||
border-radius: 7px;
|
||||
margin-top: 30px;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
}
|
||||
.about-btn:hover {
|
||||
background:#8e1efc;
|
||||
color:#ffffff;
|
||||
text-decoration:none;
|
||||
}
|
||||
.video-section {
|
||||
background: url(../public/images/video-bg.jpg) no-repeat fixed center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-overlay {
|
||||
background: linear-gradient(to left, rgba(122, 96, 255, 0.90), rgba(205, 159, 250, 0.90));
|
||||
}
|
||||
.video-section h3 {
|
||||
font-weight: 600;
|
||||
font-size: 38px;
|
||||
}
|
||||
.video-section i {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 100px;
|
||||
background: #ffffff;
|
||||
color: #8e1efc;
|
||||
font-size: 30px;
|
||||
line-height: 70px;
|
||||
margin: 0 auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
.video-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
align-content: center !important;
|
||||
-ms-flex-line-pack: center !important;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.video-popup .video-src {
|
||||
position: relative;
|
||||
width: 700px;
|
||||
max-width: 80%;
|
||||
}
|
||||
.video-popup .iframe-src {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-top: 56.3%;
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
.video-popup .iframe-src iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.single-feature {
|
||||
margin-bottom: 80px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.single-feature h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.media-right-margin {
|
||||
margin-right:25px;
|
||||
}
|
||||
.single-feature p {
|
||||
font-size: 13px;
|
||||
}
|
||||
.icon-border {
|
||||
}
|
||||
.icon-border span {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100px;
|
||||
color: rgb(142, 30, 252);
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
border: 1px solid rgb(142, 30, 252);
|
||||
}
|
||||
.team {
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #e4e4e4;
|
||||
}
|
||||
.team-detail {
|
||||
margin-top:40px;
|
||||
}
|
||||
.team-detail img {
|
||||
border-radius: 50%;
|
||||
width: 70%;
|
||||
}
|
||||
.team-detail h4 {
|
||||
color:rgb(142, 30, 252);
|
||||
margin-top: 20px;
|
||||
font-size: 17px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.testimonial {
|
||||
background: #7a60ff;
|
||||
background: linear-gradient(to left, #7a60ff, #cd9ffa);
|
||||
padding:100px 0px;
|
||||
position:relative;
|
||||
}
|
||||
.testimonial::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../public/images/pattern.png);
|
||||
}
|
||||
.bx-prev {
|
||||
left: -90px !important;
|
||||
background: url(../public/images/arrow-left.png) no-repeat !important;
|
||||
background-size: auto auto !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.bx-next {
|
||||
right: -90px !important;
|
||||
background: url(../public/images/arrow-right.png) no-repeat !important;
|
||||
background-size: auto auto !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.bx-wrapper {
|
||||
border: none !important;
|
||||
background: rgba(255, 255, 255, 0.81) !important;
|
||||
border-radius: 5px !important;
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.slider-item {
|
||||
padding:20px;
|
||||
}
|
||||
.slider .test-img img {
|
||||
border: 12px solid #fff;
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.test-img {
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin-right:5%;
|
||||
}
|
||||
.test-text {
|
||||
float: left;
|
||||
width: 75%;
|
||||
}
|
||||
.slider .title {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 0 20px;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.slider .title span {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.faq {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
}
|
||||
.faq-content {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
.faq-content h4 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
}
|
||||
.faq-content p {
|
||||
color: #818992;
|
||||
font-weight:300;
|
||||
margin-top:15px;
|
||||
}
|
||||
#contact_form .form-input {
|
||||
border: 1px solid #e4e4e4;
|
||||
}
|
||||
input {
|
||||
height: 42px;
|
||||
padding: 0 1rem;
|
||||
background: #fff;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 1rem;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border:0;
|
||||
}
|
||||
#contact_form textarea {
|
||||
resize: none;
|
||||
padding: 1rem;
|
||||
height: 150px;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 1rem;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.btn-grad {
|
||||
padding: .7rem 2rem;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
border-radius: 2rem;
|
||||
border: 0;
|
||||
background: #7a60ff;
|
||||
background: linear-gradient(to left, #7a60ff, #cd9ffa);
|
||||
cursor:pointer;
|
||||
}
|
||||
.contact-info {
|
||||
padding: 2rem 2rem 1rem;
|
||||
border-radius: 8px;
|
||||
background: #7a60ff;
|
||||
background: linear-gradient(to left, #7a60ff, #cd9ffa);
|
||||
}
|
||||
.contact-item {
|
||||
margin:23px 0px;
|
||||
}
|
||||
.contact-item i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.contact-item p {
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
.download {
|
||||
background: #7a60ff;
|
||||
background: linear-gradient(to left, #7a60ff, #cd9ffa);
|
||||
padding:100px 0px;
|
||||
position:relative;
|
||||
}
|
||||
.download::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../public/images/pattern.png);
|
||||
}
|
||||
.download ul {
|
||||
list-style: none;
|
||||
}
|
||||
.download ul li {
|
||||
display: inline-block;
|
||||
margin: 0px 10px 10px 0px;
|
||||
}
|
||||
.download ul li a {
|
||||
display: block;
|
||||
}
|
||||
.download ul li a img {
|
||||
width: 150px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.footer-copy {
|
||||
background: #ffffff;
|
||||
color: #242424;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding:15px 0px;
|
||||
}
|
||||
.footer-copy p {
|
||||
margin-bottom:0px;
|
||||
}
|
||||
@media all and (max-width:991px) {
|
||||
.navbar .navbar-collapse {
|
||||
overflow: auto;
|
||||
background: rgb(213, 198, 221);
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.nav-scroll .navbar-collapse {
|
||||
background: #fff !important;
|
||||
}
|
||||
#contact_form {
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
@media all and (max-width:768px) {
|
||||
.nav-scroll .navbar-brand img, .navbar-brand img {
|
||||
transform: scale(0.75) !important;
|
||||
-webkit-transform: scale(0.75) !important;
|
||||
}
|
||||
.banner-text {
|
||||
padding-right: 0px;
|
||||
margin: 10px 0px 0px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 23px;
|
||||
}
|
||||
.section-padding {
|
||||
padding: 40px 0px;
|
||||
}
|
||||
.banner-text p {
|
||||
margin: 25px 0px;
|
||||
}
|
||||
.banner-text ul li a img {
|
||||
width: 140px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.sectioner-header {
|
||||
width: 90%;
|
||||
}
|
||||
.sectioner-header p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.about-btn {
|
||||
padding: 5px 30px;
|
||||
margin-top: 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.single-feature {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.team-detail {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.team-detail img {
|
||||
width: 50%;
|
||||
}
|
||||
.bx-controls
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
.bx-wrapper {
|
||||
margin: 0px 20px !important;
|
||||
}
|
||||
.slider .test-img img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.test-img {
|
||||
float:none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.test-text {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.section-content {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.faq-content {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.faq-content h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.faq-content p {
|
||||
font-size: 13px;
|
||||
}
|
||||
#contact_form {
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.contact-item {
|
||||
font-size: 12px;
|
||||
}
|
||||
.download ul li a img {
|
||||
width: 120px;
|
||||
}
|
||||
.footer-copy p {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user