simple warped tour layout!!

since i cant post layout rn im just doing it in a blog

based off of this layout

LAYOUT CODE

<style>

.logo {

   content: url(https://seeklogo.com/images/V/vans-logo-037AC1382F-seeklogo.com.png);

}

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.pinimg.com/originals/4e/96/58/4e965806c6d5ad4a2a94434eda3e9b15.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>

li.active .icon { content:url('https://i5.glitter-graphics.org/pub/440/440995psx9ye3vv2.gif'); width: 20PX;height: 20px;}

</style>

<style>

/* width */

::-webkit-scrollbar {

  width: 10px;

}

/* Track */

::-webkit-scrollbar-track {

  background: black; 

}

</style>

<style>

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Roboto+Mono&display=swap');

</style>

<style>

:root {

    --logo-blue: #00000;

    --darker-blue: #00000;

    --dark-orange: #00000;

    --light-orange: #00000;

    --lighter-blue: #00000;

    --even-lighter-blue: #00000;

    --even-lighter-orange: #00000;

    --green: #00000;

    --lightest-blue: #00000;

}

nav{background-image: url(https://i.pinimg.com/236x/81/eb/96/81eb967e1be04bc55da4f6df7c696409.jpg); ;border-radius: 0px 0px; font-family: 'Roboto Mono', monospace; font-color: red !important; font-size: 10px; filter: opacity(95%);}

nav ul{background:;font-family: 'Roboto Mono', monospace!; font-color: red; font-size: 7px; filter: opacity(100%);}

nav img{filter: opacity(95%) !important;}

nav ul a img, .mood a img{display:none!important; }

top{background:blac; font-family: 'Roboto Mono',  font-color: ; font-size: 8px;  filter: opacity(95%);}

body {

     background-image: url('https://lh3.googleusercontent.com/pw/AP1GczMjY0P412VOKU4-OLaKTgI2n6rXk3gHrWECkYZqz07o9ghs28pKqUetChQOUGZf2UFBFjzUrFn4Dv-smoozLersr6IBagm-ThWZgjQv3neBdc_eBeCMXOKdF3QcfzMbzbGkJoAegk-RCkmuKUJDPHsed9-DLJM4pvOLZHMapDOJYGke9VkygjRzRLr-W9uRJvCNV9VYiDiLuFTuSBGy6r-VwknYxylI-Kl702lB8GP6BbK41_l-Q6qwGUKa-lnU6BxmlBBe_6-mwR5VU0msboZzBwX9Op2onsdzGmx4w3O05H1coehaLfXQ8NacqO1f9Ev8TqReUvjZi1aszs6IQsJUlW-yOKjYE-LDJuA3PfCxcBB3D5v2-nuQ3PFnNhFeYp41dVlCibatcIYuOkcpPP8McCLerueNb89ydKI-91NTvYdpYlZfWPIhaJlvMwc6yFZun9qTosBC-5rGMKEfFOo0Yc4E_Gbm6K9--HEDM2Yk-fOBOfzl_2M5OGkBWulE2FH2Izo0DCF1kXSy3ICPFj1S_bXBohac8UvSV916aeBCM_9zcrSWLQZa9LNPM5kj6dyaiGdn0-mwNyFCaHZAN1_wLz0V3Dq4-ZiN3Oc24J15-vfTYEU0YzcBMrmLmWpEasluYAKjAPQ3od4dftzjEU8zDHaFH06O0nWsRw-gGwUUEsqNSCO5cKkubTERdQeCPfzATGkSTUsYOT9n9-tWSDkgqLa0QtVI0o2RgxjP6JQjPxdFYzKyZqyY7d1kB1yottg55z-VtlArV6oDFOKIVGct8RTeOlJOCD0Z6fMXGkezoM_c1f5RalKRcChXwP-Fxwbz1ffEkho8VCwElM-h4SazjPNUyTYJFKQS6mfUjX4-0k4ovbFIJyIErPisib9GToRpW4ORSXZ9-SHNUj2g7-CpMw=w1381-h840-s-no-gm?authuser=0');

background-attachment: fixed;

background-size: 100% 

}

main{

    width:100%;

    height: 20%;

    background-image: url('https://img.ws.mms.shopee.ph/0575a5babf275d38c22db25c82bd8215');

    filter: opacity(90%);

    padding:0px;

    margin-top:0px;

    margin-left: auto;

}

b {

  font-family: 'Kiwi Maru', serif;

  color: red;

  letter-spacing: 0px;

}

i {

  font-family: 'Kiwi Maru', serif;

  color: red;

  letter-spacing: 2px;

}

.column {

  float: left;

  width: 33.33%;

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

.profile .left{

    width:50%!important;

}

.row {

  display: flex;

}

.column {

  flex: 50%;

}

.profile .column {

    overflow-y: scroll;

    width:100%;

    height:200px;

    text-align: center;

    top: 100px; left: 0px;

    border-radius: 0px;

}

.profile {

  background-color: black;

  font-family: 'Roboto Mono', monospace;

  font-size: 12px;

  color: white;

  text-transform: lowercase!important;

  height: 20%;

}

a:link {

    color: gray;

    font-family: 'Kiwi Maru', serif;

    text-transform: uppercase!important;

    text-shadow: none!important;

}

a:hover {

    color: red;

    font-family: 'Kiwi Maru', serif;

    text-decoration: strike-through!important;

}

a:visited {

     color: white;

     font-family: 'Kiwi Maru', serif;

     text-transform: uppercase!important;

}

.mood {

    font-size: 11px;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

    width: 100%;

    background-ima: url(https://i.pinimg.com/236x/81/eb/96/81eb967e1be04bc55da4f6df7c696409.jpg);

    color:red;

    padding-bottom: 0px;

    margin-bottom: 0px;

    padding-top: 0%;

}

.contact {

        display: block;

        font-size: 11px;

        font-family: 'Roboto Mono', monospace;

        border: none 0px!important;

        background-image: url("")!important;

        background: ;

}

.contact .inner a img {

        font-size: 0;

}

.contact .inner a img:before {

        font-size: 1em;

        display: block;

.right .section h4{display:none !important;}

.blurbs .heading{

  display: none!important;

  text-align: left;

  font-size: 12px;

  font-family: 'Roboto Mono', monospace;

  border-top: none;

  border-right: none;

}

.blurbs {

   font-size: 12px;

   font-color: white;

   font-family: 'Roboto Mono', monospace;

}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {

display: none;

border:0px;

}

footer {

    background-color: transparent;

    font-size: 8px;

    font-color: red;

    font-family: 'Roboto Mono', monospace;

}

</style>

END OF CODE

let me know if it breaks ASAP