css实现一个咖啡分类示意图代码-html代码-BFW代码库

css实现一个咖啡分类示意图代码

代码语言：html

代码描述：css实现一个咖啡分类示意图代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Lato|Lora");
html {
  display: grid;
  min-height: 100%;
}

body {
  background: #252C32;
  display: grid;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
}

h3 {
  font-size: 0.8em;
  letter-spacing: 1px;
  font-weight: 100;
}

.container {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 500px;
  height: 700px;
}

.bar {
  position: absolute;
  height: 85%;
  width: 2px;
  left: 7%;
  top: 7.5%;
  background: #F4E8DA;
}

.circle {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  left: -5px;
  border: 1px solid #F4E8DA;
  box-shadow: 0px 0px 7px #f4e8da;
}

.top {
  background: #5B4644;
  top: -1%;
}

.middle {
  background: #87624F;
  top: 38%;
}

.bottom {
  background: #DAB7A3;
  bottom: -1%;
}

.bold {
  color: #87624F;
  position: absolute;
  top: -7%;
  left: -17px;
}

.creamy {
  color: #DAB7A3;
  position: absolute;
  bottom: -7%;
  left: -27px;
}

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