Skip to content

Instantly share code, notes, and snippets.

@NatalieMac
Created May 6, 2020 00:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NatalieMac/7611c35bdc2156cba2385ff5f67a9eb1 to your computer and use it in GitHub Desktop.
Save NatalieMac/7611c35bdc2156cba2385ff5f67a9eb1 to your computer and use it in GitHub Desktop.
table.tablepress {
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
display: block;
margin: auto;
max-width: 100%;
overflow-x: auto;
width: fit-content;
}
.tablepress thead th,
.tablepress tbody td {
background: #f6f7f8;
background: linear-gradient(to bottom,rgba(246,247,248,1) 0%,rgba(236,239,241,1) 100%);
border: 0 none;
}
.tablepress thead th {
padding: 1.8rem;
}
.tablepress tbody td {
font-size: 1.4rem;
padding: 1rem 1.6rem;
}
@media (min-width: 900px) {
.tablepress tbody td {
font-size: 1.6rem;
padding: 1.2rem 1.8rem;
}
}
.tablepress h3 {
font-size: 2.4rem;
font-weight: 300;
margin-top: 0;
}
@media (min-width: 900px) {
.tablepress h3 {
font-size: 3.6rem;
}
}
.tablepress p {
font-size: 1.4rem;
margin: 0;
}
@media (min-width: 900px) {
.tablepress p {
font-size: 1.6rem;
}
}
.tablepress h4 {
font-size: 1.8rem;
font-weight: 300;
margin: 0;
}
@media (min-width: 900px) {
.tablepress h4 {
font-size: 2.4rem;
}
}
.tablepress .price {
font-size: 2.4rem;
font-weight: 900;
margin: 1rem 0;
text-transform: uppercase;
}
.tablepress .coming-soon {
color: #FF5722;
display: block;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
}
.tablepress .button {
background: #FF5722;
border-radius: 2px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
color: white;
font-size: 1.2rem;
font-weight: 400;
padding: .5em 1em;
text-transform: uppercase;
transition: background 300ms;
white-space: nowrap;
}
@media (min-width: 900px) {
.tablepress .button {
font-size: 1.4rem;
}
}
.tablepress .button:hover,
.tablepress .button:focus {
background: #F4511E;
text-decoration: none;
}
.tablepress .column-1 {
min-width: 280px;
}
.tablepress .column-2,
.tablepress .column-3,
.tablepress .column-4,
.tablepress .column-5 {
text-align: center;
}
.tablepress .column-2 h4,
.tablepress .column-3 h4,
.tablepress .column-4 h4,
.tablepress .column-5 h4 {
color: white;
}
.tablepress .column-2 {
background: #8BC34A;
background: linear-gradient(to right,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 100%), linear-gradient(to bottom,rgba(139,195,74,1) 0%,rgba(124,179,66,1) 100%);
color: white;
width: 12.5%;
}
.tablepress .column-3 {
background: #43A047;
background: linear-gradient(to right,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 100%), linear-gradient(to bottom,rgba(67,160,71,1) 0%,rgba(56,142,60,1) 100%);
color: white;
width: 12.5%;
}
.tablepress .column-4 {
background: #00796B;
background: linear-gradient(to right,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 100%), linear-gradient(to bottom,rgba(0,121,107,1) 0%,rgba(0,105,92,1) 100%);
color: white;
width: 12.5%;
}
.tablepress .column-5 {
background: #37474F;
background: linear-gradient(to right,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 100%), linear-gradient(to bottom,rgba(55,71,79,1) 0%,rgba(38,50,56,1) 100%);
color: white;
width: 12.5%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment