/* Check the article on website */
:root {
/**
* colors
*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 47%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(353, 100%, 78%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(0, 100%, 70%);
--ocean-green: hsl(152, 51%, 52%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 100%, 100%);
--onyx: hsl(0, 0%, 27%);
/**
* typography
*/
--fs-1: 1.563rem;
--fs-2: 1.375rem;
--fs-3: 1.25rem;
--fs-4: 1.125rem;
--fs-5: 1rem;
--fs-6: 0.938rem;
--fs-7: 0.875rem;
--fs-8: 0.813rem;
--fs-9: 0.75rem;
--fs-10: 0.688rem;
--fs-11: 0.625rem;
--weight-300: 300;
--weight-400: 400;
--weight-500: 500;
--weight-600: 600;
--weight-700: 700;
/**
* border-radius
*/
--border-radius-md: 10px;
--border-radius-sm: 5px;
/**
* transition
*/
--transition-timing: 0.2s ease;
}
#sp-header {border-width: 0px;}
hr {
height: 2px;
background-color: #ff0000;
border: none;
}
.box {
position: relative;
}
.box:hover:before {
content: "Before content";
}
.box:hover:after {
content: "After content";
}
.div_box {
border: 1px solid #aaa;
padding: 10px;
display: none;
}
.checkbox:checked + .div_box {
display: block;
}
/* Using flex */
.ele {
display: flex;
align-items: center;
height: 200px;
background: #DDDDDD;
}
.link {
text-decoration: none;
}
/* SUPPORTS - chrome, firefox, opera, safari */
::placeholder {
color: blue;
opacity: 1;
}
/* SUPPORTS - internet explorer 10+ */
:-ms-input-placeholder {
color: blue;
}
/* SUPPORTS - microsoft edge */
::-ms-input-placeholder {
color: blue;
}
/* FOR SPECIFIC INPUT HAVING CLASS - control */
input.control::placeholder {
color: blue;
opacity: 1;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
/* -webkit-box-shadow: 0 0 0 40px white inset !important; */
-webkit-box-shadow: 0 0 0 0 rgba(white,0.0) inset !important;
}
input:-webkit-autofill {
-webkit-text-fill-color: yellow;
}
.v_menu {
border: 1px solid #ddd;
width: 250px;
margin: 0;
padding: 5px;
border-radius: 10px;
}
.v_menu li {
display: block;
}
.v_menu li a {
display: block;
padding: 15px 20px;
text-decoration: none;
border-radius: 10px;
color: #000;
font-size: 15px;
}
.v_menu li a.active {
background: #000;
color: #fff;
}
.sample{
display: inline-block;
background-color: red;
}
.sample{
display: inline-block;
background-color: red;
}
/*add radius all sides*/
.element {
border-radius: 10px;
}
/*
add radius specific sides
order - top-left top-right bottom-right bottom-left
*/
.element {
border-radius: 20px 10px 30px 20px;
}
/* using background proprty */
body {
background: url('https://placeimg.com/640/480/arch'); /*this will add image to background */
}
/* using background */
body {
background-image: url('https://placeimg.com/640/480/arch'); /*this will add image to background */
}
ul li:last-child {
background: #ff0000;
border: 1px solid #ff0000;
}
.element {
color: #ff0000;
}
/* SUPPORTS - chrome, firefox, opera, safari */
::placeholder {
color: blue;
opacity: 1;
}
/* SUPPORTS - internet explorer 10+ */
:-ms-input-placeholder {
color: blue;
}
/* SUPPORTS - microsoft edge */
::-ms-input-placeholder {
color: blue;
}
/* FOR SPECIFIC INPUT HAVING CLASS - control */
input.control::placeholder {
color: blue;
opacity: 1;
}
/* TO CAPITALIZE A SENTENCE */
.capitalize {
text-transform: capitalize;
}
/* TO UPPERCASE A SENTENCE */
.uppercase {
text-transform: uppercase;
}
/* TO LOWERCASE A SENTENCE */
.lowercase {
text-transform: lowercase;
}
.paragraph {
word-spacing: 10px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 40px white inset !important;
}
.flex_element {
display: flex;
flex-direction: row;
}
.flex_element {
display: flex;
flex-direction: row-reverse;
}
.flex_element {
display: flex;
flex-direction: column;
}
.flex_element {
display: flex;
flex-direction: column-reverse;
}
.flex_element {
display: flex;
flex-direction: initial;
}
.skew_container {
max-width: 500px;
margin: 50px auto;
overflow: hidden;
padding-bottom: 4%;
}
.skew_container .skew_bg {
height: 260px;
background: #115edb;
text-align: center;
padding-top: 130px;
margin-top: -9%;
transform: skew(0deg, 10deg); /*THIS WILL DO THE MAGIC*/
}
.skew_container .skew_bg .content {
color: #fff;
font-size: 30px;
transform: skew(0deg, -10deg); /* MAKE CONTENT HORIZENTAL */
}
.element {
-webkit-box-shadow: -5px 0 5px -5px #333;
-moz-box-shadow: -5px 0 5px -5px #333;
box-shadow: -5px 0 5px -5px #333;
}
/* FOR INSET CASE */
.elemnt_inset_left_shaow {
-webkit-box-shadow: 7px 0 4px -4px #333 inset;
-moz-box-shadow: 7px 0 4px -4px #333 inset;
box-shadow: 7px 0 4px -4px #333 inset;
}
.container {
animation-name: popin;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
/*THE ABOVE CODE IN SHORT FORMAT CAN BE WRITTEN IN SINGLE LINE*/
.container {
animation: popin 5s linear 2s infinite reverse;
}
/* TO GENERATE ANIMATION WE USE KEYFRAMES */
@keyframes popin {
from {
transform: scale(0.8);
}
to {
transform: scale(1.0);
}
}
.rounded_button {
padding: 1.2rem 2.5rem;
font-size: 1rem;
background: #207ef9;
color: #fff;
border-radius: 40px;
border: 0;
letter-spacing: 1px;
cursor: pointer;
outline: 0;
}
.rounded_button:hover {
opacity: .9;
}
.multi_line_ellipsis {
display: -webkit-box;
max-height: 3rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6rem;
}
.bottom-box-shadow {
-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
-moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
}
.rounded_button {
padding: 1.2rem 2.5rem;
font-size: 1rem;
background: #207ef9;
color: #fff;
border-radius: 40px;
border: 0;
letter-spacing: 1px;
cursor: pointer;
outline: 0;
}
.rounded_button:hover {
opacity: .9;
}