Skip to content

Instantly share code, notes, and snippets.

@yfr

yfr/index.html

Created May 12, 2019 11:47
Show Gist options
  • Save yfr/e6669f225eee8b6338b1512977285e82 to your computer and use it in GitHub Desktop.
Save yfr/e6669f225eee8b6338b1512977285e82 to your computer and use it in GitHub Desktop.
Download ZIP
HTML-CSS 2019.04 Finale Version
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
<link
href="https://fonts.googleapis.com/css?family=Cutive+Mono"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="heading">
Titel Dieser Webseite
</div>
<div class="gallery">
<div class="gallery-controls">
<button class="gallery-controls-button button-prev">
<--
</button>
<button class="gallery-controls-button button-next">
-->
</button>
</div>
<div class="gallery-slider">
<figure class="gallery-figure">
<img
class="gallery-image"
src="./images/alex-povolyashko-463765.jpg"
/>
<figcaption class="gallery-caption">
<h2>Bildunterschrift</h2>
<ul class="image-info">
<li>Ort: Canyon</li>
<li>Zeit: 01. Jan 2019</li>
<li>Brennweite: f/2.8</li>
<li>Linse: 70-200 mm</li>
</ul>
</figcaption>
</figure>
<figure class="gallery-figure">
<img class="gallery-image" src="./images/ashim-d-silva-162286.jpg" />
<figcaption class="gallery-caption">
<h2>Bildunterschrift</h2>
<ul class="image-info">
<li>Ort: Canyon</li>
<li>Zeit: 01. Jan 2019</li>
<li>Brennweite: f/2.8</li>
<li>Linse: 70-200 mm</li>
</ul>
</figcaption>
</figure>
<figure class="gallery-figure">
<img class="gallery-image" src="./images/geran-de-klerk-136351.jpg" />
<figcaption class="gallery-caption">
<h2>Bildunterschrift</h2>
<ul class="image-info">
<li>Ort: Canyon</li>
<li>Zeit: 01. Jan 2019</li>
<li>Brennweite: f/2.8</li>
<li>Linse: 70-200 mm</li>
</ul>
</figcaption>
</figure>
<figure class="gallery-figure">
<img
class="gallery-image"
src="./images/holly-mandarich-521421.jpg"
/>
<figcaption class="gallery-caption">
<h2>Bildunterschrift</h2>
<ul class="image-info">
<li>Ort: Canyon</li>
<li>Zeit: 01. Jan 2019</li>
<li>Brennweite: f/2.8</li>
<li>Linse: 70-200 mm</li>
</ul>
</figcaption>
</figure>
<figure class="gallery-figure">
<img class="gallery-image" src="./images/jake-blucker-316192.jpg" />
<figcaption class="gallery-caption">
<h2>Bildunterschrift</h2>
<ul class="image-info">
<li>Ort: Canyon</li>
<li>Zeit: 01. Jan 2019</li>
<li>Brennweite: f/2.8</li>
<li>Linse: 70-200 mm</li>
</ul>
</figcaption>
</figure>
<figure class="gallery-figure">
<img
class="gallery-image"
src="./images/joseff-little-1527897-unsplash.jpg"
/>
<figcaption class="gallery-caption">
<h2>Bildunterschrift</h2>
<ul class="image-info">
<li>Ort: Canyon</li>
<li>Zeit: 01. Jan 2019</li>
<li>Brennweite: f/2.8</li>
<li>Linse: 70-200 mm</li>
</ul>
</figcaption>
</figure>
</div>
</div>
<script src="./scripts.js" ></script>
</body>
</html>
Raw
scripts.js
var buttonPrev = document.querySelector(".button-prev");
var buttonNext = document.querySelector(".button-next");
var gallerySlider = document.querySelector(".gallery-slider");
var gallery = document.querySelector(".gallery");
var galleryFigures = document.querySelectorAll(".gallery-figure");
var counter = 0;
var imageCount = galleryFigures.length;
var onButtonPrevClick = function() {
if (counter === 0) {
return;
}
console.log(counter)
var left = gallery.clientWidth * ( counter - 1 );
console.log(left)
gallerySlider.style.left = -left + 'px';
counter = counter - 1;
console.log(counter)
console.log('--------------')
}
var onButtonNextClick = function() {
console.log(counter)
if (counter === imageCount - 1) {
return;
}
// 530 * counter (1)
var left = gallery.clientWidth * (counter + 1);
console.log(left)
gallerySlider.style.left = -left + 'px';
counter = counter + 1;
console.log(counter)
console.log('--------------')
}
buttonPrev.onclick = onButtonPrevClick;
buttonNext.onclick = onButtonNextClick;
Raw
styles.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
color: #fff;
/* display: flex;
justify-content: center; */
margin: 0;
font-family: "Cutive Mono", monospace;
}
img {
object-fit: cover;
}
figure {
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.heading {
color: #fff;
}
.gallery {
position: relative;
width: 530px;
margin-top: 10px;
margin: 10px auto 0;
overflow: hidden;
}
.gallery-controls {
position: absolute;
box-sizing: border-box;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 100%;
display: flex;
justify-content: space-between;
padding-left: 5px;
padding-right: 5px;
}
.gallery-controls-button {
border-radius: 50%;
border: none;
background: #fff;
height: 40px;
width: 40px;
cursor: pointer;
opacity: 0.25;
transition: opacity .2s ease-in;
box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}
.gallery-controls-button:hover {
opacity: 1;
}
.gallery-slider {
display: flex;
position: relative;
left: 0;
transition: left .2s ease-in;
}
.gallery-image {
width: 530px;
height: 300px;
border-radius: 2px;
}
.gallery-figure {
position: relative;
display: flex;
margin-bottom: 10px;
}
.gallery-caption {
position: absolute;
left: 100%;
color: #fff;
margin-left: 1em;
height: 100%;
width: 100%;
}
.image-info {
opacity: 0;
transition: opacity 0.2s;
}
.gallery-figure:hover .image-info {
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment