added css sampe
Pocco81
3 years ago
parent
9795a1a1ed
commit
fcf3bd0987
@ -0,0 +1,175 @@
|
||||
body {
|
||||
background-color: #111921;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Galada-Regular';
|
||||
src: url('Galada-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/overpass/v5/qFdH35WCmI96Ajtm81GrU9vyww.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/overpass/v5/qFdH35WCmI96Ajtm81GlU9s.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
|
||||
U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400, 300);
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Galada-Regular';
|
||||
/* color: #000000; */
|
||||
font-size: 90px;
|
||||
text-align: center;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Courier';
|
||||
font-size: 30px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
color: #000000;
|
||||
font-size: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
#about {
|
||||
color: blue;
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
|
||||
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Add a black background color to the top navigation */
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Style the links inside the navigation bar */
|
||||
.topnav a {
|
||||
float: left;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* Change the color of links on hover */
|
||||
.topnav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Add a color to the active/current link */
|
||||
.topnav a.active {
|
||||
background-color: #04aa6d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
max-width: 1291px;
|
||||
margin: 10% auto;
|
||||
height: 301px;
|
||||
position: relative;
|
||||
padding: 34px;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
top: 50%;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 40px lighten(#000, 60%);
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
&.level-3 {
|
||||
&:hover {
|
||||
&:before {
|
||||
box-shadow: 0 0 80px lighten(#000, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* The sidebar menu */
|
||||
.sidenav {
|
||||
height: 100%; /* Full-height: remove this if you want "auto" height */
|
||||
width: 160px; /* Set the width of the sidebar */
|
||||
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
|
||||
z-index: 1; /* Stay on top */
|
||||
top: 0; /* Stay at the top */
|
||||
left: 0;
|
||||
background-color: #111; /* Black */
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* The navigation menu links */
|
||||
.sidenav a {
|
||||
padding: 6px 8px 6px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
color: #818181;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When you mouse over the navigation links, change their color */
|
||||
.sidenav a:hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.sidenav a {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue