mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-09-07 16:36:55 -05:00
refactor css and placed html in template file.
This commit is contained in:
mrjvs
177
assets/css/pretendo-common.css
Normal file
177
assets/css/pretendo-common.css
Normal file
@@ -0,0 +1,177 @@
|
||||
/*******************************************************/
|
||||
/* copyrighted by pretendo. */
|
||||
/* website design by jipfr, mrjvs and benthehuman */
|
||||
/*******************************************************/
|
||||
|
||||
/* fonts */
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
|
||||
|
||||
/* setup */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
background: #eeeeef;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* common header */
|
||||
nav.navWrapper {
|
||||
background: #673db6;
|
||||
color: white;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
nav.navWrapper .navItem {
|
||||
flex: 0;
|
||||
padding: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
nav.navWrapper .navItem.brand {
|
||||
font-weight: 600;
|
||||
background: #5231a7;
|
||||
padding: 20px 40px;
|
||||
color: white;
|
||||
}
|
||||
nav.navWrapper .navSpread {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* content wrapper */
|
||||
.contentWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
nav.navWrapper ~ .contentWrapper:nth-child(2) {
|
||||
margin-top: 3.7rem;
|
||||
}
|
||||
.contentWrapper .bgExtrude {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #673db6;
|
||||
height: 10rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.contentWrapper.bgLines::before, .contentWrapper.bgLines::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 100vh 0 0 200vw;
|
||||
border-color: transparent transparent transparent #673db6;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.contentWrapper.bgLines::after {
|
||||
border-width: 0 0 100vh 200vw;
|
||||
border-color: transparent transparent #9575CD transparent;
|
||||
right: 0;
|
||||
left: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
.contentWrapper > * {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
footer {
|
||||
background: #673db6;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
footer .content {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07);
|
||||
color: #707070;
|
||||
}
|
||||
footer .content span {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* big card */
|
||||
section.bigCardWrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
section.bigCardWrapper .bigCard {
|
||||
max-width: 80vw;
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07);
|
||||
padding: 5vw 12vw;
|
||||
box-sizing: border-box;
|
||||
color: #707070;
|
||||
}
|
||||
section.bigCardWrapper .bigCard.lessPadding {
|
||||
padding: 5vw;
|
||||
}
|
||||
section.bigCardWrapper .bigCard.bigCardPartWrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* text styles */
|
||||
.txt-highlight {
|
||||
color: #673db6;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.txt-title {
|
||||
color: #191919;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.txt-smallHeading {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
/* components - buttons */
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
font-family: 'Roboto';
|
||||
font-size: 1em;
|
||||
}
|
||||
button.btn {
|
||||
background: #673db6;
|
||||
color: white;
|
||||
padding: 12px 80px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.17);
|
||||
}
|
||||
button.btn-alt {
|
||||
background: white;
|
||||
padding: 10px 45px;
|
||||
color: #673db6;
|
||||
border: 1px solid #673db6;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
/* helper classes */
|
||||
.cont-flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-item {
|
||||
flex: 1;
|
||||
}
|
||||
80
assets/css/pretendo-home.css
Normal file
80
assets/css/pretendo-home.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* home header */
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: #673db6;
|
||||
padding: 5rem;
|
||||
}
|
||||
header hr {
|
||||
width: 175px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 3.5em;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.25em;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
header h3 {
|
||||
font-weight: normal;
|
||||
max-width: 80%;
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* profiles */
|
||||
.cardProfiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.profile {
|
||||
min-width: 250px;
|
||||
width: 50%;
|
||||
max-width: 550px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
}
|
||||
.profile .profileIcon {
|
||||
margin-right: 10px;
|
||||
width: 80px; height: 80px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profileText {
|
||||
width: calc(100% - 130px);
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.profileText h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.profileText p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* news cards */
|
||||
.smallCard {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
height: 350px;
|
||||
padding: 20px;
|
||||
border: 1px solid #9474cc; border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
|
||||
position: relative;
|
||||
margin-left: 3em;
|
||||
}
|
||||
.smallCard h3 {
|
||||
font-size: 1.5em !important;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1,238 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
display: flex; flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 300px;
|
||||
background: #673db6; #eeeeef
|
||||
}
|
||||
|
||||
|
||||
.test0 {
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
background: #673db6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header0 {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.header0 a {
|
||||
padding: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
.header0 a.project {
|
||||
font-weight: 600;
|
||||
background: #5231a7;
|
||||
padding: 20px 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header1 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.header1div {
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
}
|
||||
.header1div .regular {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mainDiv {
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 5vw 12vw;
|
||||
background: white;
|
||||
box-shadow: 0px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.specialCard {
|
||||
padding: 5vw 5vw;
|
||||
}
|
||||
|
||||
.cardProfiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.profile {
|
||||
min-width: 250px;
|
||||
width: 50%;
|
||||
max-width: 550px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile .profileIcon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.profile .profileIcon img {
|
||||
width: 80px; height: 80px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profileText {
|
||||
width: calc(100% - 130px);
|
||||
min-width: 200px;
|
||||
}
|
||||
.profileText p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 175px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hugeText {
|
||||
font-size: 3.5em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25em;
|
||||
margin: 0; margin-bottom: 10px;
|
||||
}
|
||||
.highlight {
|
||||
color: #673db6;
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.smallheading {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.text {
|
||||
font-size: 1em;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.heading1 {
|
||||
color: #191919;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.secondary {
|
||||
font-weight: 100;
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0; padding: 0;
|
||||
border: 0; border-radius: 0;
|
||||
font-family: Roboto;
|
||||
font-size: 1em;
|
||||
}
|
||||
.button1 {
|
||||
background: #673db6;
|
||||
color: white;
|
||||
padding: 12px 80px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.17);
|
||||
}
|
||||
.button2 {
|
||||
background: white;
|
||||
padding: 10px 45px;
|
||||
color: #673db6;
|
||||
border: 1px solid #673db6;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
.card20 {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
min-width: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card21 {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
}
|
||||
.smallCardBit {
|
||||
width: calc(95% - 400px);
|
||||
min-width: 300px;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.smallCard {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
body {
|
||||
background: yellow;
|
||||
}
|
||||
}
|
||||
.smallCard {
|
||||
width: 100%;
|
||||
max-width: 250px; height: 350px;
|
||||
padding: 20px;
|
||||
border: 1px solid #9474cc; border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
|
||||
position: relative;
|
||||
}
|
||||
.smallCard h3 {
|
||||
font-size: 1.5em !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.bodyDiv {
|
||||
width: 90%;
|
||||
max-width: 1500px;
|
||||
}
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
.centerX {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.centerY {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.regular {
|
||||
font-weight: 300;
|
||||
}
|
||||
.fw {
|
||||
width: 100%;
|
||||
}
|
||||
.noMargin {
|
||||
margin: 0;
|
||||
}
|
||||
.spread {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.centerText {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
||||
</head>
|
||||
<body>
|
||||
<div class="headerWrapper fw">
|
||||
<div class="header0 centerX">
|
||||
<div class="fw spread">
|
||||
<div class="header0left header0part">
|
||||
<a class="project" href="#">PRETENDO</a>
|
||||
<a href="#">News</a>
|
||||
<a href="#">Progress</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
<div class="header0right">
|
||||
:)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="header1 centerX centerY wrap">
|
||||
<div class="header1div centerX wrap top">
|
||||
<h1 class="hugeText uppercase regular">Pretendo</h1>
|
||||
<div class="dividerWrapper fw centerX"><div class="divider"></div></div>
|
||||
|
||||
<h3 class="regular centerText">A work-in-progress Nintendo Service replacement for Wii U and 3DS. Fully open source.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header2 fw"></div>
|
||||
</div>
|
||||
|
||||
<div class="bodyDiv mainDiv">
|
||||
<div class="card bigCard">
|
||||
<h1 class="bold highlight">Wait a second</h1>
|
||||
<h1 class="bold heading1">What exactly is this?</h1>
|
||||
<h3 class="secondary bold smallheading">Yeah, I'm not actually going to remake all the cubes and stuff.</h3>
|
||||
<p class="text">
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card bigCard">
|
||||
<h1 class="bold highlight">Who is responsible?</h1>
|
||||
<h1 class="bold heading1">Who made this?</h1>
|
||||
<div class="cardProfiles">
|
||||
<div class="profile wrap">
|
||||
<div class="profileIcon">
|
||||
<img src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
</div>
|
||||
<div class="profileText centerY wrap">
|
||||
<div>
|
||||
<h2 class="noMargin fw smallheading">RedDucks</h2>
|
||||
<p class="text noMargin">Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bigCard specialCard spread wrap">
|
||||
<div class="card20">
|
||||
<h1 class="bold highlight">Be notified</h1>
|
||||
<h1 class="bold heading1">Stay updated</h1>
|
||||
<p class="text">
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
<div class="buttonDiv centerX"><button class="button1">Learn more!</button></div>
|
||||
</div>
|
||||
<div class="card21 smallCardBit centerY spread wrap">
|
||||
<div class="smallCard">
|
||||
<h3 class="secondary bold smallheading">Super cool</h3>
|
||||
<p class="text">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
|
||||
<button class="button2">Read more</button>
|
||||
</div>
|
||||
<div class="smallCard">
|
||||
<h3 class="secondary bold smallheading">Super cool</h3>
|
||||
<p class="text">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
|
||||
<button class="button2">Read more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="test0">
|
||||
<h1 class="bold highlight">Wait a second</h1>
|
||||
<h1 class="bold heading1">What exactly is this?</h1>
|
||||
<h3 class="secondary bold smallheading">Yeah, I'm not actually going to remake all the cubes and stuff.</h3>
|
||||
<p class="text">
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
</p>
|
||||
<div class="buttonDiv centerX"><button class="button1">Learn more!</button></div>
|
||||
</div>
|
||||
<div class="test2">
|
||||
<div class="profile wrap">
|
||||
<div class="profileIcon">
|
||||
<img src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
</div>
|
||||
<div class="profileText centerY wrap">
|
||||
<div>
|
||||
<h2 class="noMargin fw smallheading">RedDucks</h2>
|
||||
<p class="text noMargin">Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<script>
|
||||
let x = document.querySelector(".cardProfiles");
|
||||
let y = x.innerHTML;
|
||||
for(let i = 5; i > 0; i--) {
|
||||
x.innerHTML += y;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -14,5 +14,10 @@ router.get('/', (req, res) => {
|
||||
res.render('home');
|
||||
});
|
||||
|
||||
router.get('/newhome', (req, res) => {
|
||||
res.render('newhome');
|
||||
});
|
||||
|
||||
|
||||
// export the router
|
||||
module.exports = router;
|
||||
|
||||
126
views/newhome.hbs
Normal file
126
views/newhome.hbs
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- meta tags -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Pretendo</title>
|
||||
<!-- css files -->
|
||||
<link rel="stylesheet" href="/assets/css/pretendo-common.css">
|
||||
<link rel="stylesheet" href="/assets/css/pretendo-home.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navWrapper">
|
||||
<a class="navItem brand" href="#">PRETENDO</a>
|
||||
<a class="navItem" href="#">News</a>
|
||||
<a class="navItem" href="#">Progress</a>
|
||||
<a class="navItem" href="#">Contact</a>
|
||||
<div class="navSpread"></div>
|
||||
<a class="navItem" href="#">smth</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="contentWrapper">
|
||||
<header>
|
||||
<h1>Pretendo</h1>
|
||||
<hr>
|
||||
<h3>A work-in-progress Nintendo Service replacement for Wii U and 3DS. Fully open source.</h3>
|
||||
</header>
|
||||
</div>
|
||||
<div class="contentWrapper bgLines">
|
||||
<div class="bgExtrude"></div>
|
||||
<section class="bigCardWrapper">
|
||||
<div class="bigCard">
|
||||
<p class="txt-highlight">Wait a second</p>
|
||||
<h1 class="txt-title">What exactly is this?</h1>
|
||||
<h2 class="txt-smallHeading">Yeah, I'm not actually going to remake all the cubes and stuff.</h2>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bigCardWrapper">
|
||||
<div class="bigCard">
|
||||
<p class="txt-highlight">who is responsible?</p>
|
||||
<h1 class="txt-title">who made this?</h1>
|
||||
<div class="cardProfiles">
|
||||
<!-- profile -->
|
||||
<div class="profile">
|
||||
<img class="profileIcon" src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
<div class="profileText">
|
||||
<h2 class="txt-smallHeading">RedDucks</h2>
|
||||
<p>Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
</div><!--
|
||||
--><div class="profile">
|
||||
<img class="profileIcon" src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
<div class="profileText">
|
||||
<h2 class="txt-smallHeading">RedDucks</h2>
|
||||
<p>Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
</div><!--
|
||||
--><div class="profile">
|
||||
<img class="profileIcon" src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
<div class="profileText">
|
||||
<h2 class="txt-smallHeading">RedDucks</h2>
|
||||
<p>Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
</div><!--
|
||||
--><div class="profile">
|
||||
<img class="profileIcon" src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
<div class="profileText">
|
||||
<h2 class="txt-smallHeading">RedDucks</h2>
|
||||
<p>Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
</div><!--
|
||||
--><div class="profile">
|
||||
<img class="profileIcon" src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
<div class="profileText">
|
||||
<h2 class="txt-smallHeading">RedDucks</h2>
|
||||
<p>Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
</div><!--
|
||||
--><div class="profile">
|
||||
<img class="profileIcon" src="https://cdn.discordapp.com/avatars/117261997619412996/c0e34de348b8d45e7a16c0260173bc8c.webp?size=256">
|
||||
<div class="profileText">
|
||||
<h2 class="txt-smallHeading">RedDucks</h2>
|
||||
<p>Project owner, lead developer, very violent young man. Splatoon obsessed as well.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bigCardWrapper">
|
||||
<div class="bigCard lessPadding cont-flex">
|
||||
<div class="flex-item">
|
||||
<p class="txt-highlight">Be notified</p>
|
||||
<h1 class="txt-title">Stay updated</h1>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
<button class="btn">Learn more!</button>
|
||||
</div>
|
||||
<div class="cont-flex">
|
||||
<div class="smallCard">
|
||||
<h3 class="txt-smallHeading">Super cool</h3>
|
||||
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
|
||||
<button class="btn-alt">Read more</button>
|
||||
</div>
|
||||
<div class="smallCard">
|
||||
<h3 class="txt-smallHeading">Super cool</h3>
|
||||
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
|
||||
<button class="btn-alt">Read more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="content">
|
||||
<p>copyright <span>2018</span> PretendoNetwork — Website designed by mrjvs, jipfr and benthehuman</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user