fuckyourday/Browny/assets/css/style.css

855 lines
20 KiB
CSS

/*==================================
* Author : "ThemeSine"
* Template Name : Browny HTML Template
* Version : 1.0
==================================== */
/*==================================
font-family: 'Poppins', sans-serif;
==================================== */
/*=========== TABLE OF CONTENTS ===========
1. General css (Reset code)
2. Header
3. Welcome-hero
4. About me
5. Education
6. Skill
7. Experience
8. Profiles
9. Portfolio
10. Clients
11. Contact
/*-------------------------------------
1.General css (Reset code)
--------------------------------------*/
*{
padding: 0;
margin: 0;
}
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
body{
font-family: 'Poppins', sans-serif;
font-size:16px;
color: #676a81;
background: #fff;
max-width:1920px;
margin:0 auto;
overflow-x:hidden;
}
a,a:hover,a:active,a:focus {
display:inline-block;
text-decoration:none;
color: #6a708e;
font-size:16px;
padding:0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
color:#43485c;
font-size: 16px;
font-family: 'Poppins', sans-serif;
text-transform: capitalize;
}
p {
margin: 0;
line-height:1.8;
color:#43485c;
font-size:14px;
font-family: 'Poppins', sans-serif;
}
img{border:none;max-width:100%; height:auto;}
ul{
padding: 0;
margin: 0 auto;
list-style: none;
}
ul li {
list-style: none;
}
select,input,textarea,button{box-shadow:none;outline:0!important;}
button {background: transparent;border: 0;}
html,body{
height: 100%;
position: relative;
}
[placeholder]:focus::-webkit-input-placeholder {
-webkit-transition: opacity 0.3s 0.3s ease;
-moz-transition: opacity 0.3s 0.3s ease;
-ms-transition: opacity 0.3s 0.3s ease;
-o-transition: opacity 0.3s 0.3s ease;
transition: opacity 0.3s 0.3s ease;
opacity: 0;
}
.fix{position: relative;clear: both;}
/*=============Style css=========*/
/*-------------------------------------
2. Header
--------------------------------------*/
.top-area {
position: relative;
z-index: 9999;
}
@media (min-width: 1024px){}
nav.navbar.bootsnav.no-background {
background-color: #fff;
border: none;
}
nav.navbar.bootsnav {
background-color: #fff;
border-bottom: transparent;
box-shadow: 0 3px 15px rgba(0,0,0,.2);
}
/*.navbar-brand*/
.navbar-header a.navbar-brand,.navbar-header a.navbar-brand:hover,.navbar-header a.navbar-brand:focus {
display: inline-block;
color: #d92cf9;
font-size: 20px;
font-weight: 600;
padding: 33px 0px 57px;
text-transform: uppercase;
}
/*.navbar-brand*/
/*.nav li*/
nav.navbar.bootsnav ul.nav > li > a {
font-size: 16px;
font-weight: 400;
text-transform:uppercase;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
nav.navbar.bootsnav ul.nav > li > a {padding: 35px 20px;}
nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus,nav.navbar.bootsnav ul.nav > li.active>a{color: #d92cf9;}
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
content: "";
}
nav.navbar.bootsnav ul.nav > li.dropdown span {
font-size: 8px;
margin-left: 15px;
}
.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a {color:#6a708e;}
.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:hover,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:focus,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li.active>a{color: #d92cf9;}
/*.nav li*/
/*.menu-ui-design*/
.menu-ui-design{overflow-y:scroll;height: 350px;}
.menu-ui-design::-webkit-scrollbar {
width:5px;
}
.menu-ui-design::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 8px #000;
}
.menu-ui-design::-webkit-scrollbar-thumb {
background-color: #d92cf9;
}
/*.menu-ui-design*/
/*.navbar-toggle */
nav.navbar.bootsnav .navbar-toggle {
position: relative;
background-color: transparent;
border: 1px solid #d92cf9;
padding: 10px;
top: 0;
}
nav.navbar.bootsnav .navbar-toggle i{color: #d92cf9;}
/*.navbar-toggle */
/*-------------------------------------
3. Welcome-hero
--------------------------------------*/
.welcome-hero{
display: flex;
align-items: center;
justify-content: center;
position:relative;
background:url(../images/about/welcome-banner.jpg)no-repeat;
background-size:cover;
background-position: center;
height:890px;
}
.welcome-hero:before{
position:absolute;
content: " ";
top:0;
left:0;
background:rgba(31,44,108,.65);
width:100%;
height:100%;
}
/*.header-text-area*/
.header-text h2 {
color: #fff;
font-size: 54px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.5;
}
.header-text h2 span {color: #d92cf9;}
.header-text p {
color: #fff;
font-size: 20px;
font-weight: 300;
text-transform: uppercase;
margin: 30px 0 60px;
letter-spacing: 1px;
}
.header-text a {
width: 200px;
height: 60px;
line-height: 60px;
border-radius: 3px;
text-transform: capitalize;
color: #fff;
background: #b636ff;
border:1px solid #b636ff;
box-shadow: 0 5px 20px rgba(0,0,0,.2);
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.header-text a:hover{ box-shadow: 0 5px 20px rgba(0,0,0,.4);background:#9f00ff;border: 1px solid #9f00ff;}
/*.header-text-area*/
/*-------------------------------------
4. About
--------------------------------------*/
.about {padding: 50px 0 100px;}
.about-content {padding-top: 100px;}
/*.single-about-txt*/
.single-about-txt h3 {
font-size:18px;
color: #3c4258;
text-transform: initial;
line-height: 1.8;
}
.single-about-txt p {
font-size: 16px;
color: #999fb3;
padding: 35px 0 43px;
border-bottom: 1px solid #999fb3;
}
.single-about-add-info {
margin: 35px 0;
}
.single-about-add-info h3 {
color: #636a82;
font-size: 16px;
text-transform: capitalize;
}
.single-about-add-info p {font-weight: 300;border: 0;padding: 0;margin-top: 3px;}
/*.single-about-txt*/
/*.single-about-img */
.single-about-img{position: relative;box-shadow: 0 5px 20px rgba(14,25,80,.30);}
.single-about-img:before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 109%;
height: 100%;
background: rgba(31,44,108,.3);
}
.single-about-img img {
max-width: 500px;
height: 468px;
}
.about-list-icon{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
width: 109%;
height: 90px;
background: #1f2c6c;
}
/*.ab-list-icon */
.about-list-icon ul {
display: flex;
}
.about-list-icon ul li a {
padding-right: 22px;
cursor:pointer;
color: #fff;
}
.about-list-icon ul li a {
cursor: pointer;
color: #fff;
display: inline-block;
border: 2px solid;
margin-left: 20px;
border-radius: 8px;
width: 30px;
height: 30px;
line-height: 28px;
text-align: center;
}
.about-list-icon ul li a i {
margin-left: 6px;
}
/*.ab-list-icon */
/*.single-about-img */
/*-------------------------------------
5. Education
--------------------------------------*/
.education {
background: #f9fbfd;
padding-top: 50px;
}
.education-horizontal-timeline {
padding: 80px 0;
}
/*.education-horizontal-timeline*/
.education-horizontal-timeline .col-sm-4 {padding:0 2px;}
.single-horizontal-timeline .experience-time h3{text-transform: capitalize;}
.single-horizontal-timeline .experience-time h3 span{text-transform:lowercase;}
.single-horizontal-timeline .timeline-content h5 {margin: 15px 0;}
.single-horizontal-timeline p {color: #999fb3;max-width: 335px;}
/*.timeline-horizontal-border*/
.timeline-horizontal-border {
display: flex;
align-items: center;
padding: 26px 0 30px;
}
.timeline-horizontal-border i {
font-size: 10px;
color: #d92cf9;
margin-right: 5px;
}
span.single-timeline-horizontal {
display: inline-block;
background: #b2c1ce;
height: 1px;
width: 380px;
}
span.single-timeline-horizontal.spacial-horizontal-line {width: 88px;}
/*.timeline-horizontal-border*/
/*.education-horizontal-timeline*/
/*-------------------------------------
6. Skills
--------------------------------------*/
.skills {
}
.skill-content{padding: 50px 0 80px;}
.single-skill-content{padding-top: 100px;}
.section-heading h2 {
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 50px;
border-bottom: 1px solid #e5ebf2;
}
.single-progress-txt {
display: flex;
}
.single-progress-txt h3 {
width: 10%;
color: #a606c3;
position: relative;
top: 6px;
left: 20px;
}
.barWrapper {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
}
.progress {
border-radius:3px;
overflow: visible;
background: #e6ecf3;
height:8px;
margin-top: 15px;
width: 85%;
margin-bottom: 37px;
}
.progress-bar {
background: #b636ff;
border-radius: 3px;
-webkit-transition: width 1.5s ease-in-out;
-ms-transition: width 1.5s ease-in-out;
-moz-transition: width 1.5s ease-in-out;
-o-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
.tooltip{
position:relative;
float:right;
}
.tooltip > .tooltip-inner {
background-color: transparent;
padding: 1px 5px;
color: #b636ff;
font-weight: 500;
font-size: 12px;
border-radius: 0;
}
.popOver + .tooltip > .tooltip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
bottom: -1px;
transform: translateX(-50%);
margin-left: 0;
}
/*-------------------------------------
7. Experience
-------------------------------------*/
.experience {
padding: 50px 0 100px;
border-top: 1px solid #e5ebf2;
}
.experience-content {padding-top: 100px;}
.single-timeline-box {margin-bottom: 75px;}
/*experience-time*/
.experience-time {
position: relative;
}
.experience-time h2 {
font-weight: 400;
}
.experience-time h3 {
font-size: 16px;
font-weight: 300;
color: #636a82;
margin-top: 14px;
text-transform: uppercase;
}
/*experience-time*/
/*main-timeline*/
.main-timeline{
position: relative;
}
.main-timeline:before{
content: "";
width: 2px;
height: 84%;
background: #b2c1ce;
position: absolute;
top: 1.5%;
left: 45.8%;
z-index: -1;
}
.main-timeline .timeline{
position: relative;
}
.timeline-content span>i, .experience-time span>i {
color: #d92cf9;
position: absolute;
font-size: 10px;
left: -14.5%;
z-index: 1;
}
.timeline-content h4.title {
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.timeline-content h5 {
color: #636a82;
font-size: 14px;
font-weight: 300;
margin: 18px 0 20px;
}
.main-timeline .description {
font-size: 14px;
color: #999fb3;
}
.main-timeline .timeline-content.right{
float: right;
text-align: left;
}
.timeline-single-before:before {
content: '';
top: 57px;
left: -3px;
position: absolute;
width: 100%;
height:400px;
border-left:15px solid #fff;
}
.experience-time-responsive{display: none;}
/*-------------------------------------
8. Profiles
--------------------------------------*/
.profiles {
padding: 50px 0 100px;
border: 1px solid #e5ebf2;
}
.profiles-content {padding-top: 100px;}
.profiles-content .col-sm-3{padding:0;}
.profile-txt {
display: flex;
align-items: center;
flex-direction: column;
}
.single-profile {
position: relative;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #b2c1ce;
overflow:hidden;
-webkit-transition:background 0.5s linear;
-moz-transition:background 0.5s linear;
-ms-transition:background 0.5s linear;
-o-transition:background 0.5s linear;
transition:background 0.5s linear;
}
.profile-icon-name {
text-transform: capitalize;
color: #636a82;
font-size: 16px;
}
.single-profile.profile-no-border{border-right:transparent;}
.profile-border {
border-bottom: 1px solid #b2c1ce;
}
.single-profile-overlay{
display:flex;
align-items:center;
text-transform: capitalize;
justify-content:center;
position: absolute;
top: 0;
left: 0;
content: " ";
width:100%;
height: 100%;
background: #d92cf9;
background: -moz-linear-gradient(left, #d92cf9 0%, #b636ff 100%);
background: -webkit-linear-gradient(left, #d92cf9 0%,#b636ff 100%);
background: linear-gradient(to right, #d92cf9 0%,#b636ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92cf9', endColorstr='#b636ff',GradientType=1 );
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.single-profile:hover .single-profile-overlay{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
top:0;
}
.single-profile:hover .profile-icon-name,.single-profile:hover .profile-txt a>i{color: #fff;}
.single-profile:hover .profile-border {border:transparent;}
/*-------------------------------------
9. Portfolio
--------------------------------------*/
.portfolio {
padding: 50px 0 100px;
border: 1px solid #e5ebf2;
}
.portfolio-content {padding-top: 100px;}
/* ---- .item ---- */
.isotope:after {
content: '';
display: block;
clear: both;
}
.isotope .item {
position:relative;
overflow:hidden;
margin-bottom: 30px;
}
/*.item img*/
.isotope .item img{
width:100%;
height:100%;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.isotope .item:hover img{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-ms-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}/*.item img*/
/*.isotope-overlay*/
.isotope-overlay{
position:absolute;
height:100%;
width:100%;
background:rgba(31,44,108,.5);
display:flex;
align-items:center;
text-transform: uppercase;
justify-content:center;
flex-direction:row;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.isotope-overlay a {
display: inline-block;
color: #fff;
font-size: 14px;
text-align: center;
}
.isotope .item:hover .isotope-overlay{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
top:0;
}/*.isotope-overlay*/
/*-------------------------------------
10. Clients
--------------------------------------*/
.clients {padding-top: 50px;}
.clients-area {
display: flex;
align-items: center;
height: 250px;
}
.clients-area .item {padding: 0 25px;}
.clients .clients-area .owl-carousel .owl-item img {
display: block;
width: 100%;
height: auto;
border-radius:0;
}
/*-------------------------------------
11. Contact
--------------------------------------*/
.contact {
background: #f9fbfd;
padding: 50px 0 100px;
}
.single-contact-box {padding-top: 100px;}
.contact-form .form-group {
margin-bottom: 20px;
}
.contact-form .form-control {
padding: 25px;
font-size: 14px;
border: 1px solid #fff;
border-radius: 0px;
box-shadow: none;
outline: 0!important;
background: #fff;
color: #636a82;
resize: none;
}
/*--contct button--*/
.contact-form .single-contact-btn {
display:flex;
align-items:center;
justify-content:center;
height:50px;
text-transform:capitalize;
margin-top: 3px;
background: #b636ff;
border: 1px solid #b636ff;
cursor:pointer;
box-shadow: 0 5px 20px rgba(0,0,0,.2);
-webkit-transition: .5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition: .5s;
}
.contact-form .single-contact-btn .contact-btn ,
.contact-form .single-contact-btn .contact-btn:focus {
margin-top:0px;
outline: 0 !important;
border:0;
color: #fff;
border-radius: 0px;
font-size:14px;
-webkit-transition: .5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition: .5s;
}
.single-contact-btn:hover{
background: #9f00ff;
border: 1px solid #9f00ff;
box-shadow: 0 5px 20px rgba(0,0,0,.2);
}
/*--contct button--*/
/* contact-adress */
.contact-add-head h3 {
font-size: 24px;
color: #3c4258;
}
.contact-add-head p {
font-size: 16px;
text-transform: capitalize;
color: #636a82;
font-weight: 300;
margin-top: 6px;
}
/* contact-adress */
/*.contact-add-info */
.contact-add-info { margin: 42px 0 52px;}
.single-contact-add-info h3 {
color: #636a82;
font-weight: 500;
}
.single-contact-add-info p {
color: #999fb3;
font-size: 16px;
margin-top: 18px;
}
.single-contact-add-info {
margin-bottom: 26px;
}
/*.contact-add-info */
/*hm-foot-icon*/
.hm-foot-icon {
}
.hm-foot-icon ul li{float:left;}
.hm-foot-icon ul li>a {
color: #636a82;
margin-right:18px;
-webkit-transition: .3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
transition: .3s;
}
.hm-foot-icon ul li>a:hover{
color: #b636ff;
}/*hm-foot-icon*/
.hm-footer-copyright p{
color: #888ea5;
text-transform: capitalize;
padding: 38px 0;
}
.hm-footer-copyright p a {color: #888ea5;}
/*===============================
Scroll Top
===============================*/
#scroll-Top .return-to-top {
position: fixed;
right: 30px;
bottom: 30px;
display: none;
width: 40px;
line-height: 40px;
height: 40px;
text-align: center;
font-size: 20px;
cursor: pointer;
color: #fff;
background:#b636ff;
border:1px solid #b636ff;
border-radius:50%;
-webkit-transition: .5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition: .5s;
z-index: 2;
}
#scroll-Top .return-to-top:hover {
background:#fff;
color: #b636ff;
border:1px solid #b636ff;
}
#scroll-Top .return-to-top i{
position:relative;
bottom:0;
}
#scroll-Top .return-to-top i{
position: relative;
animation-name: example;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-duration:1s;
}
@keyframes example {
0% {bottom:0px;}
100% {bottom:7px;}
}
/*========================Thank you=================