parent
13e8011664
commit
2554fe20c2
@ -1,65 +0,0 @@
|
|||||||
import Head from 'next/head'
|
|
||||||
import styles from '../styles/Home.module.css'
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<Head>
|
|
||||||
<title>Create Next App</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main className={styles.main}>
|
|
||||||
<h1 className={styles.title}>
|
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className={styles.description}>
|
|
||||||
Get started by editing{' '}
|
|
||||||
<code className={styles.code}>pages/index.js</code>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className={styles.grid}>
|
|
||||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
|
||||||
<h3>Documentation →</h3>
|
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
|
||||||
<h3>Learn →</h3>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/vercel/next.js/tree/master/examples"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h3>Examples →</h3>
|
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h3>Deploy →</h3>
|
|
||||||
<p>
|
|
||||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer className={styles.footer}>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Powered by{' '}
|
|
||||||
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,71 +1,86 @@
|
|||||||
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 { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faTwitter } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
function RandomMotto(props) {
|
function RandomMotto(props) {
|
||||||
const Mottos = [
|
const Mottos = [
|
||||||
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present.",
|
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
|
||||||
"Just have fun!",
|
"Just have fun!",
|
||||||
"Live and let go.",
|
"Live and let go",
|
||||||
"Keep calm and carry on."
|
"Keep calm and carry on"
|
||||||
];
|
];
|
||||||
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
||||||
return <p>{Mottos[randomNumber]}</p>;
|
return <span>{Mottos[randomNumber]}</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Home() {
|
export default function Index() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Trick's Website</title>
|
<title>Trick The Fox | Index</title>
|
||||||
<link rel="icon" href="/trick.jpg" />
|
<link rel="icon" href="/sign.png" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<section className={styles.container}>
|
<div className={styles.colorfulbar}></div>
|
||||||
<div className={styles.main}>
|
|
||||||
<article className={styles.content}>
|
<div className={styles.menu}>
|
||||||
<section className={styles.header}>
|
<div className={styles.container}>
|
||||||
<div className={styles.avatar_bar}>
|
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
|
||||||
<img src="trick.jpg" className={styles.avatar}></img>
|
|
||||||
<h1>Trick The Fox</h1>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<h2><RandomMotto /></h2>
|
<div className={styles.items}>
|
||||||
|
<a href="/commissions">Commissions</a>
|
||||||
|
<a href="/gallery">Gallery</a>
|
||||||
|
<a href="/contact">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>
|
<div className={styles.container}>
|
||||||
I'm a gay femboy nurse fox who likes figure skating, running and dancing,
|
<article className={styles.content}>
|
||||||
addicted to vr and video making and I'm always listening to music,
|
|
||||||
oh and I play dnd... And that's just about me in a nutshell.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<aside className={styles.content}>
|
<section>
|
||||||
<div className={styles.links}>
|
<div className={styles.card}>
|
||||||
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon ico={faTwitter} /> Twitter</a>
|
<div className={styles.avatar}>
|
||||||
<a href="https://www.twitch.tv/trick_the_fox" target="_blank">Twitch</a>
|
<img src="/trickwow.png"></img>
|
||||||
<a href="https://docs.google.com/document/d/1cwacGjMxjppSblnxEp5RSCBOlPQDICWisST6R0mMVJQ/edit?usp=sharing" target="_blank">Commissions</a>
|
<div>
|
||||||
<a href="https://trello.com/b/cMyTLWYd" target="_blank">Trello</a>
|
<h1>Hi, I'm Trick!</h1>
|
||||||
<a href="https://ko-fi.com/trick_the_fox" target="_blank">Ko-fi</a>
|
<h4>"<RandomMotto />"</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<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,
|
||||||
|
oh and I play dnd... And that's just about me in a nutshell.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div>
|
||||||
|
<div className={styles.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>
|
||||||
|
<a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins icon"></i> Ko-fi</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footer}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h4>Made with love by Mid</h4>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section className={styles.container}>
|
|
||||||
<section className={styles.content}>
|
|
||||||
<h2>Gallery</h2>
|
|
||||||
|
|
||||||
<div className={styles.gallery}>
|
|
||||||
<img src="trick_be_sitting_shadow.png"></img>
|
|
||||||
<img src="Unnamed.png"></img>
|
|
||||||
<img src="wow.png"></img>
|
|
||||||
<img src="triiiiick.png"></img>
|
|
||||||
<img src="tricky_boy.png"></img>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,71 @@
|
|||||||
|
import Head from 'next/head'
|
||||||
|
import styles from '../styles/Index.module.css'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faSearch } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
function RandomMotto(props) {
|
||||||
|
const Mottos = [
|
||||||
|
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present.",
|
||||||
|
"Just have fun!",
|
||||||
|
"Live and let go.",
|
||||||
|
"Keep calm and carry on."
|
||||||
|
];
|
||||||
|
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
||||||
|
return <p>{Mottos[randomNumber]}</p>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
return (
|
||||||
|
<div className={styles.page}>
|
||||||
|
<Head>
|
||||||
|
<title>Trick's Website</title>
|
||||||
|
<link rel="icon" href="/trick.jpg" />
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<section className={styles.container}>
|
||||||
|
<div className={styles.main}>
|
||||||
|
<article className={styles.content}>
|
||||||
|
<section className={styles.header}>
|
||||||
|
<div className={styles.avatar_bar}>
|
||||||
|
<img src="trick.jpg" className={styles.avatar}></img>
|
||||||
|
<h1>Trick The Fox</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h2><RandomMotto /></h2>
|
||||||
|
|
||||||
|
<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,
|
||||||
|
oh and I play dnd... And that's just about me in a nutshell.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside className={styles.content}>
|
||||||
|
<div className={styles.links}>
|
||||||
|
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon ico={faSearch} /> Twitter</a>
|
||||||
|
<a href="https://www.twitch.tv/trick_the_fox" target="_blank">Twitch</a>
|
||||||
|
<a href="https://docs.google.com/document/d/1cwacGjMxjppSblnxEp5RSCBOlPQDICWisST6R0mMVJQ/edit?usp=sharing" target="_blank">Commissions</a>
|
||||||
|
<a href="https://trello.com/b/cMyTLWYd" target="_blank">Trello</a>
|
||||||
|
<a href="https://ko-fi.com/trick_the_fox" target="_blank">Ko-fi</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className={styles.container}>
|
||||||
|
<section className={styles.content}>
|
||||||
|
<h2>Gallery</h2>
|
||||||
|
|
||||||
|
<div className={styles.gallery}>
|
||||||
|
<img src="trick_be_sitting_shadow.png"></img>
|
||||||
|
<img src="Unnamed.png"></img>
|
||||||
|
<img src="wow.png"></img>
|
||||||
|
<img src="triiiiick.png"></img>
|
||||||
|
<img src="tricky_boy.png"></img>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 602 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 765 KiB |
|
After Width: | Height: | Size: 631 KiB |
@ -1,122 +0,0 @@
|
|||||||
.container {
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
padding: 5rem 0;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer img {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a {
|
|
||||||
color: #0070f3;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a:hover,
|
|
||||||
.title a:focus,
|
|
||||||
.title a:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.15;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title,
|
|
||||||
.description {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0.75rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 800px;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 1rem;
|
|
||||||
flex-basis: 45%;
|
|
||||||
padding: 1.5rem;
|
|
||||||
text-align: left;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: color 0.15s ease, border-color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover,
|
|
||||||
.card:focus,
|
|
||||||
.card:active {
|
|
||||||
color: #0070f3;
|
|
||||||
border-color: #0070f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h3 {
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.grid {
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,124 +1,133 @@
|
|||||||
.page {
|
.page {
|
||||||
background: rgb(255,85,200);
|
min-height: 110vh;
|
||||||
background: radial-gradient(to bottom left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
background-color: #1B1C22;
|
||||||
min-height: 100vh;
|
display: flex;
|
||||||
padding: 50px 0 200px 0;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.content {
|
||||||
|
padding: 2em 0;
|
||||||
|
gap: 2em;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
flex-direction: row;
|
||||||
margin: 100px 0 20px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.card {
|
||||||
flex-grow: 1;
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
|
||||||
padding: 50px;
|
|
||||||
border-radius: 10px;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content h2 {
|
.card p {
|
||||||
margin: unset;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.content .buttons {
|
||||||
|
width: 300px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 3em;
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.content .buttons > a {
|
||||||
margin: -20px 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links > a {
|
.icon {
|
||||||
padding: 10px;
|
font-size: 2em;
|
||||||
color: #1F50DD;
|
|
||||||
width: 10em;
|
|
||||||
font-size: 1.2em;
|
|
||||||
border-bottom: 4px solid #1F50DD;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.links > a:hover {
|
.content .buttons > a:hover {
|
||||||
transition-duration: 0.2s;
|
transform: scale(0.95);
|
||||||
border-bottom: 4px solid rgba(0,0,0,0);
|
transition-duration: 0.1s;
|
||||||
transform: scale(0.97);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar_bar {
|
.avatar {
|
||||||
margin: -40px 0 0 0;
|
height: 200px;
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar_bar h1 {
|
.avatar h1 {
|
||||||
font-size: 3em;
|
font-size: 2em;
|
||||||
margin: unset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar h4 {
|
||||||
margin: -110px 0 0 0;
|
font-weight: normal;
|
||||||
border: 6px solid white;
|
}
|
||||||
|
|
||||||
|
.avatar > img {
|
||||||
|
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
height: 200px;
|
max-height: 100%;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar:hover {
|
.avatar > img:hover {
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
transform: scale(1.1) rotate(20deg);
|
transform: scale(1.1) rotate(20deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery {
|
.colorfulbar {
|
||||||
padding: 20px 0;
|
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
|
||||||
display: flex;
|
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||||||
gap: 2em;
|
height: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery > img {
|
.menu {
|
||||||
width: 100%;
|
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||||
height: auto;
|
background: #25262C;
|
||||||
|
color: white;
|
||||||
|
padding: 1em 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery > img:hover {
|
.menu > div {
|
||||||
transform: scale(2);
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:768px) {
|
.menu .items {
|
||||||
.avatar_bar {
|
display: flex;
|
||||||
justify-content: center;
|
gap: 1.5em;
|
||||||
text-align: center;
|
}
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar_bar h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
.menu a {
|
||||||
width: 40vw;
|
display: flex;
|
||||||
height: auto;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.menu .title > img {
|
||||||
width: 100%;
|
height: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.menu .title {
|
||||||
margin: 0 10px;
|
margin: -20px 0;
|
||||||
}
|
gap: 5px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
.main {
|
.footer {
|
||||||
flex-direction: column;
|
text-align: center;
|
||||||
}
|
color: white;
|
||||||
}
|
}
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
.page {
|
||||||
|
background: rgb(255,85,200);
|
||||||
|
background: radial-gradient(to bottom left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 50px 0 200px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
margin: 100px 0 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
||||||
|
padding: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
gap: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
margin: -20px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links > a {
|
||||||
|
padding: 10px;
|
||||||
|
color: #1F50DD;
|
||||||
|
width: 10em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
border-bottom: 4px solid #1F50DD;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links > a:hover {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
border-bottom: 4px solid rgba(0,0,0,0);
|
||||||
|
transform: scale(0.97);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar_bar {
|
||||||
|
margin: -40px 0 0 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar_bar h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin: -110px 0 0 0;
|
||||||
|
border: 6px solid white;
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 200px;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar:hover {
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transform: scale(1.1) rotate(20deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
padding: 20px 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery > img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery > img:hover {
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:768px) {
|
||||||
|
.avatar_bar {
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar_bar h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40vw;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue