Art Café Website “Kunst & Kuchen”

I had an HTML/CSS course this week, and we had to make a demo project. I decided to make a small website for a café that’s also an event location for art-related events. I tried to incorporate as many different elements as possible in the short time I had. It was a little challenging to create the slider as it is entirely composed of CSS. I still think it turned out really nice. It was a fun project, despite the short time I was able to work on it. You can find the whole project on GitHub.

Here are some Screenshots of the final demo:

I think the slider turned out really nice in the end. To be fair, it’s not really a “slider.” The images are stacked on top of each other and gradually fade out. Adjusting the timing wasn’t easy, but in the end, I am happy with the result. Here is the CSS code, in case you’re curious: 

.slider {
    width: 100%;
    max-width: 100vw;
    min-height: 300px;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    background-color: #df9eb8;
    top: 79px;
    z-index: 2;
    position: relative;
}

.slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffc0cb80; 
    z-index: 1; 
}

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; 
    max-width: 80%;
    max-height: 80%;
}

.slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    animation: fade 24s infinite;
    z-index: -1;
}

.slide img {
    width: 100%;
    height: auto; 
}

.slider .slide:nth-child(1) {
    animation-delay: 0s;
}

.slider .slide:nth-child(2) {
    animation-delay: 6s;
}

.slider .slide:nth-child(3) {
    animation-delay: 12s;
}

.slider .slide:nth-child(4) {
    animation-delay: 18s;
}

@keyframes fade {

    0%, 14.28% {
        opacity: 0;}

    14.28%, 21.42% {
        opacity: 1;
    }

    21.42%, 28.57% {
        opacity: 1;
    }

    28.57%, 35.71% {
        opacity: 0;
    }
}
.origin-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 1em;
    font-family: 'swagger';
    z-index: 2;
}

Although I tried to avoid any kind of javascript, I wanted to add a little Lightbox. Therefore, I reluctantly added a tiny javascript code snippet. If the user clicks on the images in the image gallery, the whole image is visible in the browser. I’m pretty sure that this is nothing special at all.

A small note about the images: the photographs are from the websites Pixabay and Pexels. The card material snipped and the logo were drawn by me in Serif’s Affinity Designer.

Anyway, this was a fun little project. The time constraint forced me to find solutions quickly and efficiently. It’s been a while since I last touched on frontend design, but it’s good to know that I haven’t forgotten all about it just yet.

Check out the project files: