style.css

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.