|
|
Line 1: |
Line 1: |
| <html> | | <html> |
− | <head>
| |
− | <!-- Latest compiled and minified CSS -->
| |
− | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
| |
− | </head>
| |
| | | |
− |
| |
− |
| |
− | <style>
| |
− |
| |
− | html,body {
| |
− | font-family: 'Open Sans', sans-serif;
| |
− | font-size: 14px;
| |
− | background: #F0F2F4;
| |
− | }
| |
− | .navbar.is-white {
| |
− | background: #F0F2F4;
| |
− | }
| |
− | .navbar-brand .brand-text {
| |
− | font-size: 1.11rem;
| |
− | font-weight: bold;
| |
− | }
| |
− |
| |
− | .hero-body
| |
− | {background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Plum_trees_Kitano_Tenmangu.jpg/1200px-Plum_trees_Kitano_Tenmangu.jpg);
| |
− | background-position: center;
| |
− | background-size: cover;
| |
− | background-repeat: no-repeat;
| |
− | height: 500px;
| |
− | }
| |
− |
| |
− | .articles {
| |
− | margin: 5rem 0;
| |
− | margin-top: -200px;
| |
− | }
| |
− | .articles .content p {
| |
− | line-height: 1.9;
| |
− | margin: 15px 0;
| |
− | }
| |
− | .author-image {
| |
− | position: absolute;
| |
− | top: -30px;
| |
− | left: 50%;
| |
− | width: 60px;
| |
− | height: 60px;
| |
− | margin-left: -30px;
| |
− | border: 3px solid #ccc;
| |
− | border-radius: 50%;
| |
− | }
| |
− |
| |
− | .media-center {
| |
− | display: block;
| |
− | margin-bottom: 1rem;
| |
− | }
| |
− |
| |
− | .media-content {
| |
− | margin-top: 3rem;
| |
− | }
| |
− | .article, .promo-block {
| |
− | margin-top: 6rem;
| |
− | }
| |
− | div.column.is-8:first-child {
| |
− | padding-top: 0;
| |
− | margin-top: 0;
| |
− | }
| |
− | .article-title {
| |
− | font-size: 2rem;
| |
− | font-weight: lighter;
| |
− | line-height: 2;
| |
− | }
| |
− | .article-subtitle {
| |
− | color: #909AA0;
| |
− | margin-bottom: 3rem;
| |
− | }
| |
− | .article-body {
| |
− | line-height: 1.4;
| |
− | margin: 0 6rem;
| |
− | }
| |
− | .promo-block .container {
| |
− | margin: 1rem 5rem;
| |
− | }
| |
− |
| |
− | </style>
| |
| | | |
| <head> | | <head> |
Line 95: |
Line 14: |
| | | |
| <body> | | <body> |
− | <div id="container"> | + | <div> |
| <!-- START NAV --> | | <!-- START NAV --> |
| <nav class="navbar"> | | <nav class="navbar"> |
Line 269: |
Line 188: |
| </div> | | </div> |
| </body> | | </body> |
| + | |
| + | <style> |
| + | |
| + | html,body { |
| + | font-family: 'Open Sans', sans-serif; |
| + | font-size: 14px; |
| + | background: #F0F2F4; |
| + | } |
| + | .navbar.is-white { |
| + | background: #F0F2F4; |
| + | } |
| + | .navbar-brand .brand-text { |
| + | font-size: 1.11rem; |
| + | font-weight: bold; |
| + | } |
| + | |
| + | .hero-body |
| + | {background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Plum_trees_Kitano_Tenmangu.jpg/1200px-Plum_trees_Kitano_Tenmangu.jpg); |
| + | background-position: center; |
| + | background-size: cover; |
| + | background-repeat: no-repeat; |
| + | height: 500px; |
| + | } |
| + | |
| + | .articles { |
| + | margin: 5rem 0; |
| + | margin-top: -200px; |
| + | } |
| + | .articles .content p { |
| + | line-height: 1.9; |
| + | margin: 15px 0; |
| + | } |
| + | .author-image { |
| + | position: absolute; |
| + | top: -30px; |
| + | left: 50%; |
| + | width: 60px; |
| + | height: 60px; |
| + | margin-left: -30px; |
| + | border: 3px solid #ccc; |
| + | border-radius: 50%; |
| + | } |
| + | |
| + | .media-center { |
| + | display: block; |
| + | margin-bottom: 1rem; |
| + | } |
| + | |
| + | .media-content { |
| + | margin-top: 3rem; |
| + | } |
| + | .article, .promo-block { |
| + | margin-top: 6rem; |
| + | } |
| + | div.column.is-8:first-child { |
| + | padding-top: 0; |
| + | margin-top: 0; |
| + | } |
| + | .article-title { |
| + | font-size: 2rem; |
| + | font-weight: lighter; |
| + | line-height: 2; |
| + | } |
| + | .article-subtitle { |
| + | color: #909AA0; |
| + | margin-bottom: 3rem; |
| + | } |
| + | .article-body { |
| + | line-height: 1.4; |
| + | margin: 0 6rem; |
| + | } |
| + | .promo-block .container { |
| + | margin: 1rem 5rem; |
| + | } |
| + | |
| + | </style> |
| + | |
| | | |
| | | |
| </html> | | </html> |