gerrit/web-yj.kwul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Text- u. Style-Kosmetik

Browse Source
This commit is contained in:
Gerrit Linnemann 2018-07-28 19:25:55 +02:00
parent b392e0aaac
commit b37848bf4d
3 changed files with 67 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
View File

@ -1,27 +1,34 @@
@import url('https://fonts.googleapis.com/css?family=Quicksand'); @import url('https://fonts.googleapis.com/css?family=Quicksand');
body, body,
html { html {
margin: 0;
height: 100%; height: 100%;
} }
body { body {
color: #fff; color: #fff;
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
} background: url("../img/background.jpg") no-repeat center center fixed;
.bg { -webkit-background-size: cover;
/* The image used */ -moz-background-size: cover;
-o-background-size: cover;
background-image: url("../img/background.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.bg { body {
background-image: url("../img/background@2x.jpg"); 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;
}

37
css/style.less
View File

@ -2,27 +2,40 @@
body, html { body, html {
margin: 0;
height: 100%; height: 100%;
} }
body { body {
color: #fff; color: #fff;
font-family: 'Quicksand', sans-serif; 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) { @media (min-width: 992px) {
background-image: url("../img/background@2x.jpg"); background-image: url("../img/background@2x.jpg");
} }
-webkit-background-size: cover;
/* Full height */ -moz-background-size: cover;
height: 100%; -o-background-size: cover;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
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;
}
}

35
index.html
View File

@ -14,10 +14,16 @@
<title>&Omicron;|||||&Omicron; &raquo;Jeep Wrangler YJ&laquo;</title> <title>&Omicron;|||||&Omicron; &raquo;Jeep Wrangler YJ&laquo;</title>
</head> </head>
<body> <body>
<div class="bg container"> <div class="container">
<h2 class="text-center">Jeep Wrangler</h2> <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> <h4 class="text-center">YJ</h4>
<div class="row"> <div class="row">
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<picture> <picture>
@ -27,7 +33,7 @@
</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<section> <section>
<h5>Unser Neuer</h5> <h3>Unser Neuer</h3>
<p> <p>
Da ist er. Unser Neuer.<br> Da ist er. Unser Neuer.<br>
Anfang des Jahres 2018 haben wir uns als Zweitwagen und Hundeauto einen 93er Wrangler gekauft. Anfang des Jahres 2018 haben wir uns als Zweitwagen und Hundeauto einen 93er Wrangler gekauft.
@ -45,11 +51,11 @@
</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<section> <section>
<h5>Was haben wir vor?</h5> <h3>Was haben wir vor?</h3>
<p> <p>
Wir wollen den Jeep als Hundeauto nutzen, aber auch ein- u. mehrtägige Ausflüge damit unternehmen.<br> 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> 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> </p>
</section> </section>
</div> </div>
@ -64,16 +70,20 @@
</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<section> <section>
<h5>Werkstatt</h5> <h3>Werkstatt</h3>
<h4>Neue Kupplung</h4> <h4>Kupplung</h4>
<p> <p>
Bereits nach kurzer Zeit machte das Einkuppeln Probleme. Wir haben dann die Kupplung tauschen lassen. Bereits nach kurzer Zeit machte das Einkuppeln Probleme. Wir haben dann die Kupplung tauschen lassen.
</p> </p>
<h4>Fahrwerk</h4> <h4>Fahrwerk</h4>
<p> <p>
Da es sich schließlich um einen Jeep handelt, lassen wir uns nicht lumpen und tauschen das Fahrwerk.<br> 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.
Wir sitzen dann 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> </p>
</section> </section>
</div> </div>
@ -88,15 +98,14 @@
</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<section> <section>
<h5>Thermostat</h5> <h3>Thermostat</h3>
<p> <p>
Unser Außenthermostat.<br> Unser Außenthermostat.<br>
Übertreibt maßlos. :-) Übertreibt maßlos. :-)
</p> </p>
</section> </section>
</div> </div>
</div> </div>
</div> </div>