Mid
/
trickthefox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added all the pages and modules

Browse Source
main
Midnight 3 years ago
parent 2554fe20c2
commit d0ff54ee41
13 changed files with 281 additions and 138 deletions
Show Stats Download Patch File Download Diff File

13
components/footer.js
Unescape View File

@ -0,0 +1,13 @@
import styles from '../styles/components/Footer.module.css'
const Header = () => (
<div>
<div className={styles.footer}>
<div className="container">
<h4>Made with love by <a href="https://twitter.com/midblep" className="link">Mid</a></h4>
</div>
</div>
</div>
)
export default Header

26
components/header.js
Unescape View File

@ -0,0 +1,26 @@
import Head from 'next/head'
import styles from '../styles/components/Header.module.css'
const Header = () => (
<div>
<Head>
<link rel="icon" href="/sign.png" />
</Head>
<div className={styles.colorfulbar}></div>
<div className={styles.menu}>
<div className="container">
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
<div className={styles.items}>
<a href="/commissions">Commissions</a>
<a href="/gallery">Gallery</a>
<a href="/contact">Contact</a>
</div>
</div>
</div>
</div>
)
export default Header

32
pages/commissions.js
Unescape View File

@ -0,0 +1,32 @@
import Head from 'next/head'
import styles from '../styles/Commissions.module.css'
import Header from '../components/header';
import Footer from '../components/footer';
export default function Commissions() {
return (
<div className="page">
<Head>
<title>Trick - Commissions</title>
</Head>
<Header />
<div className="container">
<article className="content">
<section>
<div className="card">
<h1>Commissions</h1>
</div>
</section>
</article>
</div>
<Footer />
</div>
)
}

32
pages/contact.js
Unescape View File

@ -0,0 +1,32 @@
import Head from 'next/head'
import styles from '../styles/Contact.module.css'
import Header from '../components/header';
import Footer from '../components/footer';
export default function Contact() {
return (
<div className="page">
<Head>
<title>Trick - Contact</title>
</Head>
<Header />
<div className="container">
<article className="content">
<section>
<div className="card">
<h1>Contact</h1>
</div>
</section>
</article>
</div>
<Footer />
</div>
)
}

32
pages/gallery.js
Unescape View File

@ -0,0 +1,32 @@
import Head from 'next/head'
import styles from '../styles/Gallery.module.css'
import Header from '../components/header';
import Footer from '../components/footer';
export default function Gallery() {
return (
<div className="page">
<Head>
<title>Trick - Gallery</title>
</Head>
<Header />
<div className="container">
<article className="content">
<section>
<div className="card">
<h1>Gallery</h1>
</div>
</section>
</article>
</div>
<Footer />
</div>
)
}

39
pages/index.js
Unescape View File

