一套完整的侧边栏单网页设计提供下载可以改成个人简历-cid1054
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AKKi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
<a href="#" class="navbar-brand font-staat font-size-40">AKKA</a>
<p class="description text-uppercase font-os">Akshay Kashyap</p>
</div>
<div class="d-flex flex-column">
<a href="#home" class="nav-item nav-link text-white-50 font-os font-size-16 active">Home</a>
<a href="#about_me" class="nav-item nav-link text-white-50 font-os font-size-16 active">About</a>
<a href="#services" class="nav-item nav-link text-white-50 font-os font-size-16 active">Services</a>
<a href="#portfolio" class="nav-item nav-link text-white-50 font-os font-size-16 active">Portfolio</a>
<a href="#news" class="nav-item nav-link text-white-50 font-os font-size-16 active">News</a>
<a href="#footer" class="nav-item nav-link text-white-50 font-os font-size-16 active">Contact Us</a>
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-facebook-f"></i></span>
<span class="mr-3"><i class="fab fa-twitter"></i></span>
<span class="mr-3"><i class="fab fa-instagram"></i></span>
<span class="mr-3"><i class="fab fa-youtube"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Akshay Kashyap</h1>
<h5 class="text-white font-ram font-size-27">i'm <span id="typed"></span></h5>
</div>
</div>
</section>
<!-- #site-banner area -->
<!-- about me area -->
<section class="about px-4 my-5" id="about_me">
<div class="me py-5">
<h5 class="text-uppercase font-os font-size-16 text-muted">information</h5>
<h1 class="text-uppercase font-staat font-size-34">About Me</h1>
</div>
<div class="row m-0">
<div class="col-sm-5 pl-0">
<img src="./assets/about.jpg" alt="profile image" class="img-fluid">
</div>
<div class="col-sm-6">
<h6 class="text-uppercase font-os font-size-16 text-muted">About Me</h6>
<h5 class="font-ram font-size-20 py-2">I'm Akshay Kashyap & <span id="typed_2"></span></h5>
<p class="font-ram text-black-50 py-2">
Hi, My name is Adam Dornan. I am a Web Developer, and asellus tempus porttitor estnecer intiorer.
Nulla facilisi. Nulla cursus velit et faucibus lobortis. In tincider diam metus tincede mollis aryi egestas quis.
Nunc vitae felis lectus. Pellentesque imperdiet augue erat aliquer interdume turpis congue. Aliquam euismod turpis.
</p>
<div class="d-flex flex-row flex-wrap justify-content-between py-4">
<div class="d-flex flex-column">
<p class="font-ram"><b>Birthday: </b><span class="text-black-50">29 August 1990</span></p>
<p class="font-ram"><b>Website: </b><span class="text-black-50">www.dailywebtution.com</span></p>
<p class="font-ram"><b>Phone: </b><span class="text-black-50">+1 650-444-0000</span></p>
</div>
<div class="d-flex flex-column">
<p class="font-ram"><b>Degree: </b><span class="text-black-50">Master</span></p>
<p class="font-ram"><b>Mail: </b><span class="text-black-50">daily@webtuition.com</span></p>
<p class="font-ram"><b>Instagram: </b><span class="text-black-50">@akki.2013</span></p>
</div>
</div>
<button class="btn btn-dark text-uppercase mr-3">Hire ME</button>
<button class="btn btn-dark text-uppercase mr-3">Download CV</button>
</div>
</div>
</section>
<!-- #about me area -->
<!-- ability -->
<section class="skill px-4 py-5 bg-light" id="services">
<div class="ability py-3">
<h5 class="text-uppercase font-os font-size-16 text-muted">Ability</h5>
<h1 class="text-uppercase font-staat font-size-34">My skills</h1>
</div>
<div class="row">
<div class="col-sm-6 pl-4">
<p class="font-ram font-size-16 text-black-50 pb-3">
Suspendisse sit amet metus porta, egestas magna eget, ultricies enim. In libero justoner rhoncus eu nisl sed,
pharetra luctus lorem. Praesent faucibus nibh nula necfermentum nunc rhoncus proin maximuster.
</p>
<p class="font-ram font-size-16 text-black-50">
Suspendisse sit amet metus porta, egestas magna eget, ultricies enim. In libero justoner rhoncus eu nisl sed,
pharetra luctus lorem. Praesent faucibus nibh nula necfermentum nunc rhoncus proin maximuster.
</p>
</div>
<div class="col-sm-6 bars">
<div class="bar-1 mb-4">
<div class="d-flex flex-row justify-content-between">
<p class="font-ram font-size-16">Developer</p>
<span class="font-ram font-size-16">90%</span>
</div>
<div class="progress" style="height: 3px;">
<div class="progress-bar bgcolor-black" role="progressbar" style="width:90%"></div>
</div>
</div>
<div class="bar-1 mb-4">
<div class="d-flex flex-row justify-content-between">
<p class="font-ram font-size-16">Photoshop</p>
<span class="font-ram font-size-16">80%</span>
</div>
<div class="progress" style="height: 3px;">
<div class="progress-bar bgcolor-black" role="progressbar" style="width:80%"></div>
</div>
</div>
<div class="bar-1 mb-4">
<div class="d-flex flex-row justify-content-between">
<p class="font-ram font-size-16">Web Design</p>
<span class="font-ram font-size-16">95%</span>
</div>
<div class="progress" style="height: 3px;">
<div class="progress-bar bgcolor-black" role="progressbar" style="width:95%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- #ability -->
<!-- services -->
<section class="services-area px-4 py-5">
<div class="do py-5">
<h5 class="text-uppercase font-os font-size-16 text-muted">What i Do</h5>
<h1 class="text-uppercase font-staat font-size-34">Services</h1>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 mb-4 text-center">
<div class="panel border p-4">
<span class="icon text-secondary"><i class="fas fa-laptop fa-3x"></i></span>
<h4 class="font-ram py-4">Web Design</h4>
<p class="font-ram font-size-16 text-black-50">
Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4 text-center">
<div class="panel border p-4">
<span class="icon text-secondary"><i class="far fa-lightbulb fa-3x"></i></span>
<h4 class="font-ram py-4">Development</h4>
<p class="font-ram font-size-16 text-black-50">
Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4 text-center">
<div class="panel border p-4">
<span class="icon text-secondary"><i class="fas fa-camera fa-3x"></i></span>
<h4 class="font-ram py-4">Photography</h4>
<p class="font-ram font-size-16 text-black-50">
Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4 text-center">
<div class="panel border p-4">
<span class="icon text-secondary"><i class="fas fa-chart-line fa-3x"></i></span>
<h4 class="font-ram py-4">Markiting</h4>
<p class="font-ram font-size-16 text-black-50">
Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4 text-center">
<div class="panel border p-4">
<span class="icon text-secondary"><i class="fas fa-mobile-alt fa-3x"></i></span>
<h4 class="font-ram py-4">Fully Responsive</h4>
<p class="font-ram font-size-16 text-black-50">
Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4 text-center">
<div class="panel border p-4">
<span class="icon text-secondary"><i class="fas fa-directions fa-3x"></i></span>
<h4 class="font-ram py-4">Art Direction</h4>
<p class="font-ram font-size-16 text-black-50">
Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.
</p>
</div>
</div>
</div>
</section>
<!-- #services -->
<!-- reference -->
<section class="reference bg-light py-5 px-4">
<div class="refer py-3">
<h5 class="text-uppercase font-os font-size-16 text-muted">My Reference</h5>
<h1 class="text-uppercase font-staat font-size-34">References</h1>
</div>
<div class="row mb-5">
<div class="col-sm-4 my-3">
<img src="./assets/reffer/refer_1.jpg" alt="refer1" class="img-fluid">
</div>
<div class="col-sm-4 my-3">
<img src="./assets/reffer/refer_2.jpg" alt="refer1" class="img-fluid">
</div>
<div class="col-sm-4 my-3">
<img src="./assets/reffer/refer_3.jpg" alt="refer1" class="img-fluid">
</div>
</div>
</section>
<!-- #reference -->
<!-- work -->
<section class="work py-5 px-4" id="portfolio">
<div class="py-3">
<h5 class="text-uppercase font-os font-size-16 text-muted">Porfolio</h5>
<h1 class="text-uppercase font-staat font-size-34">Creative Work</h1>
</div>
<div class="row">
<div class="col-sm-4 pb-4">
<img src="./assets/work/01.jpg" alt="work1" class="img-fluid">
</div>
<div class="col-sm-4 pb-4">
<img src="./assets/work/02.jpg" alt="work1" class="img-fluid">
</div>
<div class="col-sm-4 pb-4">
<img src="./assets/work/03.jpg" alt="work1" class="img-fluid">
</div>
<div class="col-sm-4 pb-4">
<img src="./assets/work/04.jpg" alt="work1" class="img-fluid">
</div>
<div class="col-sm-4 pb-4">
<img src="./assets/work/05.jpg" alt="work1" class="img-fluid">
</div>
<div class="col-sm-4 pb-4">
<img src="./assets/work/06.jpg" alt="work1" class="img-fluid">
</div>
</div>
</section>
<!-- #work -->
<!-- news -->
<section class="news py-5 px-4 bg-light" id="news">
<div class="py-3">
<h5 class="text-uppercase font-os font-size-16 text-muted">Read</h5>
<h1 class="text-uppercase font-staat font-size-34">Latest News</h1>
</div>
<div class="row">
<div class="col-sm-4 my-3">
<div class="card border-0">
<img src="./assets/news/01.jpg" alt="news1" class="card-img-top">
<div class="card-body">
<p class="font-ram font-size-16 text-black-50">in <b class="text-uppercase text-dark">lifestyle</b></p>
<h5 class="card-title font-ram">Responsive Design</h5>
<p class="cart-text text-black-50">
Fusce suscipit, ante a hendrerit ullamcorper, risus nisl cursus purus, sit amet viverra ante nulla vel justo.
Morbi justo erat, posuere vel libero non, bibendum convallis enim.
</p>
</div>
</div>
</div>
<div class="col-sm-4 my-3">
<div class="card border-0">
<img src="./assets/news/02.jpg" alt="news1" class="card-img-top">
<div class="card-body">
<p class="font-ram font-size-16 text-black-50">in <b class="text-uppercase text-dark">lifestyle</b></p>
<h5 class="card-title font-ram">Bootstrap Framework</h5>
<p class="cart-text text-black-50">
Fusce suscipit, ante a hendrerit ullamcorper, risus nisl cursus purus, sit amet viverra ante nulla vel justo.
Morbi justo erat, posuere vel libero non, bibendum convallis enim.
</p>
</div>
</div>
</div>
<div class="col-sm-4 my-3">
<div class="card border-0">
<img src="./assets/news/03.jpg" alt="news1" class="card-img-top">
<div class="card-body">
<p class="font-ram font-size-16 text-black-50">in <b class="text-uppercase text-dark">lifestyle</b></p>
<h5 class="card-title font-ram">Animation Effects</h5>
<p class="cart-text text-black-50">
Fusce suscipit, ante a hendrerit ullamcorper, risus nisl cursus purus, sit amet viverra ante nulla vel justo.
Morbi justo erat, posuere vel libero non, bibendum convallis enim.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- #news -->
<footer id="footer" class="pt-5 px-3">
<div id="contact_us">
<div class="py-3 px-2">
<h5 class="text-uppercase font-os font-size-16 text-muted">Location</h5>
<h1 class="text-uppercase font-staat font-size-34">Contact Us</h1>
</div>
<div class="row py-5">
<div class="col-sm-6">
<h6 class="text-uppercase font-ram font-size-16 text-dark">akka company Inc.</h6>
<p class="font-ram w-50 font-size-16 text-black-50">Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo</p>
<p class="font-ram font-size-16 text-black-50 pt-3">PHONE: +1 650-444-1234</p>
<p class="font-ram font-size-16 text-black-50">FAX: +1 650-4444-0000</p>
<p class="font-ram font-size-16 text-black-50">EMAIL: info@dailyinc.com</p>
<p class="font-ram font-size-16 text-black-50">ADDRESS: 2 Curiosity Way, San Mateo, CA 94403, US.</p>
</div>
<div class="col-sm-6 py-4 px-4">
<h6 class="text-uppercase font-ram font-size-16">Get in touch</h6>
<form action="" class="py-3">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<textarea name="" id="" cols="30" rows="3" class="form-control my-4" placeholder="Message"></textarea>
<button type="submit" class="btn btn-dark">Say Hello!</button>
</form>
</div>
</div>
<div class="row bg-light py-5">
<div class="col-sm-4 my-5 text-center">
<h6 class="font-ram font-size-16 text-black-50">©2020 AKKA. All rights reserved</h6>
</div>
<div class="col-sm-4 my-4 text-center">
<div class="footer-title">
<a href="#" class="navbar-brand font-staat font-size-40 text-dark">AKKA</a>
<p class="description font-os font-size-16 text-black-50 text-uppercase">Akshay Kashyap</p>
</div>
</div>
<div class="col-sm-4 my-5 text-center">
<span class="mr-3"><i class="fab fa-facebook-f"></i></span>
<span class="mr-3"><i class="fab fa-twitter"></i></span>
<span class="mr-3"><i class="fab fa-instagram"></i></span>
<span class="mr-3"><i class="fab fa-youtube"></i></span>
</div>
</div>
</div>
</footer>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
在线演示?
获取源码: Website
下载数:281人次, 文件大小: 3.7 MB, 上传日期: 2020年-11月-25日
公众号回复:gcode 获取解压密码
3,536 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容！立即支付
