0% found this document useful (0 votes)
21 views

Css

The document is a CSS stylesheet that defines styles for components on a one-page website template. It includes sections for general styling, a back to top button, preloader, header, navigation menu, hero section, table, simple buy/sell button, and about section. Styles are defined for things like fonts, colors, positioning, sizing etc. The navigation menu section in particular has detailed styling for both desktop and mobile versions.

Uploaded by

gio giorga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
21 views

Css

The document is a CSS stylesheet that defines styles for components on a one-page website template. It includes sections for general styling, a back to top button, preloader, header, navigation menu, hero section, table, simple buy/sell button, and about section. Styles are defined for things like fonts, colors, positioning, sizing etc. The navigation menu section in particular has detailed styling for both desktop and mobile versions.

Uploaded by

gio giorga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

/**

* Template Name: OnePage


* Updated: Jan 09 2024 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}

a {
color: #2487ce;
text-decoration: none;
}

a:hover {
color: #469fdf;
text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #2487ce;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}

.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}

.back-to-top:hover {
background: #3e9bdd;
color: #fff;
}

.back-to-top.active {
visibility: visible;
opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}

#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #2487ce;
border-top-color: #fff;
border-bottom-color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 720px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
transition: all 0.5s;
background: #fff;
z-index: 997;
padding: 15px 0;
border-bottom: 1px solid #e6f2fb;
}

#header.header-scrolled {
border-color: #fff;
box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

#header .logo {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 300;
letter-spacing: 0.5px;
font-family: "Poppins", sans-serif;
}

#header .logo a {
color: #16507b;
}

#header .logo img {


max-height: 40px;
}

@media (max-width: 992px) {


#header .logo {
font-size: 28px;
}
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}

.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}

.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-size: 14px;
color: #16507b;
white-space: nowrap;
transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #2487ce;
}

.navbar .getstarted,
.navbar .getstarted:focus {
background: #2487ce;
padding: 8px 20px;
margin-left: 30px;
border-radius: 4px;
color: #fff;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
color: #fff;
background: #3194db;
}

.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}

.navbar .dropdown ul li {
min-width: 200px;
}

.navbar .dropdown ul a {
padding: 10px 20px;
text-transform: none;
}

.navbar .dropdown ul a i {
font-size: 12px;
}

.navbar .dropdown ul a:hover,


.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #2487ce;
}

.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}

.navbar .dropdown .dropdown ul {


top: 0;
left: calc(100% - 30px);
visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {


opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}

@media (max-width: 1366px) {


.navbar .dropdown .dropdown ul {
left: -90%;
}

.navbar .dropdown .dropdown:hover>ul {


left: -100%;
}
}

/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #124265;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
color: #fff;
}

@media (max-width: 991px) {


.mobile-nav-toggle {
display: block;
}

.navbar ul {
display: none;
}
}

.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(10, 38, 58, 0.9);
transition: 0.3s;
z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}

.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 15px;
color: #124265;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #2487ce;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
margin: 15px;
}

.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
min-width: 200px;
}

.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,


.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #2487ce;
}

.navbar-mobile .dropdown>.dropdown-active {
display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
height: 100vh;
position: relative;
background: url("../img/Background/hero-bg.jpg") top center;
background-size: cover;
position: relative;
}

#hero:before {
content: "";
background: rgba(255, 255, 255, 0.8);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero .container {
padding-top: 80px;
}

#hero h1 {
margin: 0;
font-size: 56px;
font-weight: 700;
line-height: 72px;
color: #124265;
font-family: "Poppins", sans-serif;
}

#hero h2 {
color: #5e5e5e;
margin: 10px 0 0 0;
font-size: 22px;
}

#hero .btn-get-started {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.5px;
display: inline-block;
padding: 14px 50px;
border-radius: 5px;
transition: 0.5s;
margin-top: 30px;
color: #fff;
background: #2487ce;
}

#hero .btn-get-started:hover {
background: #3194db;
}

#hero .icon-boxes {
margin-top: 100px;
}

#hero .icon-box {
padding: 50px 30px;
position: relative;
overflow: hidden;
background: #fff;
box-shadow: 0 0 29px 0 rgba(18, 66, 101, 0.08);
transition: all 0.3s ease-in-out;
border-radius: 8px;
z-index: 1;
}

#hero .icon-box .title {


font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
}

#hero .icon-box .title a {


color: #124265;
transition: 0.3s;
}

#hero .icon-box .description {


font-size: 15px;
line-height: 28px;
margin-bottom: 0;
}

#hero .icon-box .icon {


margin-bottom: 20px;
padding-top: 10px;
display: inline-block;
transition: all 0.3s ease-in-out;
font-size: 36px;
line-height: 1;
color: #2487ce;
}

#hero .icon-box:hover {
transform: scale(1.08);
}

#hero .icon-box:hover .title a {


color: #2487ce;
}

@media (min-width: 1024px) {


#hero {
background-attachment: fixed;
}
}

/*--------------------------------------------------------------
# Table
--------------------------------------------------------------*/
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}

