html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Playfair Display';
font-color: black;
padding: 10px;
margin-bottom: 210px;
background: #f1f1f1;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #0c5fb2;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color:#f4f4f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: blue;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
background-color: #f1f1f1;
float: left;
width: 60%;
}
.lcol {
background-color: #f1f1f1;
float: left;
width: 25%;
}
.leftcolumn1 {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 40%;
padding-left: 20px;
}
.rightcolumn1 {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Right column */
.rcol {
float: left;
width: 75%;
background-color: #f1f1f1;
padding-left: 20px;
}
.rightrow:after
{
float: left;
width: 30%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Fake image */
.img {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: AliceBlue;
padding: 60px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer CSS Styles */
.footer {
position: center;
bottom: 0;
width: 900px;
/* Set the fixed height of the footer here */
min-height: 180px;
background-color: #0c5fb2;
}
.container-fluid,.container {
position: center;
width: auto;
max-width: 1600px;
padding: 0px;
background-color: #0c5fb2;
}
.container .text-muted {
margin: 10px 0;
}
.container-fluid a {
color: #f1f1f1;
}
.container-fluid a:focus, a:hover {
color: #050404;
}
.container-fluid p {
max-width:800px;
color:#4a82ba;
padding: 7px;
text-align: center;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
body {
/* Margin bottom by footer height */
padding-top: 1rem;
margin-bottom: 10px;
nav {
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
div {
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
h1{
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
h2{
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
h3{
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
h4{
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
h5{
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
p { @font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v13/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
}
}
My Web Design & Development
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.