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

23 篇文章 0 订阅
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%;
  }
}

源码下载地址

在线演示地址

点赞 评论 转发就是对up的最大支持和鼓励, 非常谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值