INX's profile picture

Published by

published

Category: Web, HTML, Tech

Y2K INTERNETCORE LAYOUT

★☆★ Y2K INTERNETCORE LAYOUT ★☆★


I got bored and decided to make a layout you might enjoy!

just a look you might like! it's fully customizable with a custom cursor! Need to add more? You can! code won't break after inserting something you like, example a custom online tag! (some codes do break)

Here's the look!

Here's the code for you!

(sorry for the text container being this small for the code...)

Enjoy!


<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@500;700&family=Audiowide&display=swap');

/* ===== CUSTOM CURSOR ===== */
* {
  cursor: url('https://cur.cursors-4u.net/cursors/cur-2/cur116.cur'), auto !important;
}

/* ===== BACKGROUND ===== */
body {
  background: #0a0015 url('https://i.imgur.com/8QZQZQZ.gif') repeat fixed !important;
  background-size: 300px !important;
  color: #ff69b4 !important;
  font-family: 'Orbitron', 'Audiowide', sans-serif !important;
}

/* Main profile container */
main {
  background: rgba(10, 0, 25, 0.75) !important;
  border: 4px double #ff00ff !important;
  border-radius: 18px !important;
  box-shadow: 
    0 0 15px #ff00ff,
    0 0 30px #00ffff,
    inset 0 0 20px rgba(255, 0, 255, 0.3) !important;
  padding: 15px !important;
}

/* Profile box */
.profile {
  background: linear-gradient(145deg, rgba(255, 0, 255, 0.15), rgba(0, 255, 255, 0.1)) !important;
  border-radius: 15px !important;
}

/* ===== GLOWING TEXT ===== */
h1, h2, h3, h4, .heading {
  font-family: 'Audiowide', 'Orbitron', sans-serif !important;
  color: #ff69b4 !important;
  text-shadow: 
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #00ffff,
    0 0 30px #ff00ff !important;
  letter-spacing: 1px !important;
}

p, .details-table, .blurbs, .friends {
  color: #e0aaff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  text-shadow: 0 0 4px #ff00ff !important;
}

/* Links */
a {
  color: #00ffff !important;
  text-shadow: 0 0 6px #00ffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

a:hover {
  color: #ff00ff !important;
  text-shadow: 
    0 0 8px #ff00ff,
    0 0 15px #ff00ff !important;
  text-decoration: underline !important;
}

/* ===== PROFILE PICTURE ===== */
.profile-pic img {
  border: 4px solid #ff00ff !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 15px #ff00ff,
    0 0 25px #00ffff !important;
  transition: transform 0.3s ease !important;
}

.profile-pic img:hover {
  transform: scale(1.05) rotate(2deg) !important;
  box-shadow: 
    0 0 25px #ff00ff,
    0 0 40px #00ffff !important;
}

/* ===== SECTIONS (About Me, Interests, Friends, etc.) ===== */
.profile .blurbs .section,
.profile .table-section,
.profile .friends,
.profile .contact,
.blog-preview,
.comments-table {
  background: rgba(20, 0, 40, 0.8) !important;
  border: 3px solid #ff00ff !important;
  border-radius: 12px !important;
  box-shadow: 0 0 12px #ff00ff !important;
  margin-bottom: 12px !important;
}

.profile .blurbs .section h4,
.table-section .heading,
.friends .heading {
  background: linear-gradient(90deg, #ff00ff, #00ffff) !important;
  color: #000 !important;
  text-shadow: none !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 6px 10px !important;
  font-family: 'Press Start 2P', cursive !important;
  font-size: 11px !important;
}

/* Interest table rows */
.details-table td {
  background: transparent !important;
  border-bottom: 1px dashed #ff00ff !important;
  color: #e0aaff !important;
}

/* ===== NAV BAR ===== */
nav {
  background: linear-gradient(90deg, #ff00ff, #9b00ff, #00ffff) !important;
  border: 2px solid #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 15px #ff00ff !important;
}

nav a {
  color: #fff !important;
  text-shadow: 0 0 5px #000 !important;
  font-family: 'Orbitron', sans-serif !important;
}

/* ===== SCROLLBAR (Chrome/Edge/Safari) ===== */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: #1a0033;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(#ff00ff, #00ffff);
  border-radius: 10px;
  border: 2px solid #1a0033;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#00ffff, #ff00ff);
}

/* ===== EXTRA EFFECTS ===== */
/* Subtle scanline overlay */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.1) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.3;
}
</style>

<!-- ===== AUTOPLAY MUSIC ===== -->
<!-- Change the video ID after /embed/ to whatever song you want -->
<iframe width="0" height="0" 
src="https://www.youtube.com/embed/LOZuxwVk7TU?autoplay=1&loop=1&playlist=LOZuxwVk7TU&controls=0" 
frameborder="0" allow="autoplay; encrypted-media" style="display:none;">
</iframe>

<!-- ===== DECORATIONS / STAMPS / BLINKIES ===== -->
<div style="text-align:center; margin: 15px 0;">
  <img src="https://64.media.tumblr.com/6e0b329b9ada177daa140f9888ce0e0d/tumblr_pbb59fPz581xz2nuuo1_100.png" alt="stamp">
  <img src="https://64.media.tumblr.com/7258ee018983f655b99af084ebce3744/tumblr_inline_paun8mAkMv1v11djx_100.gif" alt="blinkie">
  <img src="https://64.media.tumblr.com/6e4e1bdd664295bef07e470df27f2040/tumblr_inline_paunuiiAK71v11djx_100.gif" alt="blinkie">
  <img src="https://orig00.deviantart.net/51d2/f/2018/183/d/0/stamp_027_by_call9ii-dcg4kyk.png" alt="stamp">
</div>

<div style="text-align:center; font-family:'Press Start 2P', cursive; font-size:10px; color:#00ffff; text-shadow:0 0 8px #00ffff; margin:10px 0;">
  ★☆★ WELCOME TO MY SPACE ★☆★<br>
  <span style="color:#ff69b4;">~*~ pure y2k energy ~*~</span>
</div>


0 Kudos

—

Comments

Displaying 0 of 0 comments ( View all | Add Comment )