Skip to content

Instantly share code, notes, and snippets.

@karimmakhloufi
Created April 14, 2021 14:01
Show Gist options
  • Save karimmakhloufi/5b1c8176dfc19706c105425e71a8e258 to your computer and use it in GitHub Desktop.
Save karimmakhloufi/5b1c8176dfc19706c105425e71a8e258 to your computer and use it in GitHub Desktop.
/*
* global. css
*/
body {
font-family: sans-serif;
color: #222;
margin: 0;
}
h1,
h2,
h3 {
margin: 0 0 0.35em;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 15px;
}
p {
margin: 0 0 1.15em;
}
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 24px;
}
header {
background-color: #f76c6c;
color: #fff;
}
footer {
border-top: 2px solid #f76c6c;
}
/*
* card-layout. css
*/
.card-row {
display: grid;
grid-template-columns: repeat(3, 32%);
justify-content: space-between;
}
.card {
padding: 20px;
border: 1px solid #c9c9c9;
border-radius: 7px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}
.card > img:first-child {
border-radius: 7px 7px 0 0;
margin-bottom: 20px;
max-width: 100%;
height: auto;
}
.card h3,
.card h4 {
color: #f76c6c;
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
}
.card h3 em {
padding: 0.25em;
background-color: #eddbff;
border-radius: 4px;
}
.card p,
.card ul {
color: #757575;
line-height: 1.5;
}
.button {
/* Reset text link default */
text-decoration: none;
background-color: #f76c6c;
color: #fff;
padding: 0.5em 1em;
border-radius: 4px;
display: inline-block;
}
.card .skills {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card .skills li {
margin: 4px 0;
display: flex;
justify-content: space-around;
border: #f76c6c 1px solid;
border-radius: 4px;
padding: 2px;
}
.card .skills .votes {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
/* Rounded border */
border-radius: 9999px;
height: 20px;
width: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment