css+js实现响应式自适应头部幻灯片多主题颜色切换页面代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：css+js实现响应式自适应头部幻灯片多主题颜色切换页面代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Domine&family=Josefin+Sans:wght@400;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #c62641;
  --black: #333333;
  --white: #fcfcfc;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;

  font-family: "Josefin Sans", serif;
  color: var(--black);
}

h1,
h2,
h3 {
  font-family: "Domine", sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--primary);
  z-index: 1;
  transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
}

.page-wrapper {
  width: 100%;
  background-color: var(--white);
  background-image: url("//repo.bfw.wiki/bfwrepo/icon/63901f566b1f1.png");
  display: grid;
  justify-items: center;
  translate: 0 100vh;
  position: relative;
  z-index: 2;
}

.page-content {
  width: 100%;
  max-width: 1170px;
  background-color: var(--white);
  padding: 6em 12em;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  translate: 0 -20vh;
}
.page-content h3 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-bottom: 0.3em;
}
.page-content h3 ~ p:not(.lead-text) {
  display: none;
}
.page-content > p {
  line-height: 1.5rem;
  font-size: 1.2rem;
  opacity: 0.8;
}
.page-content h4 {
  text-align: center;
  margin-bottom: 6em;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.button-container {
  margin: 3em 0 10em;
}
.button-container button {
  width: 130px;
  height: 38px;
  text-transform: uppercase;
  font-family: "Josefin Sans", sans-serif;
  margin-right: 1em;
}
.button-container button:nth-of-type(1) {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color, border, color 0.3s;
}
.button-container button:nth-of-type(1):hover {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.button-container button:nth-of-type(2) {
  background-color: var(--white);
  color: var(--primary);
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background-color, border, color 0.3s;
}
.button-container button:nth-of-type(2):hover {
  background-color: var(--primary);
  color: var(--white);
}

.carousel {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.carousel-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 500%;
  height: 100%;
}

.slide {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 60px 1fr;
  row-gap: 1em;
  justify-items: center;
  position: relative;
}
.slide span {
  position: absolute;
  display: inline-block;
  font-size: clamp(10rem, 20vw, 100rem);
  top: 40%;
  left: 50%;
  translate: -50% -40%;
  color: var(--primary);
  filter: brightness(80%);
  z-index: -1;
}
.slide h1 {
  color: var(--white);
  width: clamp(50vw, 20vw, 80vw);
  text-align: center;
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  align-self: flex-end;
}
.slide p {
  margin-top: 1em;
  color: var(--white);
  font-size: 1.1rem;
}
.slide .button-container button:nth-of-type(1) {
  background-color: var(--white);
  color: var(--primary);
  border: none;
  cursor: pointer;
  transition: background-color, border, color 0.3s;
}
.slide .button-container button:nth-of-type(1):hover {
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}
.slide .button-container button:nth-of-type(2) {
  background-color: var(--primary);
  color: var(--white);
  border: 1px solid var(--white);
  cursor: pointer;
  transition: background-color, border, color 0.3s;
}
.slide .button-container button:nth-of-type(2):hover {
  background-color: var(--white);
  color: var(--primary);
}

#nextBtn,
#prevBtn {
  position: fixed;
  top: 40%;
  translate: 0 -40%;
  background-color: transparent;
  border: none;
  outline: none;
  filter: brightness(60%);
  cursor: pointer;
  z-index: 3;
}
#nextBtn {
  right: 5em;
}
#prevBtn {
  left: 5em;
}
#nextBtn svg,
#prevBtn svg {
  width: 50px;
  height: 150px;
  stroke: var(--primary);
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
}
#nextBtn.inactive,
#prevBtn.inactive {
  filter: brightness(90%);
  pointer-events: none;
}

.color-pallete {
  position: absolute;
  top: 3%;
  left: 3%;
  padding: 0.5em;
  z-index: 10;
  display: flex;
}
.color-pallete div {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
}
.color-pallete div.active {
  pointer-events: none;
  border: 1px solid var(--white);
}

@media (max-width: 800px) {
  .page-content {
    padding: 3em 6em;
  }
  #nextBtn svg,
  #prevBtn svg {
    width: 30px;
    height: 120px;
  }
}

@media (max-width: 600px) {
  .page-content {
    padding: 2em;
    translate: 0 0;
  }
  .button-container {
    margin: 3em 0 5em;
  }
  .button-container button {
    width: 50%;
    margin-bottom: 10px;
  }
  .slide .button-container button {
    width: 100%;
    margin-bottom: 10px;
  }
  #nextBtn svg,
  #prevBtn svg {
    width: 20px;
    height: 100px;
  }
  #nextBtn {
    right: 2em;
  }
  #prevBtn {
    left: 2em;
  }
}
</style>




</head>

<body  >
  <header>
  <!-- in true 2010s style, this header could have a big hero image! Click Assets > Photos in the footer menu to browse millions of photos from Unsplash -->
        <h1>2010s Style</h1>
  <h2>Parallax Heroes, The Rise of Web Fonts, and The Flat Design Era</h2>
    </header>

<div class="page-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eaque voluptatem assumenda fuga praesentium quis repudiandae magnam aperiam accusantium, vero consectetur commodi odit eum quas, ullam autem consequatur maxime! Accusantium eius quidem quod modi quas tenetur ea, dicta tempore minima sit. Quibusdam, asperiores! Pariatur facilis ipsa omnis ea tempora? Sunt fugiat repudiandae ipsam dignissimos eligendi, fugit nisi culpa vitae aliquid vel harum consequa.........完整代码请登录后点击上方下载按钮下载查看