web-html5-scripts/templates-and-navigation/blooger-page/css/style.css

328 lines
5.5 KiB
CSS
Raw Normal View History

@import url('../css/fonts.css');
html, body{
margin: 0%;
box-sizing: border-box;
overflow-x: hidden;
}
:root{
/* theme colors */
--text-gray: #3f4954;
--text-light: #686666da;
--bg-color: #0f0f0f;
--white: #ffffff;
--midnight: #104f55;
/* gradient color */
--sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
/* theme font-family */
--Abel: 'Abel', cursive;
--Anton: 'Anton', cursive;
--Josefin: 'Josefin', cursive;
--Lexend: 'Lexend', cursive;
--Livvic: 'Livvic', cursive;
}
/* Global Classes
============================== */
a{
text-decoration: none;
color: var(--text-gray);
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
h1{
font-family: var(--Lexend);
font-size: 2.5rem;
}
h2{
font-family: var(--Lexend);
}
h3{
font-family: var(--Abel);
font-size: 1.3rem;
}
button.btn{
border: none;
border-radius: 2rem;
padding: 1rem 3rem;
font-size: 1rem;
font-family: var(--Livvic);
cursor: pointer;
}
span{
font-family: var(--Abel);
}
.container{
margin: 0 5vw;
}
.text-gray{
color: var(--text-gray);
}
/* End Global Classes
============================== */
/* Navbar
============================== */
.navigation{
background: #fff;
padding: 0 2rem;
height: 0rem;
min-height: 10vh;
overflow: hidden;
transition: height 0.5s ease-in-out;
}
.navigation .nav-menu{
justify-content: space-between;
}
.navigation .toggle-collapse{
position: absolute;
top: 0%;
width: 90%;
cursor: pointer;
display: none;
}
.navigation .toggle-collapse .toggle-icons{
display: flex;
justify-content: flex-end;
padding: 1.7rem 0;
}
.navigation .toggle-collapse .toggle-icons i{
font-size: 1.4rem;
color: var(--text-gray);
}
.collapse{
height: 30rem;
}
.navigation .nav-items{
display: flex;
margin: 0;
}
.navigation .nav-items .nav-link{
padding: 1.6rem 1rem;
font-size: 1.1rem;
position: relative;
font-family: var(--Abel);
font-size: 1.1rem;
}
.navigation .nav-items .nav-link:hover{
background-color: var(--midnight);
}
.navigation .nav-items .nav-link:hover a{
color: var(--white);
}
.navigation .nav-brand a{
font-size: 1.6rem;
padding: 1rem 0;
display: block;
font-family: var(--Lexend);
font-size: 1.6rem;
}
.navigation .social{
padding: 1.4rem 0;
}
.navigation .social i{
padding: 0.2rem;
}
.navigation .social i:hover{
color: #a1c4cf;
}
/* End Navbar
============================== */
/* Main Content
============================== */
/* Site Title */
main .site-title{
background: url(../assets/Background-image.png);
background-size: cover;
height: 110vh;
display: flex;
justify-content: center;
}
main .site-title .site-background{
padding-top: 10rem;
text-align: center;
color: var(--white);
}
main .site-title h1,h3{
margin: .3rem;
}
main .site-title .btn{
margin: 1.8rem;
background: var(--sky);
}
main .site-title .btn:hover{
background: transparent;
border: 1px solid var(--white);
color: var(--white);
}
/* End Site Title */
/* Blog Carousel
============================== */
main .blog{
background: url(../assets/Abract01.png);
background-repeat: no-repeat;
background-position: right;
height: 100vh;
width: 100%;
background-size: 65%;
}
main .blog .blog-post{
padding-top: 6rem;
}
main .blog-post .blog-content{
display: flex;
flex-direction: column;
text-align: center;
width: 80%;
margin: 3rem 2rem;
box-shadow: 0 15px 20px rgba(0,0,0,0.2);
}
main .blog-content .blog-title{
padding: 2rem 0;
}
main .blog-content .btn-blog{
padding: .7rem 2rem;
background: var(--sky);
margin: .5rem;
}
main .blog-content span{
display: block;
}
section .container .owl-nav{
position: absolute;
top: 0%;
margin: 0 auto;
width: 100%;
}
.owl-nav .owl-prev .owl-nav-prev,
.owl-nav .owl-next .owl-nav-next{
color: var(--text-gray);
background: transparent;
font-size: 2rem;
}
.owl-theme .owl-nav [class*='owl-']:hover{
background: transparent;
color: var(--midnight);
}
.owl-theme .owl-nav [class*='owl-']{
outline: none;
}
/* End Blog Carousel
============================== */
/* Site Content
=========================================== */
main .site-content{
display: grid;
grid-template-columns: 70% 30%;
}
main .post-content{
width: 100%;
margin-bottom: 5rem;
}
main .site-content .post-content > .post-image .post-title{
padding: 1rem 2rem;
position: relative;
}
main .site-content .post-content > .post-image .post-info{
background: var(--sky);
padding: 1rem;
position: absolute;
bottom: 0%;
left: 20vw;
border-radius: 3rem;
}
main .site-content .post-content > .post-image > div{
overflow: hidden;
}
main .site-content .post-content > .post-image .img{
width: 100%;
transition: all 1s ease;
}
main .site-content .post-content > .post-image .img:hover{
transform: scale(1.3);
}
/* End Site Content
=========================================== */
/* End Main Content
============================== */
/* Viewport less then or equal to 750px
============================== */
@media only screen and (max-width:750px){
.navigation .nav-menu, .navigation .nav-items{
flex-direction: column;
}
.navigation .toggle-collapse{
display: initial;
}
}
/* End Viewport less then or equal to 750px
============================== */