@ -1,7 +1,7 @@
import Head from 'next/head'
import styles from '../styles/Index.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter } from "@fortawesome/free-solid-svg-icons";
import Header from '../components/header';
import Footer from '../components/footer';
function RandomMotto(props) {
const Mottos = [
@ -16,31 +16,18 @@ function RandomMotto(props) {
export default function Index() {
return (
<div className={styles.page}>
<div className="page">
<Head>
<title>Trick The Fox | Index</title>
<link rel="icon" href="/sign.png" />
<title>Trick - Index</title>
</Head>
<div className={styles.colorfulbar}></div>
<Header />
<div className={styles.menu}>
<div className={styles.container}>
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
<div className={styles.items}>
<a href="/commissions">Commissions</a>
<a href="/gallery">Gallery</a>
<a href="/contact">Contact</a>
</div>
</div>
</div>
<div className={styles.container}>
<article className={styles.content}>
<div className="container">
<article className="content">
<section>
<div className={styles.card}>
<div className="card">
<div className={styles.avatar}>
<img src="/trickwow.png"></img>
<div>
@ -50,7 +37,7 @@ export default function Index() {
</div>
<div>
<h3>About me:</h3>
<h3>About me</h3>
<p>
I'm a gay femboy nurse fox who likes figure skating, running and dancing,
addicted to vr and video making and I'm always listening to music,
@ -62,7 +49,7 @@ export default function Index() {
<section>
<div>
<div className={styles.buttons}>
<div className="buttons">
<a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter icon"></i> Twitter</a>
<a href="https://www.twitch.tv/trick_the_fox" target="_blank"><i className="fab fa-twitch icon"></i> Twitch</a>
<a href="https://trello.com/b/cMyTLWYd" target="_blank"><i className="fab fa-trello icon"></i> Trello</a>
@ -74,11 +61,7 @@ export default function Index() {
</article>
</div>
<div className={styles.footer}>
<div className={styles.container}>
<h4>Made with love by Mid</h4>
</div>
</div>
<Footer />
</div>

3
styles/Commissions.module.css
Unescape View File

@ -0,0 +1,3 @@
.owo {
color: blue;
}

0
styles/Contact.module.css
Unescape View File

0
styles/Gallery.module.css
Unescape View File

112
styles/Index.module.css
Unescape View File

@ -1,72 +1,7 @@
.page {
min-height: 110vh;
background-color: #1B1C22;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.content {
padding: 2em 0;
gap: 2em;
display: flex;
flex-direction: row;
}
.card {
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
gap: 1em;
padding: 2em;
color: white;
background-color: #25262C;
}
.card p {
font-size: 1.1em;
}
.content .buttons {
width: 300px;
display: flex;
flex-direction: column;
gap: 1em;
}
.content .buttons > a {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
border-radius: 10px;
padding: 0.4em 2em;
font-size: 1.3em;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background-color: rgba(79,79,255,1);
color: white;
transition-duration: 0.1s;
font-family: 'Dela Gothic One', cursive;
}
.icon {
font-size: 2em;
}
.content .buttons > a:hover {
transform: scale(0.95);
transition-duration: 0.1s;
}
.avatar {
height: 200px;
display: flex;
gap: 3em;
gap: 2em;
}
.avatar h1 {
@ -86,48 +21,5 @@
.avatar > img:hover {
transition-duration: 0.3s;
transform: scale(1.1) rotate(20deg);
}
.colorfulbar {
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
height: 6px;
}
.menu {
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background: #25262C;
color: white;
padding: 1em 2em;
}
.menu > div {
display: flex;
justify-content: space-between;
}
.menu .items {
display: flex;
gap: 1.5em;
}
.menu a {
display: flex;
align-items: center;
}
.menu .title > img {
height: 3em;
}
.menu .title {
margin: -20px 0;
gap: 5px;
font-size: 0.8em;
}
.footer {
text-align: center;
color: white;
transform: scale(1.1) rotate(-20deg);
}

4
styles/components/Footer.module.css
Unescape View File

@ -0,0 +1,4 @@
.footer {
text-align: center;
color: white;
}

60
styles/components/Header.module.css
Unescape View File

@ -0,0 +1,60 @@
.menu {
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background: #25262C;
color: white;
padding: 1em 2em;
}
.menu > div {
display: flex;
justify-content: space-between;
}
.menu .items {
display: flex;
}
.menu a {
display: flex;
align-items: center;
padding: 0.3em 1.3em;
border-radius: 5px;
transition-duration: 0.2s;
}
.menu .items a:hover {
transition-duration: 0.2s;
background-color: rgba(79,79,255,1);
}
.menu .title > img {
height: 3em;
animation-name: idle-img;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.menu .title {
margin: -20px 0;
gap: 5px;
font-size: 0.8em;
}
@keyframes idle-img {
0% {
margin-top: -10px;
}
50% {
margin-top: 10px;
}
100% {
margin-top: -10px;
}
}
.colorfulbar {
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
height: 8px;
}

66
styles/globals.css
Unescape View File

@ -7,6 +7,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 1.1em;
background-color: #1B1C22;
}
a {
@ -20,4 +21,69 @@ a {
h1, h2, h3 {
font-family: 'Dela Gothic One', cursive;
}
.link:hover {
text-decoration: underline;
}
.page {
min-height: 100vh;
background-color: #1B1C22;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.content {
padding: 2em 0;
gap: 2em;
display: flex;
flex-direction: row;
}
.card {
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
gap: 1em;
padding: 2em;
color: white;
background-color: #25262C;
}
.card p {
font-size: 1.1em;
}
.content .buttons {
width: 300px;
display: flex;
flex-direction: column;
gap: 1em;
}
.content .buttons > a {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
border-radius: 10px;
padding: 0.4em 2em;
font-size: 1.3em;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background-color: rgba(79,79,255,1);
color: white;
transition-duration: 0.1s;
font-family: 'Dela Gothic One', cursive;
}
.content .buttons > a:hover {
transform: scale(0.95);
transition-duration: 0.1s;
}
Write Preview
Loading…
Cancel
Save