自适应响应式服务页面布局效果-html代码-BFW代码库

自适应响应式服务页面布局效果

代码语言：html

所属分类：响应式

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --color-brand-primary: hsl(var(--color-brand-primary-h), 43%, 43%);
  --color-brand-primary-h: 251;
  --color-brand-primary-s: 43%;
  --color-brand-primary-l: 43%;
  --color-brand-accent: hsl(var(--color-brand-accent-h), 96%, 61%);
  --color-brand-accent-h: 16;
  --color-brand-accent-s: 96%;
  --color-brand-accent-l: 61%;
  --color-brand-accent-bg: hsl(calc(var(--color-brand-accent-h) + 17), 100%, 96%);
  --ratio: 1.4;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: calc(1.05rem + 0.333vw);
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  font-size: 62.5%;
  line-height: 1.6;
  box-sizing: border-box;
}
@media (min-width: 40.625em) {
  :root {
    --s0: calc(1.25rem + 0.333vw);
  }
}
@media (min-width: 48em) {
  :root {
    --s0: calc(1.4rem + 0.333vw);
  }
}
@media (min-width: 62em) {
  :root {
    --s0: calc(1.6rem + 0.333vw);
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-size: 1.4rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  background-color: white;
  min-height: 100vh;
}
@media (min-width: 48em) {
  body {
    font-size: 1.5rem;
  }
}

@supports (font-variation-settings: normal) {
  body {
    font-family: "Inter var", sans-serif;
  }
}
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
}
ul li {
  /* Remove li Bullets with zero-width space for accessability */
  list-style-type: none;
}
ul li:before {
  content: "\200B";
  /* add zero-width space */
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  position: absolute;
}

.c-section {
  padding: 0 var(--s3);
}
.c-section__title {
  padding: var(--s2) var(--s3) calc(var(--s6) * 1.8);
  margin: 0 calc(var(--s3) * -1);
  color: #fff;
  font-size: var(--s4);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
}
@media (min-width: 40.625em) {
  .c-section__title {
    padding: var(--s2) var(--s3) var(--s4);
  }
}
@media (min-width: 40.625em) {
  .c-section__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: self-start;
            align-items: self-start;
    -webkit-box-pack: end;
            justify-content: flex-end;
    position: relative;
    text-align: unset;
  }
}
.c-section__title:after {
  content: '';
  display: block;
  background-size: calc(var(--s5) * 3) calc(var(--s5) * 3);
  width: calc(var(--s5) * 3);
  height: calc(var(--s5) * 3);
  background-repeat: no-repeat;
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: translateY(11rem);
          transform: translateY(11rem);
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='aadef149-4ba5-4382-9e09-7df651a328a5' data-name='Layer 1' width='704' height='745.19433' viewBox='0 0 704 745.19433�.........完整代码请登录后点击上方下载按钮下载查看