Text- u. Style-Kosmetik
This commit is contained in:
parent
b392e0aaac
commit
b37848bf4d
@ -1,27 +1,34 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Quicksand');
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
color: #fff;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
.bg {
|
||||
/* The image used */
|
||||
|
||||
background-image: url("../img/background.jpg");
|
||||
/* Full height */
|
||||
|
||||
height: 100%;
|
||||
/* Center and scale the image nicely */
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background: url("../img/background.jpg") no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bg {
|
||||
body {
|
||||
background-image: url("../img/background@2x.jpg");
|
||||
}
|
||||
}
|
||||
.container.filled {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
.container .intro {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
.container .intro .btn {
|
||||
margin: auto;
|
||||
}
|
||||
.container img {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@ -2,27 +2,40 @@
|
||||
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
.bg {
|
||||
/* The image used */
|
||||
background-image: url("../img/background.jpg");
|
||||
|
||||
background: url("../img/background.jpg") no-repeat center center fixed;
|
||||
@media (min-width: 992px) {
|
||||
background-image: url("../img/background@2x.jpg");
|
||||
}
|
||||
|
||||
/* Full height */
|
||||
height: 100%;
|
||||
|
||||
/* Center and scale the image nicely */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.container {
|
||||
&.filled {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.intro {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
31
index.html
31
index.html
@ -14,8 +14,14 @@
|
||||
<title>Ο|||||Ο »Jeep Wrangler YJ«</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg container">
|
||||
<h2 class="text-center">Jeep Wrangler</h2>
|
||||
<div class="container">
|
||||
<div class="row intro">
|
||||
<a href="#start" class="btn btn-secondary btn-lg" role="button" aria-disabled="true">Weiterlesen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container filled">
|
||||
<h2 class="text-center"><a name="start">Jeep Wrangler</a></h2>
|
||||
<h4 class="text-center">YJ</h4>
|
||||
|
||||
<div class="row">
|
||||
@ -27,7 +33,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<section>
|
||||
<h5>Unser Neuer</h5>
|
||||
<h3>Unser Neuer</h3>
|
||||
<p>
|
||||
Da ist er. Unser Neuer.<br>
|
||||
Anfang des Jahres 2018 haben wir uns als Zweitwagen und Hundeauto einen 93er Wrangler gekauft.
|
||||
@ -45,11 +51,11 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<section>
|
||||
<h5>Was haben wir vor?</h5>
|
||||
<h3>Was haben wir vor?</h3>
|
||||
<p>
|
||||
Wir wollen den Jeep als Hundeauto nutzen, aber auch ein- u. mehrtägige Ausflüge damit unternehmen.<br>
|
||||
Solche Ausflüge machen besonderen Spaß, wenn man sie durch kleinere Luxus-Elemente wie Strom und kühle Getränke aufwertet. ;-)<br>
|
||||
Und genau das haben wir getan und stellen unsere Umbauten hier vor. Da der Umbau wohl nie vollends abgeschlossen sein wird, wird sich auch diese Seite immer wieder ändern. Wir sind selbst sehr gespannt.
|
||||
Da der Umbau wohl nie vollends abgeschlossen sein wird, wird sich auch diese Seite immer wieder ändern. Wir sind selbst sehr gespannt.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
@ -64,16 +70,20 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<section>
|
||||
<h5>Werkstatt</h5>
|
||||
<h4>Neue Kupplung</h4>
|
||||
<h3>Werkstatt</h3>
|
||||
<h4>Kupplung</h4>
|
||||
<p>
|
||||
Bereits nach kurzer Zeit machte das Einkuppeln Probleme. Wir haben dann die Kupplung tauschen lassen.
|
||||
</p>
|
||||
|
||||
<h4>Fahrwerk</h4>
|
||||
<p>
|
||||
Da es sich schließlich um einen Jeep handelt, lassen wir uns nicht lumpen und tauschen das Fahrwerk.<br>
|
||||
Wir sitzen dann 6,5cm höher.
|
||||
Da es sich schließlich um einen Jeep handelt, lassen wir uns nicht lumpen und tauschen das Fahrwerk - jetzt sitzen wir 6,5cm höher.
|
||||
</p>
|
||||
|
||||
<h4>Dachleuchten</h4>
|
||||
<p>
|
||||
Die Abschleppwagen-Leuchten haben wir vorerst abgebaut. Wahrscheinlich werden wir irgendwann andere LED-Leuchten am Dach montieren.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
@ -88,7 +98,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<section>
|
||||
<h5>Thermostat</h5>
|
||||
<h3>Thermostat</h3>
|
||||
<p>
|
||||
Unser Außenthermostat.<br>
|
||||
Übertreibt maßlos. :-)
|
||||
@ -96,7 +106,6 @@
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user