Chore: added photo carrousel
Ward Truyen
@ -84,11 +84,11 @@ main>h3{
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* img { */
|
||||
/* display: inline-block; */
|
||||
/* margin: 0 auto; */
|
||||
/* max-width: 100%; */
|
||||
/* } */
|
||||
|
||||
ul.dashed {
|
||||
list-style-type: '- ';
|
||||
@ -115,6 +115,19 @@ html.theme-dark {
|
||||
text-shadow: 0px 0px 3px blue, 2px 2px 6px;
|
||||
}
|
||||
|
||||
.splide__slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#image-carousel{
|
||||
width: 50rem;
|
||||
margin: 0 auto;
|
||||
/* background: #DD8888DD; */
|
||||
}
|
||||
|
||||
@media(orientation: portrait) {
|
||||
main {
|
||||
margin-top: 0;
|
||||
|
||||
1
src/css/splide.min.css
vendored
Normal file
BIN
src/img/tds1.png
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 107 KiB |
BIN
src/img/tds2.png
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 96 KiB |
BIN
src/img/tds3.png
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 96 KiB |
BIN
src/img/tds4.png
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 101 KiB |
@ -5,6 +5,7 @@
|
||||
<title>Ward Truyen home</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
<link rel="stylesheet" href="css/splide.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -50,10 +51,35 @@
|
||||
<h3>Familie website</h3>
|
||||
<p>Op <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> staat mijn gezin data beheer site.
|
||||
Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p>
|
||||
<section id="image-carousel" class="splide" aria-label="Beautiful Images">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<li class="splide__slide">
|
||||
<img src="img/tds1.png" alt="tds.truyen.network">
|
||||
</li>
|
||||
<li class="splide__slide">
|
||||
<img src="img/tds2.png" alt="tds.truyen.network">
|
||||
</li>
|
||||
<li class="splide__slide">
|
||||
<img src="img/tds3.png" alt="tds.truyen.network">
|
||||
</li>
|
||||
</li>
|
||||
<li class="splide__slide">
|
||||
<img src="img/tds4.png" alt="tds.truyen.network">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<script src="js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
new Splide('#image-carousel').mount();
|
||||
});
|
||||
</script>
|
||||
<!-- <img src="img/tds1.png" alt="tds.truyen.network"> -->
|
||||
<!-- <img src="img/tds2.png" alt="tds.truyen.network"> -->
|
||||
<!-- <img src="img/tds3.png" alt="tds.truyen.network"> -->
|
||||
<!-- <img src="img/tds4.png" alt="tds.truyen.network"> -->
|
||||
<p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van diezelfde site,
|
||||
waar u op kan inloggen en inspecteren (login gegevens staan in mijn CV).<br> Mocht er hier iets fout lopen, stuur
|
||||
me a.u.b. een e-mail of bel me, en ik los het ASAP op.</p>
|
||||
|
||||