Start some new design

This commit is contained in:
2025-06-20 15:20:30 +02:00
parent 6128d21443
commit 3a9b9cddc6
3 changed files with 24 additions and 4 deletions

View File

@@ -1,4 +1,4 @@
.title-video { .title-video {
width: 100vw; width: 100vw;
height: 90vh; height: 90vh;
} }

View File

@@ -97,6 +97,22 @@ body.loaded {
background-color: var( --color-button-hover ); background-color: var( --color-button-hover );
} }
.divider {
width: 100%;
margin-bottom: 2%;
margin-top: 2%;
border-color: var( --color-text-primary );
}
.slider-element {
background-color: lightblue;
}
.slider-info {
display: flex;
flex-direction: column;
}
.pullquote-lines { .pullquote-lines {

View File

@@ -28,9 +28,11 @@
<div class="slider" style="width: 100vw; height: 80vh;"> <div class="slider" style="width: 100vw; height: 80vh;">
<div class="slider-container"> <div class="slider-container">
<div class="slider-element current" style="background-image: url( 'https://static.janishutz.com/assets/home/home-store.jpg' );"> <div class="slider-element current" style="background-image: url( 'https://static.janishutz.com/assets/home/home-store.jpg' );">
<h2>Software for your needs</h2> <div class="slider-info">
<p>Professional-Grade Software</p> <h2>Software for your needs</h2>
<a href="https://store.janishutz.com" class="button">Store</a> <p>Professional-Grade Software</p>
<a href="https://store.janishutz.com" class="button">Store</a>
</div>
</div> </div>
<div class="slider-element" style="background-image: url( 'https://static.janishutz.com/assets/home/home-custom.jpg' );"> <div class="slider-element" style="background-image: url( 'https://static.janishutz.com/assets/home/home-custom.jpg' );">
<h2>Custom Websites</h2> <h2>Custom Websites</h2>
@@ -48,9 +50,11 @@
</div> </div>
<div class="content"> <div class="content">
<hr class="divider">
<h1>My work</h1> <h1>My work</h1>
<p>Discover all my main projects</p> <p>Discover all my main projects</p>
<a href="/projects" class="button">Discover them</a> <a href="/projects" class="button">Discover them</a>
<hr class="divider">
<div class="side-by-side"> <div class="side-by-side">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>Store</h3> <h3>Store</h3>