html and css js 制作单网页完美效果支持自适应id1095-网页前端设计

zwxic

已于 2022-05-18 18:24:31 修改

阅读量812

点赞数

分类专栏：前端设计网站前端 html 文章标签： css css3 html js

于 2020-09-21 22:47:02 首次发布

本文链接：https://blog.csdn.net/zwxic/article/details/108721008

版权

网站前端同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端设计

23 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

html and css js 制作单网页完美效果支持自适应id1095-网页前端设计
在这里插入图片描述
源码下载地址

在线演示地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal webiste</title>
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
  <script src="js/scripts.js"></script>
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar">
    <div class="inner-width">
      <a href="/" class="logo"></a>
      <button class="menu-toggler">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-menu">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#education">Education</a>
        <a href="#works">Works</a>
        <a href="#contact">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Home -->
  <section id="home">
    <div class="inner-width">
      <div class="content">
        <h1>Hi I'm </h1>
        <div class="sm">
          <a href="#" class="fab fa-facebook-f"></a>
          <a href="#" class="fab fa-twitter"></a>
          <a href="#" class="fab fa-instagram"></a>
          <a href="#" class="fab fa-linkedin-in"></a>
          <a href="#" class="fab fa-youtube"></a>
        </div>
        <div class="buttons">
          <a href="#">Contact me</a>
          <a href="#">Download CV</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Home -->
  <section id="about">
    <div class="inner-width">
      <h1 class="section-title">About</h1>
      <div class="about-content">
        <img src="images/pic.png" alt="" class="about-pic">
        <div class="about-text">
          <h2>Hi! I'm Darkcode</h2>
          <h3>
            <span>Developer</span>
            <span>Designer</span>
            <span>Youtuber</span>
          </h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed fuga eaque, culpa cupiditate animi laborum natus! Similique odio sit facilis dolorum dicta velit provident sequi iusto, est pariatur quisquam corrupti animi necessitatibus aliquid deserunt reprehenderit voluptatibus? Exercitationem deserunt fugit dicta nesciunt velit quae tempora eius praesentium odio est, voluptatem vero incidunt omnis ad iure, soluta maiores nostrum inventore alias culpa. Nihil suscipit possimus est harum accusamus impedit libero deleniti repellat.
          </p>
        </div>
      </div>

      <div class="skills">
        <div class="skill">
          <div class="skill-info">
            <span>HTML</span>
            <span>90%</span>
          </div>
          <div class="skill-bar html"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>CSS</span>
            <span>80%</span>
          </div>
          <div class="skill-bar css"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>Javascript</span>
            <span>70%</span>
          </div>
          <div class="skill-bar js"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>PHP</span>
            <span>60%</span>
          </div>
          <div class="skill-bar php"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>MySQL</span>
            <span>90%</span>
          </div>
          <div class="skill-bar mysql"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>C#</span>
            <span>80%</span>
          </div>
          <div class="skill-bar cs"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Services -->
  <section id="services" class="dark">
    <div class="inner-width">
      <h1 class="section-title">Services</h1>
      <div class="services">
        <div class="service">
          <i class="icon fas fa-paint-brush"></i>
          <h4>Design</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-pager"></i>
          <h4>Build Websites</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-database"></i>
          <h4>Manage Databases</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fab fa-android"></i>
          <h4>Android Apps</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-credit-card"></i>
          <h4>Ui Design</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-keyboard"></i>
          <h4>Edit Texts</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Education -->
  <section id="education">
    <div class="inner-width">
      <h1 class="section-title">Education & Experiences</h1>
      <div class="time-line">
        <div class="block">
          <h4>2018 - 2019</h4>
          <h3>Software engineering</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At expedita maiores ullam voluptatum a nulla aperiam enim eveniet adipisci ipsum.</p>
        </div>

        <div class="block">
          <h4>2018 - 2019</h4>
          <h3>Software engineering</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At expedita maiores ullam voluptatum a nulla aperiam enim eveniet adipisci ipsum.</p>
        </div>

        <div class="block">
          <h4>2018 - 2019</h4>
          <h3>Software engineering</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At expedita maiores ullam voluptatum a nulla aperiam enim eveniet adipisci ipsum.</p>
        </div>

        <div class="block">
          <h4>2018 - 2019</h4>
          <h3>Software engineering</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At expedita maiores ullam voluptatum a nulla aperiam enim eveniet adipisci ipsum.</p>
        </div>

        <div class="block">
          <h4>2018 - 2019</h4>
          <h3>Software engineering</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At expedita maiores ullam voluptatum a nulla aperiam enim eveniet adipisci ipsum.</p>
        </div>

        <div class="block">
          <h4>2018 - 2019</h4>
          <h3>Software engineering</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At expedita maiores ullam voluptatum a nulla aperiam enim eveniet adipisci ipsum.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Works -->
  <section id="works" class="dark">
    <div class="inner-width">
      <h1 class="section-title">Works</h1>
      <div class="works">
        <a href="images/works/1.jpg" class="work">
          <img src="images/works/1.jpg" alt="">
          <div class="info">
            <h3>Work Title</h3>
            <div class="cat">Music, Headset</div>
          </div>
        </a>

        <a href="images/works/2.jpg" class="work">
          <img src="images/works/2.jpg" alt="">
          <div class="info">
            <h3>Work Title</h3>
            <div class="cat">Music, Headset</div>
          </div>
        </a>

        <a href="images/works/3.jpg" class="work">
          <img src="images/works/3.jpg" alt="">
          <div class="info">
            <h3>Work Title</h3>
            <div class="cat">Music, Headset</div>
          </div>
        </a>

        <a href="images/works/4.jpg" class="work">
          <img src="images/works/4.jpg" alt="">
          <div class="info">
            <h3>Work Title</h3>
            <div class="cat">Music, Headset</div>
          </div>
        </a>

        <a href="images/works/5.jpg" class="work">
          <img src="images/works/5.jpg" alt="">
          <div class="info">
            <h3>Work Title</h3>
            <div class="cat">Music, Headset</div>
          </div>
        </a>

        <a href="images/works/6.jpg" class="work">
          <img src="images/works/6.jpg" alt="">
          <div class="info">
            <h3>Work Title</h3>
            <div class="cat">Music, Headset</div>
          </div>
        </a>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact">
    <div class="inner-width">
      <h1 class="section-title">Get in touch</h1>
      <div class="contact-info">
        <div class="item">
          <i class="fas fa-mobile-alt"></i>
          +111 111111111
        </div>

        <div class="item">
          <i class="fas fa-envelope"></i>
          email@address.com
        </div>

        <div class="item">
          <i class="fas fa-map-marker-alt"></i>
          New York, United States
        </div>
      </div>

      <form action="#" class="contact-form">
        <input type="text" class="nameZone" placeholder="Your Full Name">
        <input type="email" class="emailZone" placeholder="Your Email">
        <input type="text" class="subjectZone" placeholder="Subject">
        <textarea class="messageZone" placeholder="Message"></textarea>
        <input type="submit" value="Send Message" class="btn">
      </form>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="inner-width">
      <div class="copyright">
        &copy; 2020 | Created & Designed By <a href="#">darkcode</a>
      </div>
      <div class="sm">
        <a href="#" class="fab fa-facebook-f"></a>
        <a href="#" class="fab fa-twitter"></a>
        <a href="#" class="fab fa-instagram"></a>
        <a href="#" class="fab fa-linkedin-in"></a>
        <a href="#" class="fab fa-youtube"></a>
      </div>
    </div>
  </footer>

  <!-- Go Top BTN -->
  <button class="goTop fas fa-arrow-up"></button>

</body>
</html>

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Ubuntu",sans-serif;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

::selection{
  background-color: #48dbfb60;
}

::-webkit-scrollbar{
  width: 10px;
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb{
  background-color: #353b48;
}

.navbar{
  position: fixed;
  background-color: transparent;
  width: 100%;
  padding: 30px 0;
  top: 0;
  z-index: 999;
  transition: .3s linear;
}

.inner-width{
  max-width: 1300px;
  margin: auto;
  padding: 0 40px;
}

.navbar .inner-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  width: 44px;
  height: 32px;
  background-image: url(../images/white-logo.png);
  background-size: contain;
}

.menu-toggler{
  background: none;
  width: 30px;
  border: none;
  cursor: pointer;
  position: relative;
  outline: none;
  z-index: 999;
  display: none;
}

.menu-toggler span{
  display: block;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  position: relative;
  transition: .3s linear;
}

.navbar-menu a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
  transition: .2s linear;
}

.navbar-menu a:hover{
  color: #48dbfb !important;
}

.sticky{
  background-color: #fff;
  padding: 18px 0;
}

.sticky .logo{
  background-image: url(../images/black-logo.png);
}

.sticky .navbar-menu a{
  color: #111;
}

.sticky .menu-toggler span{
  background-color: #111;
}

#home{
  height: 100vh;
  min-height: 500px;
  background: url(../images/bg.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}

#home .inner-width{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#home .content{
  width: 100%;
  color: #fff;
}

#home .content h1{
  font-size: 60px;
  margin-bottom: 60px;
}

#home .content h1::after{
  content: "Darkcode";
  animation: textanim 10s linear infinite;
}

@keyframes textanim{
  25%{
    content: "A Developer";
  }
  50%{
    content: "A Designer";
  }
  75%{
    content: "A Youtuber";
  }
}

.sm a{
  color: #fff;
  font-size: 22px;
  margin: 0 10px;
  transition: .2s linear;
}

.sm a:hover{
  color: #48dbfb;
}

#home .buttons{
  margin-top: 60px;
}

#home .buttons a{
  display: inline-block;
  margin: 15px 30px;
  color: #48dbfb;
  font-size: 15px;
  font-weight: 500;
  width: 180px;
  border: 1px solid #48dbfb;
  padding: 14px 0;
  border-radius: 6px;
  transition: .2s linear;
}

#home .buttons a:hover,
#home .buttons a:nth-child(2)
{
  background-color: #48dbfb;
  color: #fff;
}

section{
  padding: 100px 0;
  background-color: #f1f1f1;
}

.section-title{
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  font-size: 26px;
  padding-bottom: 20px;
  color: #111;
}

.section-title::before{
  content: "";
  position: absolute;
  width: 80px;
  height: 3px;
  background-color: #111;
  bottom: 0;
  left: calc(50% - 40px);
}

.section-title::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 10px;
  background-color: #48dbfb;
  border: 4px solid #f1f1f1;
  left: calc(50% - 12px);
  bottom: -7px;
}

.about-content{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.about-pic{
  width: 200px;
  border-radius: 50%;
  margin-right: 100px;
}

.about-text{
  flex: 1;
}

.about-text h3{
  margin: 10px 0;
  color: #444;
  font-size: 16px;
}

.about-text h3 span:nth-child(1):after,
.about-text h3 span:nth-child(2):after{
  content: "";
  width: 6px;
  height: 6px;
  background-color: #444;
  display: inline-block;
  border-radius: 50%;
  margin: 0 14px;
}

.about-text p{
  font-size: 17px;
  text-align: justify;
  line-height: 26px;
  margin-top: 20px;
}

.skills{
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.skill{
  width: calc(50% - 20px);
  margin: 15px 0;
}

.skill-info{
  display: flex;
  justify-content: space-between;
}

.skill-bar{
  height: 3px;
  background-color: #ddd;
  margin-top: 14px;
  position: relative;
}

.skill-bar::after{
  content: "";
  position: absolute;
  height: 6px;
  background-color: #48dbfb;
  bottom: 0;
}

.html:after{
  width: 90%;
}

.css:after{
  width: 80%;
}

.js:after{
  width: 70%;
}

.php:after{
  width: 60%;
}

.mysql:after{
  width: 90%;
}

.cs:after{
  width: 80%;
}

section.dark{
  background-color: #353b48;
}

section.dark .section-title{
  color: #f1f1f1;
}

section.dark .section-title::before{
  background-color: #f1f1f1;
}

section.dark .section-title::after{
  border: 4px solid #353b48;
}

.services{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.service{
  width: calc(33% - 20px);
  text-align: center;
  border: 1px solid #48dbfb;
  border-radius: 6px;
  margin: 20px 0;
  padding: 40px 20px;
  color: #fff;
  cursor: pointer;
  transition: .3s linear;
}

.service .icon{
  color: #48dbfb;
  font-size: 40px;
  margin-bottom: 20px;
  transition: .3s linear;
}

.service h4{
  font-size: 16px;
  margin-bottom: 6px;
}

.service:hover{
  background-color: #48dbfb;
}

.service:hover .icon{
  color: #fff;
}

.time-line,.works{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.block{
  width: calc(50% - 20px);
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 10px 0;
  padding: 30px;
  position: relative;
}

.block::before{
  content: "";
  position: absolute;
  width: 1px;
  height: 120%;
  background-color: #ddd;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.block::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #48dbfb;
  left: -28px;
  top: 30px;
  border-radius: 50%;
}

.block h3{
  font-size: 16px;
  margin: 10px 0;
}

.block p{
  font-size: 15px;
  color: #444;
}

.work{
  width: calc(33% - 10px);
  overflow: hidden;
  border-radius: 6px;
  margin: 10px 0;
  cursor: pointer;
  position: relative;
}

.work img{
  width: 100%;
  height: 100%;
  transition: .4s linear;
}

.work::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #48dbfbcc;
  transition: .2s linear;
  opacity: 0;
  transform: scale(0);
}

.work .info{
  position: absolute;
  z-index: 2;
  bottom: 40px;
  left: 40px;
  color: #fff;
  transition: .4s linear;
  opacity: 0;
}

.work:hover img{
  transform: scale(1.6) rotate(25deg);
}

.work:hover::before,
.work:hover .info
{
  opacity: 1;
  transform: scale(1);
}

.contact-info{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.contact-info .item{
  width: calc(33% - 20px);
  height: 160px;
  background-color: #353b48;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: .3s linear;
}

.contact-info i{
  display: block;
  font-size: 40px;
  line-height: 120px;
  height: 100px;
}

.contact-info .item:hover{
  background-color: #48dbfb;
}

.contact-form{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact-form input, .contact-form textarea{
  width: 100%;
  height: 50px;
  margin: 10px 0;
  background-color: #353b48;
  border: none;
  outline: none;
  padding: 20px;
  border-radius: 4px;
  color: #fff;
}

.nameZone, .emailZone{
  max-width: calc(50% - 10px);
}

.messageZone{
  min-height: 200px;
  resize: vertical;
}

.contact-form .btn{
  width: 180px;
  background-color: transparent;
  color: #48dbfb;
  font-size: 16px;
  border: 2px solid #48dbfb;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  transition: .3s linear;
}

.contact-form .btn:hover{
  background-color: #48dbfb;
  color: #fff;
}

footer{
  background: url(../images/bg.jpg) no-repeat center;
  color: #fff;
  padding: 80px 0;
  text-align: center;
}

.copyright{
  margin-bottom: 20px;
  font-size: 15px;
}

.copyright a{
  font-size: 16px;
  color: #48dbfb;
  font-weight: 500;
}

.goTop{
  position: fixed;
  z-index: 999;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  background-color: #48dbfb;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  outline: none;
  display: none;
}

@media screen and (max-width: 980px){
  .menu-toggler{
    display: block;
  }

  .navbar-menu{
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: #353b48;
    top: 0;
    right: -100%;
    max-width: 400px;
    padding: 80px 50px;
    transition: .3s linear;
  }

  .navbar-menu a{
    display: block;
    font-size: 30px;
    margin: 30px 0;
  }

  .sticky .navbar-menu{
    background-color: #f1f1f1;
  }
  
  .navbar-menu.active{
    right: 0;
  }

  .menu-toggler.active span:nth-child(1){
    transform: rotate(-45deg);
    top: 4px;
  }

  .menu-toggler.active span:nth-child(2){
    opacity: 0;
  }

  .menu-toggler.active span:nth-child(3){
    transform: rotate(45deg);
    bottom: 14px;
  }

  .inner-width{
    max-width: 800px;
  }

  .about-pic{
    margin: 0 auto 60px;
  }

  .about-text{
    flex: 100%;
    text-align: center;
  }

  .service{
    width: calc(50% - 20px);
  }

  .block{
    width: calc(100% - 20px);
    margin-left: auto;
  }

  .work{
    width: calc(50% - 10px);
  }

  .contact-info .item{
    width: 100%;
    margin: 10px 0;
  }
}

@media screen and (max-width: 600px){
  .inner-width{
    padding: 0 20px;
  }

  .skill{
    width: 100%;
  }

  .service{
    width: 100%;
  }

  .work{
    width: 100%;
  }

  .nameZone, .emailZone{
    max-width: 100%;
  }
}