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

作者code 
<!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%;
  }
}

在线演示

 

让链接同时具备两种打开方式
获取源码: Personal Website
下载数:822人次, 文件大小: 953.7 KB, 上传日期: 2021年-1月-17日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

6,162 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 6元 才能查看此处内容！立即支付

类似文章