mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 08:59:19 +02:00
first homepage structure
This commit is contained in:
Jonas_Jones
parent
7ad7aff238
commit
f14cf073d9
8 changed files with 117 additions and 37 deletions
|
|
@ -6,7 +6,7 @@ body {
|
|||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #333;
|
||||
color: green
|
||||
color: rgb(0, 255, 0)
|
||||
}
|
||||
|
||||
/* Set container styles */
|
||||
|
|
@ -17,12 +17,18 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/* Set ASCII art styles */
|
||||
.ascii-art {
|
||||
height: 40%;
|
||||
font-size: 20px;
|
||||
font-family: monospace;
|
||||
font-style: bold;
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.card-front, .card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
backface-visibility: hidden;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
/* Set links styles */
|
||||
|
|
@ -32,15 +38,53 @@ body {
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.links a {
|
||||
margin: 0 1rem;
|
||||
.picture {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-front {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
.card-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.image-wrapper:hover .card-front {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.image-wrapper:hover .card-back {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
.home-link,
|
||||
.for-the-based-link {
|
||||
font-size: 2rem;
|
||||
margin: 0 0.5rem;
|
||||
color: rgb(0, 255, 0);
|
||||
text-decoration: underline;
|
||||
transition: all 0.2s ease-in-out;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.home-link:hover,
|
||||
.for-the-based-link:hover {
|
||||
color: green;
|
||||
text-decoration: none;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
/* Set social media styles */
|
||||
.social-media {
|
||||
margin-top: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
|
@ -52,6 +96,43 @@ body {
|
|||
|
||||
.row a {
|
||||
margin-right: 1rem;
|
||||
color: #333;
|
||||
color: rgb(0, 255, 0);
|
||||
text-decoration: none;
|
||||
font-size: 24px;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.row a:hover {
|
||||
transform: scale(1.3); /* make icon 20% bigger on hover */
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 1rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.line {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.line-content {
|
||||
color: #333;
|
||||
font-size: 0.01rem;
|
||||
z-index: -1;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.line:hover + .line-content {
|
||||
transform: scale(100);
|
||||
color: gray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,38 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="ascii-art">
|
||||
<pre>
|
||||
<code>
|
||||
___________________
|
||||
| |
|
||||
| ____ ____ |
|
||||
| | | | | |
|
||||
| |____| |____| |
|
||||
| __ |
|
||||
| |__| |
|
||||
| |
|
||||
|___________________|
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
|
||||
<div class="image-wrapper">
|
||||
<div class="card-front">
|
||||
<img src="/icon_800x800_transparent.png" alt="My Picture" class="picture">
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="home/">Home</a>
|
||||
<a href="the-based/">For The Based(TM)</a>
|
||||
<div class="card-back">
|
||||
<img src="/root_logo.png" alt="My Picture" class="picture">
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="home/" class="home-link">Home</a>
|
||||
<a href="based/" class="for-the-based-link">For The Based™</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="line-content">
|
||||
<p>Idk how this dott got here but im leaving it.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="social-media">
|
||||
<div class="row">
|
||||
<a href="https://github.com"><i class="fab fa-github"></i></a>
|
||||
<a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
|
||||
<a href="https://discord.com"><i class="fab fa-discord"></i></a>
|
||||
<a href="https://github.com/J-onasJones"><i class="fab fa-github"></i></a>
|
||||
<a href="https://www.youtube.com/@JonasJones"><i class="fab fa-youtube"></i></a>
|
||||
<a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord"></i></a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<a href="https://www.reddit.com"><i class="fab fa-reddit"></i></a>
|
||||
<a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
|
||||
<a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
<a href="https://www.reddit.com/u/Jonas_Jones_"><i class="fab fa-reddit"></i></a>
|
||||
<a href="https://twitter.com/Jonas_Jones_"><i class="fab fa-twitter"></i></a>
|
||||
<a href="https://www.instagram.com/_jonas_jones_"><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>Website by Jonas_Jones @ jonasjones.me. 2021 - 2023</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue