Commit 56d14dce authored by Jogi Hofmüller's avatar Jogi Hofmüller

Improve layout and style

parent da7a759a
......@@ -89,7 +89,7 @@ body {
}
}
/* adapt size of Gerücharset
/* adapt size of Gerücht
------------------------------------------------------ */
.bd-placeholder-img {
font-size: 1.125rem;
......@@ -102,10 +102,10 @@ body {
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
font-size: 3rem;
}
#geruecht {
font-size: 2.7rem;
font-size: 2.5rem;
cursor: default;
}
}
......
<!doctype html>
<html lang="en">
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="description" content="Gerüchtegnerator">
<title>Gerüchtegenerator 3.0</title>
<!-- <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/"> -->
<!-- Bootstrap core CSS -->
<!-- <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<!-- this is done here, the rest is in caroussel.css -->
<style>
#geruecht-container {
background-color: gray;
color: white;
text-align: center;
width: 100%;
height: 100%;
padding: 4rem 1em 3rem 1em;
margin-top: 1rem;
min-height: 28rem;
}
</style>
</head>
<body>
<!-- <header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header> -->
<main role="main">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- <div id="myCarousel" class="carousel slide" data-ride="carousel"> -->
<!-- <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol> -->
<div class="carousel-inner">
<div class="carousel-item active" onclick="nextgeruecht()">
<!-- <div class="carousel-inner"> -->
<!-- <div class="carousel-item active" onclick="nextgeruecht()">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="carousel-caption">
<div class="container">
<div class="carousel-caption"> -->
<div class="container" id="geruecht-container">
<h1 id="geruecht">Kein Gerücht, echt nicht!</h1>
<!-- <p><a class="btn btn-lg btn-primary" id="next" role="button">Nächstes Gerücht</a></p> -->
</div>
</div>
</div>
<!-- <div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
<!-- </div>
</div> -->
</div>
<!-- <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
<!-- </div> -->
<!-- </div> -->
<!-- Marketing messaging and featurettes
......@@ -120,7 +78,7 @@
<form>
<div class="form-group">
<label for="newgeruecht">Neues Gerücht</label>
<input class="form-control" type="text" name="newgeruecht" id="newgeruecht" placeholder="Es gibt keine neuen Gerüchte." required="required">
<input pattern=".{20,}" class="form-control" type="text" name="newgeruecht" id="newgeruecht" placeholder="Es gibt keine neuen Gerüchte." required="required">
<small id="newgeruechtHelp" class="form-text text-muted">Mindestlänge 20 Zeichen</small>
</div>
<div class="form-group">
......
......@@ -71,4 +71,9 @@ window.onload = function() {
addgeruecht();
event.preventDefault();
})
var geruecht = document.getElementById('geruecht-container');
geruecht.addEventListener('click', function(event) {
nextgeruecht();
event.preventDefault();
})
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment