Skip to content

Instantly share code, notes, and snippets.

@beaucarnes
Created June 11, 2018 12:15
Show Gist options
  • Save beaucarnes/ec37029de1b774d857c50828b5c837d9 to your computer and use it in GitHub Desktop.
Save beaucarnes/ec37029de1b774d857c50828b5c837d9 to your computer and use it in GitHub Desktop.
From 'Learn HTML5' course
@import url(https://use.fontawesome.com/releases/v5.0.6/css/all.css);
#home {
--first-color: #674ea7;
--second-color: #f4e767;
--light-gray: lightgray;
}
#next {
--first-color: tomato;
--second-color: deepskyblue;
--light-gray: lightgray;
}
html,body {
padding: 0;
height: 100%;
margin: 0px;
overflow: hidden;
}
h1,h2,h3,h4,h5,h6 {
margin-bottom: 0;
padding-bottom: 0;
color: var(--first-color);
}
p {
margin-top: 5px;
margin-bottom: 10px;
}
body {
display: flex;
}
.wrap {
left: 280px;
}
#offcanvas-left,
#offcanvas-right {
flex: 0 0 280px;
background-color: #111;
color: white;
transition-duration: .5s;
}
#offcanvas-left.hide {
margin-left: -280px;
}
#offcanvas-right.hide {
margin-right: -280px;
}
.togglebar {
background-color: #232323;
flex: 0 0;
min-width: 50px;
max-width: 5px;
}
.toggle i {
height: 80px;
font-size: 1.4em;
width: 100%;
color: var(--first-color);
display: flex;
align-items: center;
justify-content: center;
background-color: #111;
}
.toggle i:hover {
color: var(--second-color);
}
.center {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 95%;
}
.center header {
background-color: var(--first-color);
color: white;
}
header {
background-color: blueviolet;
flex: 0 0 40px;
color: white;
/* justify-content: center; */
padding: 20px;
}
header nav {
background-color: transparent;
}
header nav ul {
display: flex;
justify-content: space-between;
width: 100%;
}
header nav a {
color: white;
text-decoration: none;
font-size: 12px;
}
.center header nav a:hover {
text-decoration: underline
}
nav {
background-color: #f0f0f0;
}
nav ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
nav ul li{
list-style-type: none;
padding-left: 0;
margin-left: 0;
display: inline-flex;
padding: 10px;
}
nav a {
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.center section {
flex: 1 1 auto;
overflow-y: auto;
}
header {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
figure.hero {
position: relative;
height: 0;
padding-left: 0;
padding-bottom: 35%;
overflow: hidden;
margin: 0;
}
figure.hero img {
-webkit-filter: blur(3px);
filter: blur(3px);
transform: scale(1.03);
}
figure.hero figcaption{
position: absolute;
font-style: normal;
padding: 0;
margin: 0;
left: 0;
top: 50%;
color: white;
transform: translateY(-50%);
text-align: center;
width: 100%;
background-color: rgba(0,0,0,.6);
padding: 20px 0;
}
figure.hero figcaption * {
font-weight: bold;
font-size: 1.4em;
text-transform: uppercase;
}
#offcanvas-left ul,
#offcanvas-right ul {
padding: 0
}
#offcanvas-left ul li,
#offcanvas-right ul li {
color: white;
list-style-type: none;
padding-left: 0;
margin-left: 0;
padding: 10px;
border-bottom: 1px solid #222
}
#offcanvas-left a,
#offcanvas-right a {
color: white;
text-decoration: none;
}
#offcanvas-left li:hover a,
#offcanvas-right li:hover a {
color: var(--first-color);
}
footer {
display: grid;
grid-template-columns: 10% 1fr 1fr 10%;
grid-column-gap: 20px;
background-color: var(--second-color);
flex: 0 0 80px;
flex-direction: row;
/* padding: 40px 0px; */
}
footer section:first-child {
grid-column: 2;
}
.no-style li {
list-style-type: none;
}
.no-style ul {
margin-top: 0;
padding: 0;
}
.no-style b {
margin-bottom: 0;
padding: 0;
}
.no-style address {
font-style: normal;
}
form {
/* width: 100%; */
background-color: white;
padding: 20px;
/* display: flex; */
/* flex-direction: row; */
border-radius: 5px;
display: flex;
flex-direction: column;
/* max-width: 425px; */
/* width: 100%; */
/* padding: 20px 20px; */
}
form input, textarea {
margin: 10px 0;
border: 0;
background-color: lightgray;
border-radius: 5px;
padding: 10px;
}
form input[type=submit] {
/* width: 100%; */
background-color: var(--first-color);
}
form textarea {
min-height: 60px;
max-height: 100px;
resize: vertical;
}
article {
display: grid;
grid-template-columns: 10% 1fr 10%;
grid-column-gap: 20px;
padding-bottom: 100px;
}
article > * {
grid-column: 2;
min-width: 0;
}
article > figure {
grid-column: 1 / -1;
margin-bottom: 20px;
}
article > aside {
grid-column: 3;
color: #666;
font-size: 0.8em;
padding-right: 20px;
}
article > blockquote {
grid-column: 2 / -2;
margin: 10px 0;
color: #888;
font-size: 1.2em;
line-height: 1.4em;
border-left: 10px solid #f0f0f0;
padding-left: 10px;
margin-left: -20px;
}
p mark {
background-color: var(--first-color);
padding: 0 5px;
color: white;
font-weight: normal;
}
hr {
background-color: var(--first-color);
height: 2px;
width: 100%;
border: 0;
}
/* General styling */
img {
width: 100%;
}
.line-numbers a {
text-decoration: none;
color: #000;
padding-right: 1em;
}
code {
background: #eee;
padding: 2px 5px;
}
pre {
background: #eee;
padding: 10px 15px;
overflow: auto;
}
pre > code {
padding: 0;
}
.responsive-vid {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.responsive-vid iframe,
.responsive-vid video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@Berry765
Copy link

Berry765 commented Jun 3, 2020

Thanks to you

@adsaadeddin
Copy link

Thanks

@Tkzee293
Copy link

Tkzee293 commented Sep 8, 2021

Thank you

Copy link

ghost commented Jun 3, 2022

You are the best

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment