js+css实现简洁个人主页简历网站代码-html代码-BFW代码库

代码语言：html
代码描述：js+css实现简洁个人主页简历网站代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {background: #121212;}
</style>

  
  
</head>

<body translate="no">
  <div class="bgWrap">
  <div class="bg">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=IBM+Plex+Mono:wght@300;400&display=swap');

      body {
        margin: 30px auto;
      }
      /* ======================================================
         DISCLAIMER / QUICK NOTES
         ------------------------------------------------------
         1) Please keep the credit link intact.
         2) All theme colors are stored as RGB variables in :root.
            To recolor the code, edit only the variables in :root.
         3) Image URLs can be replaced directly inside the HTML.
         4) The layout uses fixed dimensions. Large text areas use
            internal scrollboxes, so you can add more text safely.
         5) The cover page works as an overlay. The HOME navigation
            button brings it back at any time.
         6) For audio: replace the mp3 URL inside the mahriSongs array.
         7) If you need help: @mahrico  on discord
      ====================================================== */

      :root {
        --font-title: "Bodoni Moda", Georgia, serif;
        --font-fancy: "Cormorant Garamond", Georgia, serif;
        --font-text: "Inter", Arial, sans-serif;
        --font-mono: "IBM Plex Mono", "Courier New", monospace;
        --white: 255, 255, 255; 
        --ivory: 253, 249, 240;
        --cream: 245, 235, 217;
        --pearl: 250, 244, 234;
        --paper: 238, 224, 204;
        --blush: 224, 195, 181;
        --sand: 199, 176, 145;
        --gold: 180, 128, 53;
        --gold2: 224, 190, 122;
        --ink: 72, 52, 39;
        --shadow: 0, 0, 0;
        --c-gold: rgb(var(--gold));
        --c-gold2: rgb(var(--gold2));
        --c-ink: rgb(var(--ink));
        --a-ink-90: rgba(var(--ink), .90);
        --a-ink-64: rgba(var(--ink), .64);
        --line: 1px solid rgba(var(--gold), .34);
        --line-soft: 1px solid rgba(var(--ink), .10);
        --glow: 0 0 34px rgba(var(--gold2), .30);
        --bg: radial-gradient(circle at 48% -6%, rgba(var(--white), .95) 0 8%, rgba(var(--white), 0) 32%), radial-gradient(circle at 9% 19%, rgba(var(--gold2), .18) 0 9%, rgba(var(--gold2), 0) 30%), radial-gradient(circle at 93% 73%, rgba(var(--blush), .24) 0 10%, rgba(var(--blush), 0) 35%), linear-gradient(135deg, rgb(var(--ivory)), rgb(var(--cream)) 52%, rgb(var(--pearl)));
        --panel2: linear-gradient(160deg, rgba(var(--white), .68), rgba(var(--paper), .42));
        --img: url(https://i.pinimg.com/736x/95/ae/02/95ae028467a1052ca5483aaf2c482d41.jpg);
      }

      /* ======================================================
         01 · LAYOUT
      ====================================================== */

      .bgWrap {
        width: 930px;
        height: 660px;
        margin: 20px auto;
        padding: 20px;
        background: var(--img);
        background-size: cover;
        border-radius: 10px;
        border: var(--line)
      }

      .bg {
        width: 100%;
        height: 100%;
        background: var(--bg);
        color: var(--c-ink);
        font-family: var(--font-text);
        overflow: hidden;
        position: relative;
        border: var(--line);
        outline: 1px solid rgba(var(--white), .75);
        border-radius: 100px 0 0 0
      }

      .bg:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(var(--gold), .055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--gold), .045) 1px, transparent 1px);
        background-size: 56px 56px;
        opacity: .42
      }

      .bg:after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 12% 65%, rgba(var(--white), .55) 0 2px, transparent 3px), radial-gradient(circle at 48% 21%, rgba(var(--gold2), .72) 0 1px, transparent 2px), radial-gradient(circle at 82% 14%, rgba(var(--gold2), .55) 0 2px, transparent 3px), radial-gradient(circle at 90% 86%, rgba(var(--white), .58) 0 2px, transparent 3px);
        pointer-events: none
      }

      .wrap {
        position: absolute;
        inset: 18px;
        overflow: hidden
      }

      /* ======================================================
         02 · LEFT NAVIGATION
         Tutorial: Add a new menu button by copying one .tab div
         in the HTML and giving the target page a matching ID.
      ====================================================== */

      .nav {
        position: absolute;
        left: 18px;
        top: 18px;
        width: 74px;
        display: grid;
        gap: 12px;
        z-index: 50
      }

      .tab {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: var(--line);
        background: rgba(var(--white), .60);
        display: grid;
        place-items: center;
        cursor: pointer;
        color: var(--a-ink-64);
        font: 23px/1 var(--font-fancy);
        position: relative;
        transition: .9s ease
      }

      .tab span {
        position: absolute;
        left: 50%;
        top: 48px;
        transform: translateX(-50%);
        opacity: 0;
        white-space: nowrap;
        font: 7px var(--font-mono);
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--c-gold);
        background: rgba(var(--white), .82);
        border: 1px solid rgba(var(--gold), .22);
        padding: 2px 5px;
        border-radius: 99px;
        pointer-events: none;
        transition: .6s ease
      }

      .tab:before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px solid rgba(var(--gold), 0);
        transition: .8s ease
      }

      .tab:hover,
      .tab.on {
        background: rgba(var(--white), .90);
        color: var(--c-gold);
        box-shadow: var(--glow)
      }

      .tab:hover:before,
      .tab.on:before {
        border-color: rgba(var(--gold), .55);
        animation: mahriHalo 4s linear infinite
      }

      .tab:hover span,
      .tab.on span {
        opacity: 1;
        top: 54px;
      }

      /* ======================================================
         03 · GLOBAL PANELS 
      ====================================================== */

      .panel {
        position: absolute;
        border: var(--line);
        background: var(--panel2);
        box-sizing: border-box;
        padding: 22px;
        backdrop-filter: blur(3px);
        transition: 1s ease
      }

      .panel:hover {
        background: rgba(var(--white), .76)
      }

      .panel h2 {
        margin: 0;
        font: italic 35px/1 var(--font-fancy);
        font-weight: 400
      }

      .sub {
        margin: 8px 0 18px;
        font: 9px var(--font-mono);
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--a-ink-64)
      }

      .text {
        font: 13px/1.74 var(--font-text);
        color: var(--a-ink-90)
      }

      .page {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px) scale(.985);
        transition: 1s ease
      }

      .page.on {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1)
      }

      .main {
        left: 110px;
        top: 18px;
        width: 765px;
        height: 385px;
        border-radius: 36px 126px 36px 36px
      }

      .personaMain {
        height: 400px;
        padding: 20px 22px 18px
      }

      .main:before,
      .frag:before,
      .musicbox:before {
        content: "";
        position: absolute;
        inset: 11px;
        border: 1px solid rgba(var(--gold), .12);
        border-radius: inherit;
        pointer-events: none
      }

      .mainLine {
        position: absolute;
        width: 80%;
        height: 5px;
        bottom: 185px;
        left: 140px;
        border-bottom: var(--line)
      }

      .mainLine:before {
        content: "✦";
        position: absolute;
        left: 48%;
        bottom: -10px;
        color: var(--c-ink)
      }

      .........完整代码请登录后点击上方下载按钮下载查看