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 consequatur reprehenderit eaque iusto unde facilis? Nihil blanditiis libero neque deleniti iste ea.</p>
  <p>Beatae, officia pariatur velit quibusdam dolorum suscipit enim optio hic vitae veniam perspiciatis quo commodi, tempore earum soluta doloremque similique facere doloribus voluptates eos, dignissimos impedit aliquid ex adipisci. Nostrum quod adipisci in sit eaque excepturi quam necessitatibus molestiae ipsum ex ullam odio veritatis ipsa nemo expedita magnam labore suscipit, nesciunt placeat. </p>
  <h3>Skeumorphism's Last Stand</h3>
    <p>Optio ipsa nostrum dolorem laboriosam numquam impedit odit ad qui! Maiores ex quisquam eius sequi iusto dolore inventore doloremque. Dolores suscipit quidem, reprehenderit voluptatum numquam dolorem!</p>
    <p>Quia incidunt facilis saepe. Impedit ipsum enim ullam saepe quo incidunt perferendis quibusdam maiores amet consequuntur eos aliquam voluptates corporis quos ipsam minima, sapiente autem ex architecto nihil neque labore tempore? Esse eveniet, similique nam, vitae dignissimos distinctio eius repudiandae temporibus autem error vero veniam. Voluptatibus, vel voluptatum iure assumenda tempora doloribus dolor ea tenetur eos dolore ipsum omnis distinctio ut eius voluptate harum voluptatem a ullam officia? </p>
  <h3>Web Fonts All Around</h3>
  <p>Deserunt possimus libero in excepturi maiores consectetur tenetur quibusdam deleniti? Cumque officia quibusdam amet. Voluptatibus quasi provident dignissimos aliquam consectetur, sequi a possimus eius modi doloremque. Possimus odio facere quos corporis nulla provident, nobis perspiciatis reiciendis minus saepe, sapiente aliquam exercitationem commodi, quia atque dolores nam laborum voluptas illum praesentium nemo quibusdam! Aperiam sed sit aspernatur!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In deserunt corporis dicta quod inventore repudiandae modi, architecto blanditiis ea deleniti nesciunt voluptatem provident iusto autem cupiditate libero excepturi amet vitae? In, libero quisquam accusamus veniam soluta alias dolorem deleniti temporibus illum, explicabo consequatur omnis illo dolorum rem ex incidunt! Nobis unde exercitationem nesciunt consequatur velit dicta amet impedit odit in.</p>
    <p>Reiciendis, consectetur? Repellat quasi impedit dignissimos quas nisi, quibusdam corrupti sequi nobis eligendi est rerum. Quia, iusto expedita. Tenetur impedit id assumenda repudiandae, eligendi veritatis accusamus ipsa ipsum laboriosam officia aspernatur rerum omnis minima. Dolores, ipsam! Et, temporibus asperiores vero vel ad commodi rem in officiis totam impedit alias sed culpa? Doloribus, vitae alias ipsam est facilis, eum sunt enim aspernatur dolorum quisquam libero voluptate eos.</p>
  <h3>Responsive Design is Here to Stay</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid in, explicabo voluptatem repellat pariatur dolores placeat nulla recusandae dolor asperiores nemo consequuntur quaerat accusamus sed eligendi dicta suscipit minus, cumque, iusto rerum quisquam? Ullam, praesentium nihil. Saepe iusto ratione amet nihil facilis earum quod voluptatem, ad eaque, illum delectus placeat.</p>
  <p>Voluptatibus, vel voluptatum iure assumenda tempora doloribus dolor ea tenetur eos dolore ipsum omnis di.........完整代码请登录后点击上方下载按钮下载查看