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 Head from 'next/head'
import styles from '../styles/Index.module.css' import styles from '../styles/Index.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import Header from '../components/header';
import { faTwitter } from "@fortawesome/free-solid-svg-icons"; import Footer from '../components/footer';
function RandomMotto(props) { function RandomMotto(props) {
const Mottos = [ const Mottos = [
@ -16,31 +16,18 @@ function RandomMotto(props) {
export default function Index() { export default function Index() {
return ( return (
<div className={styles.page}> <div className="page">
<Head> <Head>
<title>Trick The Fox | Index</title> <title>Trick - Index</title>
<link rel="icon" href="/sign.png" />
</Head> </Head>
<div className={styles.colorfulbar}></div> <Header />
<div className={styles.menu}> <div className="container">
<div className={styles.container}> <article className="content">
<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}>
<section> <section>
<div className={styles.card}> <div className="card">
<div className={styles.avatar}> <div className={styles.avatar}>
<img src="/trickwow.png"></img> <img src="/trickwow.png"></img>
<div> <div>
@ -50,7 +37,7 @@ export default function Index() {
</div> </div>
<div> <div>
<h3>About me:</h3> <h3>About me</h3>
<p> <p>
I'm a gay femboy nurse fox who likes figure skating, running and dancing, 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, addicted to vr and video making and I'm always listening to music,
@ -62,7 +49,7 @@ export default function Index() {
<section> <section>
<div> <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://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://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> <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> </article>
</div> </div>
<div className={styles.footer}> <Footer />
<div className={styles.container}>
<h4>Made with love by Mid</h4>
</div>
</div>
</div> </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 { .avatar {
height: 200px; height: 200px;
display: flex; display: flex;
gap: 3em; gap: 2em;
} }
.avatar h1 { .avatar h1 {
@ -86,48 +21,5 @@
.avatar > img:hover { .avatar > img:hover {
transition-duration: 0.3s; transition-duration: 0.3s;
transform: scale(1.1) rotate(20deg); 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;
} }

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, font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 1.1em; font-size: 1.1em;
background-color: #1B1C22;
} }
a { a {
@ -20,4 +21,69 @@ a {
h1, h2, h3 { h1, h2, h3 {
font-family: 'Dela Gothic One', cursive; 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