th, td {
padding: 8px;
text-align: left;
}

@media (min-width: 600px) {


.col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: none;
}
}

/*--------------------------------------------------------------
# simple-button-buy-sell
--------------------------------------------------------------*/
.simple-button {
background-color: #2487CE;
border: none;
border-radius: 4px;
color: rgb(255, 255, 255);
cursor: pointer;

font-size: relative;
font-weight: bold;

margin: 0 auto;

padding: 8px;

text-align: middle;

width: 100%;
}

.simple-button:hover {
background-color: #2487ceb6;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
font-weight: 600;
font-size: 26px;
}

.about .content ul {
list-style: none;
padding: 0;
}

.about .content ul li {
padding-left: 28px;
position: relative;
}

.about .content ul li+li {


margin-top: 10px;
}

.about .content ul i {
position: absolute;
left: 0;
top: 2px;
font-size: 20px;
color: #2487ce;
line-height: 1;
}

.about .content p:last-child {


margin-bottom: 0;
}

.about .content .btn-learn-more {


font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 32px;
border-radius: 5px;
transition: 0.3s;
line-height: 1;
color: #2487ce;
animation-delay: 0.8s;
margin-top: 6px;
border: 2px solid #2487ce;
}

.about .content .btn-learn-more:hover {


background: #2487ce;
color: #fff;
text-decoration: none;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
color: #444444;
font-size: 14px;
background: #f8fbfe;
box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

#footer .footer-top {
padding: 60px 0 30px 0;
background: #fff;
}

#footer .footer-top .footer-contact {


margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {


font-size: 26px;
margin: 0 0 10px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 300;
}

#footer .footer-top .footer-contact p {


font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Raleway", sans-serif;
color: #777777;
}

#footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #124265;
position: relative;
padding-bottom: 12px;
}

#footer .footer-top .footer-links {


margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {


list-style: none;
padding: 0;
margin: 0;
}

#footer .footer-top .footer-links ul i {


padding-right: 2px;
color: #2487ce;
font-size: 18px;
line-height: 1;
}

#footer .footer-top .footer-links ul li {


padding: 10px 0;
display: flex;
align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {


padding-top: 0;
}

#footer .footer-top .footer-links ul a {


color: #777777;
transition: 0.3s;
display: inline-block;
line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {


text-decoration: none;
color: #2487ce;
}

#footer .footer-newsletter {
font-size: 15px;
}

#footer .footer-newsletter h4 {
font-size: 16px;
font-weight: bold;
color: #444444;
position: relative;
padding-bottom: 12px;
}

#footer .footer-newsletter form {


margin-top: 30px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 5px;
text-align: left;
border: 1px solid #cde5f6;
}

#footer .footer-newsletter form input[type=email] {


border: 0;
padding: 4px 8px;
width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type=submit] {


position: absolute;
top: -1px;
right: -2px;
bottom: -1px;
border: 0;
background: none;
font-size: 16px;
padding: 0 20px 2px 20px;
background: #2487ce;
color: #fff;
transition: 0.3s;
border-radius: 0 5px 5px 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type=submit]:hover {


background: #3194db;
}

#footer .credits {
padding-top: 5px;
font-size: 13px;
color: #444444;
}

#footer .social-links a {
font-size: 18px;
display: inline-block;
background: #2487ce;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 5px;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}

#footer .social-links a:hover {


background: #3194db;
color: #fff;
text-decoration: none;
}

You might also like