add background-image draft

This commit is contained in:
Simon Bruder 2017-12-06 22:38:40 +00:00
parent e7c35e1c00
commit 67b451fe3d
3 changed files with 24 additions and 17 deletions

View file

@ -11,7 +11,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ "css/bundle.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/bundle.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
@ -20,4 +20,3 @@
{{ partial "piwik.html" . }} {{ partial "piwik.html" . }}
</head> </head>
<body> <body>
<div class="container">

View file

@ -3,13 +3,15 @@
{{ with .Site.Params.Header.button }} {{ with .Site.Params.Header.button }}
<a class="button button-primary" href="{{ .link }}">{{ .text }}</a> <a class="button button-primary" href="{{ .link }}">{{ .text }}</a>
{{ end }} {{ end }}
<div class="value-props row">
{{ range .Site.Params.Header.feature }}
<div class="four columns value-prop">
<img class="value-img" src="{{ .image | relURL }}">
{{ .description | safeHTML }}
</div>
{{ end }}
</div>
</section> </section>
<div class="container">
</section class="features">
<div class="value-props row">
{{ range .Site.Params.Header.feature }}
<div class="four columns value-prop">
<img class="value-img" src="{{ .image | relURL }}">
{{ .description | safeHTML }}
</div>
{{ end }}
</div>
</section>

View file

@ -3,17 +3,18 @@ body {
} }
.header { .header {
margin-top: 6rem; padding-top: 6rem;
text-align: center; text-align: center;
min-height: 200px;
} }
.value-prop { .value-prop {
margin-top: 1rem; padding-top: 1rem;
} }
.value-props { .value-props {
margin-top: 4rem; padding-top: 4rem;
margin-bottom: 4rem; padding-bottom: 4rem;
} }
.value-img { .value-img {
@ -56,10 +57,10 @@ footer p {
@media (min-width: 550px) { @media (min-width: 550px) {
.header { .header {
margin-top: 18rem; padding-top: 18rem;
padding-bottom: 9rem;
} }
.value-props { .value-props {
margin-top: 9rem;
margin-bottom: 7rem; margin-bottom: 7rem;
} }
.value-img { .value-img {
@ -134,3 +135,8 @@ footer p {
width: 80%; width: 80%;
} }
} }
/* image header */
.header {
background: linear-gradient(#FFFFFF20,#FFFFFF7E), url('https://source.unsplash.com/mKA3VavSuaI/1920x800') center center no-repeat;
}