Skip to content

Instantly share code, notes, and snippets.

@GabrielCzar

GabrielCzar/cards.html

Last active February 16, 2019 17:23
Show Gist options
  • Save GabrielCzar/e094fabd99c005861af791813ac40ed6 to your computer and use it in GitHub Desktop.
Save GabrielCzar/e094fabd99c005861af791813ac40ed6 to your computer and use it in GitHub Desktop.
Download ZIP
Materialize Card Dashboard => Insert the index.html raw link and css raw link in this site: https://gabrielczar.github.io/render-gist/
Raw
cards.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Materialize - Dash</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<main class="container">
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-light-blue-teal gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-indigo-light-blue gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-light-blue-indigo gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-yellow-green gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3432432432</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-orange-deep-orange gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-deep-purple-purple gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-red-pink gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-light-green-amber gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>342432</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-amber-amber gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-purple-pink gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-indigo-light-blue gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-teal-cyan gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>312321</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-blue-grey-blue-grey gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-cyan-light-green gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-orange-amber gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-indigo-blue gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>324324</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-brown-brown gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-blue-grey-blue gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-purple-deep-orange gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-green-teal gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>423432</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-purple-light-blue gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-cyan-cyan gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-yellow-teal gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-purple-deep-purple gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>243242</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-cyan-light-green gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-purple-amber gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-indigo-purple gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-deep-purple-blue gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>23424</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l3">
<div class="card gradient-deep-orange-orange gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">add_shopping_cart</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>6,00,00</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-light-blue-cyan gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">perm_identity</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>1,12,900</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-blue-indigo gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">timeline</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>3,42,230</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card gradient-semi-dark gradient-shadow min-height-100 white-text">
<div class="padding-4">
<div class="col s7 m7">
<i class="material-icons background-round mt-5">attach_money</i>
<p>DESCRIPTION</p>
</div>
<div class="col s5 m5 right-align">
<h5 class="mb-0">HEADER</h5>
<p class="no-margin">SUB-HEADER</p>
<p>25.000</p>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Raw
style.css
/* MEDIA QUERIES */
@media only screen and (min-width: 0) { html{ font-size:14px; }}
@media only screen and (min-width: 992px) { html{ font-size: 15px; }}
@media only screen and (min-width: 1200px) { html{ font-size:15px; }}
@media only screen and (min-width: 601px) { .container { width: 98%; }}
@media only screen and (min-width: 993px) { .container { width: 98%; }}
/* CORE */
html, body {
background-color:#f9f9f9;
height: 100%;
line-height: 1.5;
font-family: "Roboto", sans-serif !important;
font-weight: normal;
color: rgba(0, 0, 0, 0.87);
}
a { text-decoration: none; }
p { font-family: "Roboto", sans-serif; }
h1, h2, h3, h4, h5, h6{ font-family: sans-serif; font-weight: 400; line-height: 1.1; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 4.2rem; line-height: 110%; margin: 2.1rem 0 1.68rem 0; }
h2 { font-size: 3.56rem; line-height: 110%; margin: 1.78rem 0 1.424rem 0; }
h3 { font-size: 2.92rem; line-height: 110%; margin: 1.46rem 0 1.168rem 0; }
h4 { font-size: 2.28rem; line-height: 110%; margin: 1.14rem 0 0.912rem 0; }
h5 { font-size: 1.64rem; line-height: 110%; margin: 0.82rem 0 0.656rem 0; }
h6 { font-size: 1rem; line-height: 110%; margin: 0.5rem 0 0.4rem 0; }
em { font-style: italic; }
strong { font-weight: 500; }
small { font-size: 75%; }
/* DEFAULT CLASS */
.background-round { background-color: rgba(0, 0, 0, 0.18); padding: 15px; border-radius: 50%; }
.container { padding: 0 0.5rem; margin: 0 auto; max-width: 100% !important; width: 98%; }
.min-height-100 { min-height: 100px !important; }
.padding-4 { padding: 4% !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-5 { margin-top: 5% !important; }
.no-margin { margin: 0 !important; }
.card { overflow: hidden; }
/* COLOR GRADIENT */
.gradient-light-blue-teal {
background: #b3e5fc;
background: -webkit-linear-gradient(45deg, #b3e5fc 0%, #64ffda 100%);
background: linear-gradient(45deg, #b3e5fc 0%, #64ffda 100%);
}
.gradient-light-blue-teal.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5);
}
.gradient-indigo-light-blue {
background: #c5cae9;
background: -webkit-linear-gradient(45deg, #c5cae9 0%, #b3e5fc 100%);
background: linear-gradient(45deg, #c5cae9 0%, #b3e5fc 100%);
}
.gradient-indigo-light-blue.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(179, 229, 252, 0.5);
}
.gradient-light-blue-indigo {
background: #b3e5fc;
background: -webkit-linear-gradient(45deg, #b3e5fc 0%, #9fa8da 100%);
background: linear-gradient(45deg, #b3e5fc 0%, #9fa8da 100%);
}
.gradient-light-blue-indigo.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(159, 168, 218, 0.5);
}
.gradient-yellow-green {
background: #ffff8d;
background: -webkit-linear-gradient(45deg, #ffff8d 0%, #B9F6CA 100%);
background: linear-gradient(45deg, #ffff8d 0%, #B9F6CA 100%);
}
.gradient-yellow-green.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(185, 246, 202, 0.5);
}
.gradient-orange-deep-orange {
background: #ffe0b2;
background: -webkit-linear-gradient(45deg, #ffe0b2 0%, #ffccbc 100%);
background: linear-gradient(45deg, #ffe0b2 0%, #ffccbc 100%);
}
.gradient-orange-deep-orange.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(255, 204, 188, 0.5);
}
.gradient-deep-purple-purple {
background: #d1c4e9;
background: -webkit-linear-gradient(45deg, #d1c4e9 0%, #f3e5f5 100%);
background: linear-gradient(45deg, #d1c4e9 0%, #f3e5f5 100%);
}
.gradient-deep-purple-purple.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(243, 229, 245, 0.5);
}
.gradient-red-pink {
background: #FF5252;
background: -webkit-linear-gradient(45deg, #FF5252 0%, #f48fb1 100%);
background: linear-gradient(45deg, #FF5252 0%, #f48fb1 100%);
}
.gradient-red-pink.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(244, 143, 177, 0.5);
}
.gradient-light-green-amber {
background: #c5e1a5;
background: -webkit-linear-gradient(45deg, #c5e1a5 0%, #fff8e1 100%);
background: linear-gradient(45deg, #c5e1a5 0%, #fff8e1 100%);
}
.gradient-light-green-amber.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(255, 248, 225, 0.5);
}
.gradient-amber-amber {
background: #ff6f00;
background: -webkit-linear-gradient(45deg, #ff6f00 0%, #ffca28 100%);
background: linear-gradient(45deg, #ff6f00 0%, #ffca28 100%);
}
.gradient-amber-amber.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(255, 111, 0, 0.3);
}
.gradient-purple-pink {
background: #ea80fc;
background: -webkit-linear-gradient(45deg, #ea80fc 0%, #fce4ec 100%);
background: linear-gradient(45deg, #ea80fc 0%, #fce4ec 100%);
}
.gradient-purple-pink.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(252, 228, 236, 0.5);
}
.gradient-indigo-light-blue {
background: #3949ab;
background: -webkit-linear-gradient(45deg, #3949ab 0%, #4fc3f7 100%);
background: linear-gradient(45deg, #3949ab 0%, #4fc3f7 100%);
}
.gradient-indigo-light-blue.gradient-shadow {
box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5);
}
.gradient-teal-cyan {
background: #e0f2f1;
background: -webkit-linear-gradient(45deg, #e0f2f1 0%, #00e5ff 100%);
background: linear-gradient(45deg, #e0f2f1 0%, #00e5ff 100%);
}
.gradient-teal-cyan.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5); }
.gradient-blue-grey-blue-grey {
background: #cfd8dc;
background: -webkit-linear-gradient(45deg, #cfd8dc 0%, #546e7a 100%);
background: linear-gradient(45deg, #cfd8dc 0%, #546e7a 100%);
}
.gradient-blue-grey-blue-grey.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5); }
.gradient-cyan-light-green {
background: #0097a7;
background: -webkit-linear-gradient(45deg, #0097a7 0%, #b2ff59 100%);
background: linear-gradient(45deg, #0097a7 0%, #b2ff59 100%);
}
.gradient-cyan-light-green.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(178, 255, 89, 0.5); }
.gradient-orange-amber {
background: #e65100;
background: -webkit-linear-gradient(45deg, #e65100 0%, #ffa000 100%);
background: linear-gradient(45deg, #e65100 0%, #ffa000 100%);
}
.gradient-orange-amber.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5); }
.gradient-indigo-blue {
background: #303f9f;
background: -webkit-linear-gradient(45deg, #303f9f 0%, #1976D2 100%);
background: linear-gradient(45deg, #303f9f 0%, #1976D2 100%);
}
.gradient-indigo-blue.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5); }
.gradient-brown-brown {
background: #6d4c41;
background: -webkit-linear-gradient(45deg, #6d4c41 0%, #d7ccc8 100%);
background: linear-gradient(45deg, #6d4c41 0%, #d7ccc8 100%);
}
.gradient-brown-brown.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(187, 222, 251, 0.5); }
.gradient-blue-grey-blue {
background: #263238;
background: -webkit-linear-gradient(45deg, #263238 0%, #2979FF 100%);
background: linear-gradient(45deg, #263238 0%, #2979FF 100%);
}
.gradient-blue-grey-blue.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(41, 121, 255, 0.5); }
.gradient-purple-deep-orange {
background: #8e24aa;
background: -webkit-linear-gradient(45deg, #8e24aa 0%, #ff6e40 100%);
background: linear-gradient(45deg, #8e24aa 0%, #ff6e40 100%);
}
.gradient-purple-deep-orange.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(255, 110, 64, 0.5); }
.gradient-green-teal {
background: #43A047;
background: -webkit-linear-gradient(45deg, #43A047 0%, #1de9b6 100%);
background: linear-gradient(45deg, #43A047 0%, #1de9b6 100%);
}
.gradient-green-teal.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(77, 182, 172, 0.5); }
.gradient-purple-light-blue {
background: #e040fb;
background: -webkit-linear-gradient(45deg, #e040fb 0%, #4fc3f7 100%);
background: linear-gradient(45deg, #e040fb 0%, #4fc3f7 100%);
}
.gradient-purple-light-blue.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5); }
.gradient-cyan-cyan {
background: #18ffff;
background: -webkit-linear-gradient(45deg, #18ffff 0%, #00e5ff 100%);
background: linear-gradient(45deg, #18ffff 0%, #00e5ff 100%);
}
.gradient-cyan-cyan.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5); }
.gradient-yellow-teal {
background: #fff9c4;
background: -webkit-linear-gradient(45deg, #fff9c4 0%, #64ffda 100%);
background: linear-gradient(45deg, #fff9c4 0%, #64ffda 100%);
}
.gradient-yellow-teal.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5); }
.gradient-purple-deep-purple {
background: #7b1fa2;
background: -webkit-linear-gradient(45deg, #7b1fa2 0%, #7c4dff 100%);
background: linear-gradient(45deg, #7b1fa2 0%, #7c4dff 100%);
}
.gradient-purple-deep-purple.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(124, 77, 255, 0.5); }
.gradient-cyan-light-green {
background: #00e5ff;
background: -webkit-linear-gradient(45deg, #00e5ff 0%, #ccff90 100%);
background: linear-gradient(45deg, #00e5ff 0%, #ccff90 100%);
}
.gradient-cyan-light-green.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(204, 255, 144, 0.5); }
.gradient-purple-amber {
background: #d500f9;
background: -webkit-linear-gradient(45deg, #d500f9 0%, #ffa000 100%);
background: linear-gradient(45deg, #d500f9 0%, #ffa000 100%);
}
.gradient-purple-amber.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(255, 160, 0, 0.5); }
.gradient-indigo-purple {
background: #303f9f;
background: -webkit-linear-gradient(45deg, #303f9f 0%, #7b1fa2 100%);
background: linear-gradient(45deg, #303f9f 0%, #7b1fa2 100%);
}
.gradient-indigo-purple.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(123, 31, 162, 0.5); }
.gradient-deep-purple-blue {
background: #6200ea;
background: -webkit-linear-gradient(45deg, #6200ea 0%, #1976D2 100%);
background: linear-gradient(45deg, #6200ea 0%, #1976D2 100%);
}
.gradient-deep-purple-blue.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5); }
.gradient-deep-orange-orange {
background: #bf360c;
background: -webkit-linear-gradient(45deg, #bf360c 0%, #f57c00 100%);
background: linear-gradient(45deg, #bf360c 0%, #f57c00 100%);
}
.gradient-deep-orange-orange.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(245, 124, 0, 0.5); }
.gradient-light-blue-cyan {
background: #0288d1;
background: -webkit-linear-gradient(45deg, #0288d1 0%, #26c6da 100%);
background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%);
}
.gradient-light-blue-cyan.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(38, 198, 218, 0.5); }
.gradient-blue-indigo {
background: #2962FF;
background: -webkit-linear-gradient(45deg, #2962FF 0%, #3949ab 100%);
background: linear-gradient(45deg, #2962FF 0%, #3949ab 100%);
}
.gradient-blue-indigo.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(57, 73, 171, 0.5); }
.gradient-semi-dark {
background: #00AEFF;
background: -webkit-linear-gradient(180deg, #00AEFF 0%, #3369E6 100%);
background: linear-gradient(-90deg, #00AEFF 0%, #3369E6 100%);
}
.gradient-semi-dark.gradient-shadow { box-shadow: 0 6px 20px 0 rgba(51, 105, 230, 0.5); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment