div+css实现炫酷个人简历网站代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现炫酷个人简历网站代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

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

<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Unbounded:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/pp-neue-montreal" rel="stylesheet">

<style>
body {
  background: #121212;
}
/* ================================
    COLOR SYSTEM
================================ */
:root{
  --bg:transparent;

  --black:#050705;
  --black2:#0a0d08;
  --panel:#10150e;
  --panel2:#182012;

  --paper:#d7dcc5;
  --paper2:#aeb899;

  --text:#e9eddc;
  --textDark:#11140f;
  --muted:#aab497;
  --faint:rgba(233,237,220,.58);

  --green:#c7d988;
  --green2:#9faf62;
  --green3:#5f6f38;
  --acid:#d9ff85;

  --line:rgba(199,217,136,.35);
  --lineSoft:rgba(233,237,220,.14);
  --darkLine:rgba(17,20,15,.28);

  --glass:rgba(5,7,5,.78);
  --glass2:rgba(199,217,136,.08);
  --light:rgba(199,217,136,.22);
  --glow:rgba(199,217,136,.42);
  --deepGlow:rgba(157,190,91,.28);

  --radius:34px;
  --ease:.35s ease;
}

  
/* ================================
   BASE 
================================ */
  
  body {
  margin: 30px auto;  
  }
  
*{
  box-sizing:border-box;
}

.wrap{
  width:900px;
  height:720px;
  margin:30px auto;
  position:relative;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:'PP Neue Montreal','Rajdhani',Arial,sans-serif;
}

img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:grayscale(.25) contrast(1.18) saturate(.72);
  transition:var(--ease);
}

h1{
  margin:0;
  font-family:'Unbounded',sans-serif;
  font-size:28px;
  line-height:1;
  color:var(--green);
}

h2{
  margin:0 0 9px;
  font:13px 'Share Tech Mono',monospace;
  color:var(--green);
  text-transform:uppercase;
}

em{
  display:block;
  font:11px 'Share Tech Mono',monospace;
  color:var(--faint);
  font-style:normal;
}

p{
  margin:0 0 9px;
  font-size:12px;
  line-height:1.42;
  color:var(--muted);
}

/* ================================
   OVERLAYS /  EFFECTS
================================ */
.grain{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  opacity:.16;
  background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
  mix-blend-mode:screen;
}

.light{
  width:220px;
  height:220px;
  position:absolute;
  left:50%;
  top:50%;
  z-index:19;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle, var(--light), transparent 70%);
  transform:translate(-50%,-50%);
  transition:.06s linear;
}

/* ================================
   MAIN LAYOUT BLOCKS
================================ */
.content{
  position:absolute;
  left:0;
  top:0;
  width:560px;
  height:520px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:34px 34px 4px 4px;
  background:
    radial-gradient(circle at 75% 25%, rgba(199,217,136,.16), transparent 35%),
    var(--glass);
}

.controls{
  position:absolute;
  left:0;
  bottom:0;
  width:560px;
  height:175px;
  overflow:hidden;
  border:1px solid var(--darkLine);
  border-top:0;
  border-radius:4px 4px 72px 34px;
  background:var(--paper);
  color:var(--textDark);
}

.side{
  position:absolute;
  right:0;
  top:0;
  width:320px;
  height:720px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:36px;
  color:var(--textDark);
  background:
    radial-gradient(circle at 50% 12%, rgba(215,220,197,.48), transparent 26%),
    radial-gradient(circle at 50% 56%, rgba(199,217,136,.18), transparent 34%),
    linear-gradient(180deg, var(--paper2), var(--black) 39%);
}

.content:before,
.controls:before,
.side:before{
  conte.........完整代码请登录后点击上方下载按钮下载查看