Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@ladyMariele
ladyMariele committed Feb 4, 2024
0 parents commit 61542de
Show file tree
Hide file tree
Showing 5 changed files with 222 additions and 0 deletions.
Binary file added assets/images/background.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/titlecard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/vilein-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 104 additions & 0 deletions assets/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
* {
font-family: "Lexend Deca";
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
color: hsl(258, 9%, 37%);
scroll-behavior: smooth;
}index

body {
background-color: hsl(237, 26%, 16%) !important;
}
body h1 {
color: hsl(342, 57%, 40%);
}

#venrif {
background-image: linear-gradient(hsl(237, 26%, 31%), hsl(237, 26%, 16%));
}
#venrif nav {
background-image: linear-gradient(hsl(0, 0%, 13%), hsl(237, 26%, 31%)) !important;
margin-bottom: 5em;
}
#venrif nav .nav-link:hover {
color: hsl(342, 57%, 40%);
}
#venrif nav .dropdown-item:hover {
color: hsl(0, 0%, 13%) !important;
}
#venrif nav .dropdown-item:active {
background-color: hsl(342, 57%, 40%);
}
#venrif img {
width: 50vmin;
height: auto;
padding: 1em 0 0.5em 0;
margin: 0 3em 0 0;
}
#venrif .trailer-container {
position: relative;
overflow: hidden;
margin: auto;
width: 75%;
padding-top: 56.25%; /* Aspect ratio: 16:9 */
filter: drop-shadow(0px 0px 20px hsla(342, 57%, 40%, 0.199));
}
#venrif .trailer-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70%;
border: 0;
}

#gameplay {
color: hsl(258, 9%, 37%);
background-image: linear-gradient(hsl(237, 26%, 16%), hsl(237, 26%, 16%));
}
#gameplay article {
color: hsla(341, 15%, 33%, 0.993);
}

#the-project {
background-image: linear-gradient(hsl(237, 26%, 16%), hsl(0, 0%, 13%));
padding: 5em 2em 8em 2em !important;
}

#direction {
background-image: linear-gradient(hsl(0, 0%, 13%), hsl(237, 26%, 16%));
padding: 5em 2em 8em 2em !important;
}

#about-us {
background-image: url(/assets/images/background.jpg);
}

#footer {
background-image: linear-gradient(hsl(240, 50%, 1%), hsl(237, 26%, 16%));
}
#footer img {
width: 150px;
}

@media screen and (min-width: 1001px) {
nav {
padding: 0 10em !important;
}
nav .nav-item {
margin: 0 1em;
}
.div-container {
width: 810px;
margin: auto;
}
.div-container p {
font-size: large;
}
article p {
width: 450px;
margin: auto;
}
}/*# sourceMappingURL=style.css.map */
118 changes: 118 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Venrif</title>
<!-- stylesheet -->
<link rel="stylesheet" href="/assets/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- landing page -->
<section id="venrif">
<nav class="navbar navbar-expand-md bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#venrif"><img src="/assets/images/titlecard.png" alt=""></a>
<!-- button for hamburger icon -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#gameplay">Gameplay</a>
</li>
<!-- dropdown menu -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
About
</a>
<ul class="dropdown-menu bg-dark">
<li><a class="dropdown-item text-light" href="#the-project">About The Project</a>
</li>
<li><a class="dropdown-item text-light" href="#about-us">About Us</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#direction"> Our Direction</a></li>
</ul>
</div>
</div>
</nav>
<div class="trailer-container">
<iframe width="933" height="516" src="https://www.youtube.com/embed/ECdIkq3_QAc"" title="Venrif" frameborder="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe>
</div>
</section>

<section id="gameplay" class="px-3">
<div class="div-container">
<h1 class="py-3 px-5">GAMEPLAY</h1>
<p class="py-0 px-5">Summon fantastic creatures, cast destructive spells, and build towering structures... at a flick of a card!
</p>
<p class="py-0 px-5">
Ven'rif is a casual fast paced real-time strategy game where you must construct a deck of cards and fight against other players
</p>
</div>
<div class="row align-items-center p-5">
<article class="col-lg p-4">
<h2>Develop Unique Playstyle</h2>
<p class="py-3">Ven'rif's is designed for players to construct their deck differently from other players, making the player pool more diversified in terms of playstyle. This new found ecosystem will foster a healthier game cycle for players to thrive in indefinitely.</p>
</article>
<article class="col-lg p-4">
<h2 class="px-2">Looking Casual on the Outside, Sophisticated Gameplay on the Inside</h2>
<p class="py-3">A steep learning curve has always been the deal-breaker for most casual players but Ven'rif has made it possible for a sophisticated gameplay to be so easily learned.</p>
</article>
</div>
</section>

<section id="the-project" class="p-5">
<div class="div-container">
<h1 class="p-5">ABOUT THE PROJECT</h1>
<p class="px-3">The Vilein team has a deep love for sophisticated games; and found it ridiculous that the majority of the players, the casuals, could not appreciate such games.
</p>
<p class="px-3">
So instead of continuing the tradition of gatekeeping players from enjoying the wonders of a deeper, more complicated gameplay, we bring the gameplay to them, to all of us, for both hardcore players and casuals alike.
</p>
<p class="px-3">
This is Ven'rif, the first project of Vilein
</p>
</div>
</section>

<section id="direction" class="p-5">
<div class="div-container">
<h1 class="mb-5">OUR DIRECTION</h1>
<p>The contents you see are under development. Vilein has only finalized the gameplay. The graphics/art style, the user interface, the theme, the lore are yet to be established but are already underway.
</p>
<p>
Early Access Release is set for October 2024.
</p>
<p>
Final Release is set for March 2025. <br>
The Grand Tournament is set on June 2025.
</p>
</div>
</section>

<section id="about-us" class="pt-3 pb-5 px-5">
<div class="div-container">
<h1 class="p-5">ABOUT US</h1>
<p class="pb-5">We are nothing but a passionate group of individuals who want to bring to the world a new class of games. Founded by a game designer, a financier, and a development lead; it is our deepest hope to not just entertain; but to bring about a new change in the gaming industry. </p>
</div>
</section>

<section id="footer">
<footer class="p-3">
<img src="assets/images/vilein-logo.png" alt="" class="py-3">
<p >&copy; 2024 Vilein.</p>
</footer>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

0 comments on commit 61542de

Please sign in to comment.