, A F2U CODE
Mobile Friendly?: Think so
Use: Can be used anywhere, can be modified, can be inspired by, can be merged with credits.
Dori recommends: Using if you have a teeny bit of basic coding knowledge. I explain almost nothing in this code.
body{background-color:black}
/* Fun fact, caja means box in spanish! That's why the div is named like that :)
Feel free to modify and play around the style! */
.caja {display: flex;width:80%;margin:auto;gap:5px}
.caja> div {background-color: lightyellow;width:100%;height:100%;padding: 5px;margin:5px;border:2px dashed black}
h1 {font-family:"Times New Roman";font-optical-sizing: auto;font-weight: 700;font-style: bold;}
p {font-family:courier;letter-spacing:1px}
.headshot {width:110px;height:110px;border:2px dashed black;margin:3px}
img {transition: transform .6s;border:2px dashed black}
img:hover {transform: scale(1.01);}
hr {height: 0;border-top: 2px dashed black;margin: 1em 0;padding: 0;}
::selection {color: white;background: green;}
table {margin-left:auto;margin-right:auto}
td {background-color:lightyellow;border: 1.9px dashed black; padding:0.6em}
a {color:black}
a:hover {font-weight:bold}
/* BTW. This scroll bar thing was from w3schools */
::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-track {background: black;}
::-webkit-scrollbar-thumb {background: lightyellow; BORDER:2PX DASHED black}
::-webkit-scrollbar-thumb:hover {background: lightyellow;BORDER:2PX DASHED black}
<!-- This plays music! Just change the "hpib2dfKTgs" to whichever video you want. It's pretty neat don't ya think... --->
<div class="player">
<iframe width="0" height="0" src="https://www.youtube.com/embed/hpib2dfKTgs?autoplay=1&controls=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; repeat; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="caja">
<div>
<img src="https://i.scdn.co/image/ab67616d0000b2732f2ddb545cb9250dbe5ea975"
style="width:100px;height:100px;margin:0px;border:2px dashed black;display:block;float:right">
<strong><h1 style="margin:0px">my life in art</h1>
<p style="letter-spacing:3px">excuses for travellers</p></strong>
</div>
</div>
<div class="caja">
<div style="width:20%;height:auto">
<h1> Calendar </h1>
<p> Skip through a specific section. </p>
<hr/>
<a href="#2010" class="skip"><h1>201X</h1></a>
<p> Whatever year this is, write something brief about it. </p>
<hr/>
<a href="#2022" class="skip"><h1>2022</h1></a>
<p> Whatever year this is, write something brief about it. </p>
<hr/>
<a href="#2023" class="skip"><h1>2023</h1></a>
<p> Whatever year this is, write something brief about it. </p>
<hr/>
<a href="#2024" class="skip"><h1>2024</h1></a>
<p> Whatever year this is, write something brief about it. </p>
<hr/>
<img src="https://i.scdn.co/image/ab67616d0000b2732f2ddb545cb9250dbe5ea975" style="width:100px;height:100px;margin:0px;border:2px dashed black;display:block;float:center">
<p> This template was used on my site before! It was inspired by a song of Mojave 3 called "My life in art". I thought the title was catchy, the song was awesome and I wanted to make a page displaying my art evolution. And so this page was born. And then it died. And then I put it as a template for you to use, so it revives.
</p>
</div>
<div style="width:80%">
<p> These are in order of the year. Please click the thumbnail for the full high quality image. </p>
<hr/>
<h1 id="2010"> 201X </H1>
<p>A future artist's passion was born and slowly evolving. They liked drawing what they thought of and make it come to reality. Without caring how it looked.
</p>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<hr/>
<h1> 2020 </h1>
<p> The year of the pandemic, where art was a distraction of what was going on around the world. </p>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<!-- 2022 -->
<hr/>
<h1 id="2022"> 2022 </h1>
<P> Art wasn't just their passion, it was their dream job. Art became something more than a hobby, it became a reason. </p>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<!-- 2023 -->
<hr/>
<H1 id="2023"> 2023 </H1>
<p> After drawing for a long time, it was difficult finding a purpose of doing all this in the first place. A slow burnout ensues. </p>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
<a target=”_blank” title="This text can be seen when hovering."
href="INSERT_FULL_IMAGE">
<img class='headshot' src="INSERT_IMAGE_HEADSHOT">
</a>
</div>
</div>
<center>
<a
style="color:lightyellow"
href="https://doritochan001.neocities.org">made with love</a>
</center>