Scrap design
This is not a finished design, this just was a concept test for flexboxes
This commit is contained in:
parent
5cc50968c4
commit
58170060a8
|
|
@ -1,2 +0,0 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2018 caskd
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
11
README.md
11
README.md
|
|
@ -1,11 +0,0 @@
|
|||
# RedXen Homepage
|
||||
|
||||
## What is this?
|
||||
|
||||
Well, nothing special...
|
||||
This is just the homepage i use for the community i am running [here](https://redxen.eu)
|
||||
|
||||
## Why do i host it on GitHub?
|
||||
|
||||
If anyone wants to contribute, see my code practices or something similar, then here it is.
|
||||
It is also easier to check on something or manage changes.
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
|
||||
/*Base rules*/
|
||||
|
||||
* {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html, body, .background, .page {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/*Page Specific*/
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #ec3232;
|
||||
box-shadow: 0px 10px 10px 10px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
.links {
|
||||
margin: auto 20px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
margin: 0 5px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #222;
|
||||
transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
|
||||
}
|
||||
|
||||
.notes {
|
||||
opacity: 1;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
|
||||
}
|
||||
|
||||
.sidebar-text {
|
||||
display: inline;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.sidebar-icon, .sidebar-icon svg {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.side-elem {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
border-left: 2px solid #eee;
|
||||
transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
|
||||
}
|
||||
|
||||
.side-elem:hover {
|
||||
width: 194px;
|
||||
border-left: 6px solid #eee;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px 18px;
|
||||
color: #eee;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
/*Collapse Sidebar*/
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
}
|
||||
.links {
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
.branding {
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.sidebar {
|
||||
width: 50px;
|
||||
}
|
||||
.sidebar-text, .notes {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
flex: 0;
|
||||
}
|
||||
.side-elem, .side-elem:hover {
|
||||
width: 50px;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
@import url('https://use.fontawesome.com/releases/v5.1.1/css/all.css')
|
||||
394
css/web.css
394
css/web.css
|
|
@ -1,394 +0,0 @@
|
|||
html {
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/*Fixed Background*/
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../res/bg.jpg);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 300px;
|
||||
|
||||
/*Global Variables*/
|
||||
--desktop-height: calc(20px + 2vw);
|
||||
--mobile-height: calc(10px + 2vw);
|
||||
|
||||
--header-transparency: rgba(0, 0, 0, 0.7);
|
||||
|
||||
--image-size: 30%;
|
||||
--red: #d22;
|
||||
--dark-gray: #111;
|
||||
--gray: #151515;
|
||||
--transparent-gray: #222E;
|
||||
|
||||
--quick-transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
||||
--long-transition: cubic-bezier(0.215, 0.610, 0.355, 1) 1s;
|
||||
}
|
||||
|
||||
/* Desktop header*/
|
||||
.header {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.header-title {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
font-size: calc(var(--desktop-height) / 2);
|
||||
margin: auto 0;
|
||||
}
|
||||
.logo-header {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
.logo-header a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
.logo-header img {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.links-header {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: auto 0;
|
||||
justify-content: space-around;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.links-header a {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
margin: auto 1vw;
|
||||
text-decoration: none;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.header, .links-header, .logo-header, .logo-header img{
|
||||
height: var(--desktop-height);
|
||||
font-size: calc(var(--desktop-height) / 2);
|
||||
}
|
||||
|
||||
/*Hover settings*/
|
||||
.header:hover {
|
||||
background-color: var(--header-transparency);
|
||||
height: calc(var(--desktop-height) * 1.5);
|
||||
}
|
||||
.header:hover > .header-title {
|
||||
font-size: calc(var(--desktop-height) / 1.75);
|
||||
height: calc(var(--desktop-height) * 1.5);
|
||||
}
|
||||
.links-header a:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
/*Sticky header*/
|
||||
.sticky > .logo-header {
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
}
|
||||
.sticky > .links-header {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.sticky {
|
||||
position: fixed;
|
||||
background-color: var(--header-transparency);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Content settings */
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Banner settings */
|
||||
.banner {
|
||||
/*Sizing*/
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: calc(32px + 2vw);
|
||||
transition: var(--long-transition);
|
||||
|
||||
/*Flexbox content*/
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.banner h1 {
|
||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
||||
}
|
||||
.banner img {
|
||||
width: calc(32px + 14vw);
|
||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
||||
transition: var(--long-transition);
|
||||
}
|
||||
|
||||
/* Text field settings */
|
||||
.text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background-color: var(--dark-gray);
|
||||
color: #fff;
|
||||
align-self: center;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
.text h2 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 3vw 0;
|
||||
font-size: calc(32px + 2vw);
|
||||
line-height: 1.4em;
|
||||
background-color: var(--gray);
|
||||
transition: var(--quick-transition);
|
||||
color: var(--red);
|
||||
}
|
||||
.text-field {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
background-color: var(--gray);
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
font-size: calc(16px + 0.5vw);
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
text-align: center;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.row {
|
||||
width: 50%;
|
||||
}
|
||||
.text-field h3 {
|
||||
font-size: calc(16px + 1vw);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Category of descriptions*/
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 90%;
|
||||
margin: 1.5vw auto;
|
||||
overflow: hidden;
|
||||
transition: var(--quick-transition);
|
||||
color: #fff;
|
||||
}
|
||||
.category img {
|
||||
width: 80%;
|
||||
max-width: 900px;
|
||||
padding: 5% 5% 5% 5%;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
/*Left Side settings*/
|
||||
.left {
|
||||
width: var(--image-size);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
.swap .left {
|
||||
order: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*Right side settings*/
|
||||
.right {
|
||||
width: calc(100% - var(--image-size));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5%;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.right h3 {
|
||||
font-size: 3vw;
|
||||
margin: 0;
|
||||
}
|
||||
.right p {
|
||||
font-size: calc(16px + 0.75vw);
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
}
|
||||
.swap .right {
|
||||
order: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*Webpage footer*/
|
||||
.footer {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
font-size: calc(16px + 0.75vw);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
align-content: space-around;
|
||||
padding: 2% 2.5%;
|
||||
background-color: var(--dark-gray);
|
||||
}
|
||||
.footer a {
|
||||
color: var(--red);
|
||||
text-decoration: none;
|
||||
padding: 0 0.5vw;
|
||||
}
|
||||
.footer-r, .footer-r a {
|
||||
font-size: calc(16px + 0.5vw);
|
||||
padding: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*Adaptive content using media queries*/
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
/*Header settings*/
|
||||
.header {
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
background-color: var(--dark-gray);
|
||||
}
|
||||
.header-title {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.links-header a {
|
||||
font-size: calc(16 + 1vw);
|
||||
}
|
||||
.header, .links-header, .links-header a, .logo-header img {
|
||||
height: var(--mobile-height);
|
||||
line-height: var(--mobile-height);
|
||||
}
|
||||
.header:hover {
|
||||
background-color: var(--dark-gray);
|
||||
height: var(--mobile-height);
|
||||
}
|
||||
.header:hover > .links-header a {
|
||||
line-height: var(--mobile-height);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/*Banner settings*/
|
||||
.banner {
|
||||
font-size: 4vw;
|
||||
height: 300px;
|
||||
}
|
||||
.banner img {
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
/*Category settings*/
|
||||
.category {
|
||||
flex-wrap: wrap;
|
||||
margin: 3vh 0;
|
||||
width: 100%;
|
||||
background-color: var(--gray);
|
||||
box-shadow: 0px 10px 10px 5px rgba(0,0,0,1);
|
||||
}
|
||||
.category img {
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*Sides and swapping*/
|
||||
.left, .right {
|
||||
width: 100%;
|
||||
}
|
||||
.swap .left {
|
||||
order: 0;
|
||||
}
|
||||
.left {
|
||||
min-width: 200px;
|
||||
background-color: #5551;
|
||||
}
|
||||
.swap .right {
|
||||
order: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.right {
|
||||
padding: 10px 25px 10px 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.right h3 {
|
||||
font-size: calc(16px + 3vw);
|
||||
}
|
||||
.right p {
|
||||
font-size: calc(16px + 1vw);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Text field settings*/
|
||||
.row {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.text h2 {
|
||||
font-size: calc(16px + 7vw);
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.text-field {
|
||||
font-size: calc(12px + 0.75vw);
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.text-field h3 {
|
||||
font-size: calc(16px + 1.2vw);
|
||||
}
|
||||
|
||||
/*Footer settings*/
|
||||
.footer {
|
||||
width: 90%;
|
||||
padding: 0 5%;
|
||||
font-size: calc(16px + 1.2vw);
|
||||
height: auto;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
.footer a {
|
||||
font-size: calc(16px + 1.2vw);
|
||||
padding: 0 7px 0 7px;
|
||||
}
|
||||
.footer-r, .footer-r a {
|
||||
font-size: calc(16px + 0.5vw);
|
||||
padding: 0;
|
||||
}
|
||||
.footer-r {
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*Scrollbar hide*/
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
196
index.html
196
index.html
|
|
@ -1,109 +1,91 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<!--Styles and meta-->
|
||||
<title>RedXen Community</title>
|
||||
<link rel="stylesheet" href="css/web.css">
|
||||
<meta name="author" content="caskd">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="The homepage of the RedXen Community">
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script src="js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="interface">
|
||||
<div class="content">
|
||||
<div class="banner">
|
||||
<img src="res/logo.png" alt="logo">
|
||||
<h1>RedXen Gaming</h1>
|
||||
</div>
|
||||
<div class="header" id="pgHeader">
|
||||
<span class="logo-header">
|
||||
<div><a href="https://redxen.eu"><img src="res/logo.png" alt="logo"></a></div>
|
||||
<div class="header-title"><a href="https://redxen.eu">RedXen Gaming</a></div>
|
||||
</span>
|
||||
<span class="links-header">
|
||||
<a href="https://forum.redxen.eu">Forum</a>
|
||||
<a href="https://steamcommunity.com/groups/redxengaming">Steam</a>
|
||||
<a href="/discord">Discord</a>
|
||||
<a href="https://sb.redxen.eu">SourceBans</a>
|
||||
<a href="https://yagpdb.redxen.eu">PMBot</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h2>About us</h2>
|
||||
<div id="forum" class="category">
|
||||
<div class="left">
|
||||
<img alt="discourse" src="res/discourse.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>RedXen Forum</h3>
|
||||
<p>Our forum is a easy-to-browse forum that is fast and reliable, it is powered by Discourse and it is one of the best community forums!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="discord" class="swap category">
|
||||
<div class="left">
|
||||
<img alt="discord" src="res/discord.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>Discord Server</h3>
|
||||
<p>Due to the reliability that Discord offers, most of the people join us on our server to communicate about topics they have in common, support is also given pretty quick there.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="yagpdb" class="category">
|
||||
<div class="left">
|
||||
<img alt="yagpdb" src="res/yagpdb.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>PMBot</h3>
|
||||
<p>We also host a slightly customized version of YAGPDB called PMBot that can moderate your servers, you can add him to your server!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sb" class="swap category">
|
||||
<div class="left">
|
||||
<img alt="sourcebans" src="res/sb.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>SourceBans</h3>
|
||||
<p>Got banned? Don't know the reason why, or want to make a complaint? You should be visiting our SourceBans page</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>News</h2>
|
||||
<div id="news" class="text-field">
|
||||
<div class="row">
|
||||
<h3>June 2018</h3>
|
||||
Added SourceBans for easier ban management<br>
|
||||
Now hosting TF2 & CSS servers<br>
|
||||
Forums are stable and ready to use<br>
|
||||
Created this webpage and added meta tags for SEO's<br>
|
||||
Now hosting server on DigitalOcean with improved bandwidth
|
||||
</div>
|
||||
<div class="row">
|
||||
<h3>May 2018</h3>
|
||||
Added reaction roles to the discord server<br>
|
||||
Adapted the homepage to almost all viewports<br>
|
||||
Updated homepage to a better one<br>
|
||||
Discord revamp with new channels, categories and roles
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="row">
|
||||
Made by caskd!<br>
|
||||
<a href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
|
||||
<a href="https://github.com/casKd-dev"><i class="fab fa-github"></i></a>
|
||||
<a href="https://soundcloud.com/caskd"><i class="fab fa-soundcloud"></i></a>
|
||||
</div>
|
||||
<div class="footer-r row">
|
||||
This website was made with tons of love, trial and time. If you appreciate what i have done or want to give me feedback or such, <a href="mailto:caskd@gmx.de">contact</a> me here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<meta name="author" content="caskd">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="The homepage of the RedXen Community">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background">
|
||||
</div>
|
||||
<div class="page column">
|
||||
<div class="header row">
|
||||
<div class="branding center">
|
||||
<h1>Branding</h1>
|
||||
</div>
|
||||
<div class="flex-spacer"></div>
|
||||
<div class="links">
|
||||
<a href="#">Link1</a>
|
||||
<a href="#">Link2</a>
|
||||
<a href="#">Link3</a>
|
||||
<a href="#">Link4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation row">
|
||||
<div class="sidebar column scroll">
|
||||
<a class="side-elem row" href="#">
|
||||
<div class="sidebar-icon">
|
||||
<svg><use xlink:href="#about"></use></svg>
|
||||
</div>
|
||||
<div class="sidebar-text">About</div>
|
||||
</a>
|
||||
<a class="side-elem row" href="#">
|
||||
<div class="sidebar-icon">
|
||||
<svg><use xlink:href="#discord"></use></svg>
|
||||
</div>
|
||||
<div class="sidebar-text">Discord</div>
|
||||
</a>
|
||||
<div class="flex-spacer"></div>
|
||||
<div class="notes">
|
||||
<b>Did you know...</b>
|
||||
<p>That this is a test paragraph?</p>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
<div class="content scroll">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
|
||||
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
|
||||
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
|
||||
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
|
||||
porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
|
||||
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
|
||||
Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
|
||||
sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
|
||||
id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
|
||||
ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
|
||||
sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
|
||||
Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan
|
||||
lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus
|
||||
et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu
|
||||
tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan
|
||||
a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
|
||||
metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla
|
||||
eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus
|
||||
nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus
|
||||
non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
|
||||
Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
|
||||
Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
|
||||
Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
|
||||
consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla
|
||||
pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat,
|
||||
nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit
|
||||
non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec
|
||||
pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
|
||||
Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque
|
||||
ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna,
|
||||
posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor
|
||||
neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque
|
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium
|
||||
feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus
|
||||
ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a"
|
||||
crossorigin="anonymous"></script>
|
||||
<i data-fa-symbol="discord" class="fab fa-discord"></i>
|
||||
<i data-fa-symbol="about" class="fas fa-sitemap"></i>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
11
js/main.js
11
js/main.js
|
|
@ -1,11 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
$(document).scroll(function() {
|
||||
/* On scroll check if scrolled beyond 100% */
|
||||
var header = document.getElementById("pgHeader");
|
||||
if (window.pageYOffset >= $(window).height()) {
|
||||
header.classList.add("sticky");
|
||||
} else {
|
||||
header.classList.remove("sticky");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<head>
|
||||
<link rel="stylesheet" href="css/banner.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="banner">
|
||||
<div class="banner-title">
|
||||
<img src="https://redxen.eu/res/logo.png" alt="logo">
|
||||
<h1>RedXen Gaming</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
/*Page Style*/
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/*Fixed Background*/
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://redxen.eu/res/bg.jpg);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 300px;
|
||||
|
||||
/*Global Variables*/
|
||||
--red: #d22;
|
||||
--dark-gray: #111;
|
||||
--gray: #151515;
|
||||
--transparent-gray: #222E;
|
||||
|
||||
--quick-transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
||||
--long-transition: cubic-bezier(0.215, 0.610, 0.355, 1) 1s;
|
||||
}
|
||||
|
||||
/* Content settings */
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Banner settings */
|
||||
.banner {
|
||||
/*Sizing*/
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: calc(32px + 0.5vw);
|
||||
transition: var(--long-transition);
|
||||
|
||||
/*Flexbox content*/
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.banner h1 {
|
||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
||||
}
|
||||
.banner img {
|
||||
width: calc(32px + 10vw);
|
||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
||||
transition: var(--long-transition);
|
||||
}
|
||||
.banner-title {
|
||||
align-self: center;
|
||||
/*Flexbox content*/
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Text field settings */
|
||||
.text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background-color: var(--dark-gray);
|
||||
color: #fff;
|
||||
align-self: center;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
.text h2 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 3vw 0;
|
||||
font-size: calc(32px + 2vw);
|
||||
line-height: 1.4em;
|
||||
background-color: var(--gray);
|
||||
transition: var(--quick-transition);
|
||||
color: var(--red);
|
||||
}
|
||||
.text-field {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
background-color: var(--gray);
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
font-size: calc(16px + 0.5vw);
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
text-align: center;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.row {
|
||||
width: 50%;
|
||||
}
|
||||
.text-field h3 {
|
||||
font-size: calc(16px + 1vw);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Category of descriptions*/
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 90%;
|
||||
margin: 1.5vw auto;
|
||||
overflow: hidden;
|
||||
transition: var(--quick-transition);
|
||||
color: #fff;
|
||||
}
|
||||
.category img {
|
||||
width: 80%;
|
||||
max-width: 900px;
|
||||
padding: 5% 5% 5% 5%;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
/*Left Side settings*/
|
||||
.left {
|
||||
width: var(--image-size);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
.swap .left {
|
||||
order: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*Right side settings*/
|
||||
.right {
|
||||
width: calc(100% - var(--image-size));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5%;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.right h3 {
|
||||
font-size: 3vw;
|
||||
margin: 0;
|
||||
}
|
||||
.right p {
|
||||
font-size: calc(16px + 0.75vw);
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
}
|
||||
.swap .right {
|
||||
order: 0;
|
||||
text-align: right;
|
||||
}
|
||||
BIN
res/discord.png
BIN
res/discord.png
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
res/logo.png
BIN
res/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
BIN
res/sb.png
BIN
res/sb.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
res/yagpdb.png
BIN
res/yagpdb.png
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
User-agent: *
|
||||
Allow: /*.html$
|
||||
Loading…
Reference in New Issue