update website to be almost complete

This commit is contained in:
2023-10-07 15:04:39 +02:00
parent 97c68d9b17
commit e767c1fb3d
6 changed files with 254 additions and 0 deletions

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="/templates/modern/style.css">
<link rel="stylesheet" href="/templates/main.css">
<script defer src="/templates/helper.js"></script>
<title>{{ pageName }} :: Home</title>
</head>
<body>
<nav>
<a href="/templates">Back to templates</a> |
<a class="home">Home</a> |
<a>Tickets</a> |
<a>Cart</a> |
<a>Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav>
<div class="content">
<div class="title">
<img src="/assets/logo.png" alt="libreevent logo" class="logo">
<div class="title-text">
<h1>YOUR PAGE TITLE GOES HERE</h1>
<footer>You may add a subtitle as well and you may customize the background as well</footer>
</div>
</div>
<p>Here you can add a description, however long you might want it to be.</p>
<a class="button">Buy tickets</a>
</div>
</body>
</html>

55
website/dist/templates/modern/style.css vendored Normal file
View File

@@ -0,0 +1,55 @@
/*
* libreevent - style.css
*
* Created by Janis Hutz 08/29/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
.title {
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.1 );
background-size: cover;
background-image: url( /assets/htmlCSSJS.png );
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
padding: 0;
margin: 0;
}
.title-text {
background-color: var( --overlay-color );
color: var( --secondary-color );
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2%;
margin-top: 1%;
}
.button {
transition: all 1s;
padding: 1%;
border-radius: 50px;
background-color: var( --accent-background );
cursor: pointer;
color: var( --secondary-color );
margin-bottom: 5%;
text-decoration: none;
}
.button:hover {
background-color: var( --accent-background-hover );
border-radius: 10px;
}
.logo {
height: 40%;
}