简介：前端领域创作者。扫码或搜索添加文末微信「耀南」：🍗 回复 ”网站模板“，免费送网站模板！
欢迎点赞 👍 收藏 ⭐留言 📝 私信📄
❤ 【小程序模板/PC登录页模板/GPT开源/ 分布式架构系统】
❤ 【web前端静态网页设计/小程序前端成品项目——🔥🔥移动成品项目精品实战案例】
一、网页效果🌌
二、内容简介🧩
通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。
接下来我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。
三、网站介绍📚
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
四、前端介绍🔗：
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。
五、目录结构📂
六、代码💒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="DESCRIPTION">
<meta name="keywords" content="KEYWORDS">
<meta name="author" content="AUTHOR NAME">
<!-- TITLE -->
<title>Multimax - Multipurpose One page</title>
<!-- FAVICON -->
<link href="img/favicon.ico" rel="icon">
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- FONT-AWESOME -->
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- MAGNIFIC POPUP CORE CSS -->
<link href="css/magnific-popup.css" rel="stylesheet">
<!-- OWL CAROUSEL -->
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/owl.theme.default.min.css" rel="stylesheet">
<!--Style CSS file-->
<link rel=" stylesheet" href="css/style.css">
</head>
<body>
<!-- ====== Preloader ====== -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- ======End Preloader ====== -->
<!-- ======START NAVGITION ====== -->
<nav class="navbar navbar-expand-lg">
<!-- logo -->
<a class="navbar-brand" href="#home">
<img src="img/logo.png" alt="header-Logo" class="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText">
<span class="icon-bar"><i class="fa fa-bars fa-2x"></i></span>
</button>
<!--End of Resposive Toggle icon-->
<div class="collapse navbar-collapse" id="navbarText">
<!--Main menu navigation list-->
<ul class="navbar-nav ml-auto line">
<li class="nav-item">
<a class="nav-link" href="#home" data-scroll-nav="0">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-scroll-nav="1">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services" data-scroll-nav="2">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio" data-scroll-nav="3">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team" data-scroll-nav="4">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#price" data-scroll-nav="5">Price</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog" data-scroll-nav="6">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-scroll-nav="7">Contact</a>
</li>
</ul>
<!--End of Main menu navigation list-->
</div>
<!--End of resposive collapse class-->
</nav>
<!-- ====== END NAVGITION ====== -->
<!-- =======START HEADER=========== -->
<header class="home" id="home" data-scroll-index="0">
<div class="container">
<div class="row">
<div class="col-lg-6 home-content mt-md-5 mt-sm-5">
<h1 class="heading-primary mb-3">
Multimax Creative Agency
</h1>
<p class="mb-5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque vel aut animi quam ducimus
consequatur voluptas delectus, sapiente.</p>
<a href="#0" class="button btn-hover mt-5">Get Started →</a>
</div>
<!-- ====== START SLIDESHOW ====== -->
<div class="col-lg-6 order-first order-lg-last">
<div id="carousel-img" class="owl-carousel owl-theme">
<div class="item"><img src="img/home-01.png" alt="home-picture-01" /></div>
<div class="item"><img src="img/home-02.png" alt="home-picture-02" /></div>
<div class="item"><img src="img/home-03.png" alt="home-picture-03" /></div>
<div class="item"><img src="img/home-04.png" alt="home-picture-04" /></div>
</div>
</div>
</div>
<!-- ====== END SLIDESHOW ====== -->
</div>
</header>
<!-- ====== END HEADER ====== -->
<!-- Scroll to Top -->
<div id="scroll-to-top"><i class="fa fa-arrow-up fa-fw"></i></div>
<!-- ====== START ABOUT ====== -->
<section class="about padding" id="about" data-scroll-index="1">
<div class="container">
<div class="row">
<!-- START ABOUT PICTURE -->
<div class="col-lg-6 mt-lg-5">
<img src="img/about.png" alt="about-picture" />
</div>
<!-- END ABOUT PICTURE -->
<!-- START ABOUT CONTENT -->
<div class="col-lg-6 mt-md-5 mt-sm-5 about-content">
<div class="hr-title">
<h2 class="heading-primary mb-2">
About Us
</h2>
<div class="headerhr"></div>
</div>
<h3 class="heading-tertiary mt-3 mb-3">
Become best of you
</h3>
<p class="mb-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque vel aut animi quam ducimus
consequatur voluptas delectus, sapiente, explicabo nam quasi! Corporis ipsum quae repellendus
molestias a quaerat recusandae similique!</p>
<p class="mb-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius exercitationem suscipit ex quasi
in iure dolorem cupiditate corrupti ducimus ipsa.
</p>
<a href="#0" class="button btn-hover mt-3">Read More →</a>
</div>
<!-- END ABOUT CONTENT -->
</div>
</div>
</section>
<!-- ====== END ABOUT====== -->
<!-- ====== START ABOUT LIST====== -->
<section class="about-list padding">
<div class="container">
<div class="row">
<!-- START ABOUT LIST SECTION TITLE -->
<div class="text-center">
<h2 class="heading-primary mb-5">Our <span>Creative</span></h2>
<p class="mb-3">Lorem Ipsum is simply dummy text of the printing and type setting
industry when an unknown printer took a galley of type and scrambled it to make a type specimen
book It has survived not only five centuries.</p>
</div>
<!-- END ABOUT LIST SECTION TITLE -->
<!-- START ABOUT ITEM -->
<div class="about-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
<div class="text-center">
<i class="icon fa fa-paint-brush fa-2x"></i>
<h5>Web Design</h5>
<h6>Modern & Clean Design</h6>
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry</p>
</div>
</div>
<!-- END ABOUT ITEM -->
<!-- START ABOUT ITEM -->
<div class="about-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
<div class="text-center">
<i class="icon fa fa-desktop fa-2x"></i>
<h5>Development</h5>
<h6>Web & Mobile Development</h6>
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry</p>
</div>
</div>
<!-- END ABOUT ITEM -->
<!-- START ABOUT ITEM -->
<div class="about-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
<div class="text-center">
<i class="icon fa fa-diamond fa-2x"></i>
<h5>Branding</h5>
<h6>Logo Design</h6>
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry</p>
</div>
</div>
<!-- END ABOUT ITEM -->
</div>
</div>
</section>
<!-- ====== END OF ABOUT LIST====== -->
<!-- ====== START SKILLS ====== -->
<section class="skills padding">
<div class="container">
<div class="row">
<!-- START SKILLS LEFT SIDE -->
<div class="col-lg-5 mx-auto skills-left">
<h2 class="heading-primary mb-5">Our <span>Skills</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ipsam ullam incidunt itaque
nemo omnis temporibus totam quibusdam repellat vero, recusandae excepturi dignissimos velit et
alias amet, quia facilis perferendis,consectetur adipisicing elit. Aliquam ipsam ullam incidunt
itaque nemo omnis.</p>
</div>
<!-- END SKILLS LEFT SIDE -->
<!-- START SKILLS RIGHT SIDE -->
<div class="col-lg-7 mx-auto skills-right">
<div class="content">
<div class="skill">
<!-- HTML // CSS3 -->
<div class="progress-item">
<h6>Html // Css3</h6>
<div class="skills-progress">
<span data-value="95%"></span>
</div>
</div>
<!-- JQUERY //JAVA SCRIPT -->
<div class="progress-item">
<h6>Jquery // Java Script</h6>
<div class="skills-progress">
<span data-value="80%"></span>
</div>
</div>
<!-- WORDPRESS -->
<div class="progress-item">
<h6>Wordpress</h6>
<div class="skills-progress">
<span data-value="75%"></span>
</div>
</div>
<!-- BOOTSTRAP -->
<div class="progress-item">
<h6>Bootstrap</h6>
<div class="skills-progress">
<span data-value="92%"></span>
</div>
</div>
</div>
</div>
</div>
<!-- END SKILLS RIGHT SIDE -->
</div>
</div>
</section>
<!-- ====== END SKILLS ====== -->
<!-- ====== START SERVICES ====== -->
<section class="services padding" id="services" data-scroll-index="2">
<div class="container">
<!-- START SERVICES SECTION TITLE -->
<h2 class="heading-primary text-center mb-5">Our Services</h2>
<!-- END SERVICES SECTION TITLE -->
<div class="row">
<!-- START CONTENT BOX -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="content-box">
<div class="hr-title">
<div class="outer-circle">
<div class="inner-circle">
<div class="content-box-icon">
<i class="fa fa-pencil-square-o fa-2x"></i>
</div>
</div>
</div>
<div class="headerhr"></div>
</div>
<h5 class="heading-secondary">Designs & interfaces</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis.
</p>
</div>
</div>
<!--END CONTENT BOX -->
<!--START CONTENT BOX -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="content-box">
<div class="hr-title">
<div class="outer-circle">
<div class="inner-circle">
<div class="content-box-icon">
<i class="fa fa-cog fa-2x"></i>
</div>
</div>
</div>
<div class="headerhr"></div>
</div>
<h5 class="heading-secondary">Highly customizable</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, sequi cupiditate! Nobis
corporis exercitationem obcaecati magni rerum explicabo vel nemo.
</p>
</div>
</div>
<!--END CONTENT BOX -->
<!--START CONTENT BOX -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="content-box">
<div class="hr-title">
<div class="outer-circle">
<div class="inner-circle">
<div class="content-box-icon">
<i class="fa fa-desktop fa-2x"></i>
</div>
</div>
</div>
<div class="headerhr"></div>
</div>
<h5 class="heading-secondary">Responsive design</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam laudantium veritatis
porro obcaecati, reiciendis.
</p>
</div>
</div>
<!--END CONTENT BOX -->
<!--START CONTENT BOX -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="content-box">
<div class="hr-title">
<div class="outer-circle">
<div class="inner-circle">
<div class="content-box-icon">
<i class="fa fa-lightbulb-o fa-2x"></i>
</div>
</div>
</div>
<div class="headerhr"></div>
</div>
<h5 class="heading-secondary">Features & plugins</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptatem atque, hic ut
necessitatibus nesciunt ullam officia.
</p>
</div>
</div>
<!--END CONTENT BOX -->
<!--START CONTENT BOX -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="content-box">
<div class="hr-title">
<div class="outer-circle">
<div class="inner-circle">
<div class="content-box-icon">
<i class="fa fa-clock-o fa-2x"></i>
</div>
</div>
</div>
<div class="headerhr"></div>
</div>
<h5 class="heading-secondary">Optimised for speed</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit inventore fugiat rerum enim,
quibusdam mollitia laborum magnam nobis sed.
</p>
</div>
</div>
<!--END CONTENT BOX -->
<!--START CONTENT BOX -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="content-box">
<div class="hr-title">
<div class="outer-circle">
<div class="inner-circle">
<div class="content-box-icon">
<i class="fa fa-comment-o fa-2x"></i>
</div>
</div>
</div>
<div class="headerhr"></div>
</div>
<h5 class="heading-secondary">Dedicated support</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro exercitationem vel dolores
harum inventore vitae nam dolor. Molestiae earum repellendus architecto corporis.
</p>
</div>
</div>
<!--END CONTENT BOX -->
</div>
</div>
</section>
<!-- ====== END SERVICES ====== -->
<!-- ====== START COUNTS ====== -->
<section class="counts padding">
<div class="container">
<!-- START COUNTS CONTENT -->
<div class="counts-c text-center">
<div class="row">
<!-- START COUNTS ITEM -->
<div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
<div class="counter">
<div class="counting-icon">
<i class="fa fa-code fa-2x"></i>
</div>
<!-- NUMBER -->
<span class="count" data-from="0" data-to="300">0</span>
<!-- TITLE -->
<h4>Our Customers</h4>
</div>
</div>
<!-- END COUNTS ITEM -->
<!-- START COUNTS ITEM -->
<div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
<div class="counter">
<div class="counting-icon">
<i class="fa fa-coffee fa-2x"></i>
</div>
<!-- NUMBER -->
<span class="count" data-from="0" data-to="150">0</span>
<!-- TITLE -->
<h4>happy clients</h4>
</div>
</div>
<!-- END COUNTS ITEM -->
<!-- START COUNTS ITEM -->
<div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
<div class="counter">
<div class="counting-icon">
<i class="fa fa-lightbulb-o fa-2x"></i>
</div>
<!-- NUMBER -->
<span class="count" data-from="0" data-to="115">0</span>
<!-- TITLE -->
<h4>Project Completed</h4>
</div>
</div>
<!-- END COUNTS ITEM -->
<!-- START COUNTS ITEM -->
<div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
<div class="counter">
<div class="counting-icon">
<i class="fa fa-trophy fa-2x"></i>
</div>
<!-- NUMBER -->
<span class="count" data-from="0" data-to="20">0</span>
<!-- TITLE -->
<h4>Awards</h4>
</div>
</div>
<!-- END COUNTS ITEM -->
</div>
</div>
<!-- END COUNTS CONTENT -->
</div>
</div>
</section>
<!-- ====== END COUNTS ====== -->
<!-- ====== START PORTFOLIO ====== -->
<section class="portfolio padding" id="portfolio" data-scroll-index="3">
<div class="container-fluid">
<!-- START PORTFOLIO SECTION TITLE -->
<div class="port-title text-center text-white">
<h2 class="heading-primary mb-5">Portfolio</h2>
<p class="text-white mb-5">Lorem Ipsum is simply dummy text of the printing and type setting
industry when an unknown printer took a galley of type and scrambled it to make a type specimen
book It has survived not only five centuries.</p>
</div>
<!-- END PORTFOLIO SECTION TITLE -->
<!--START PORTFOLIO FILTER BUTTONS -->
<nav>
<ul class="simplefilter filter-port">
<li class="btn active button btn-hover" data-filter="all">All</li>
<li class="btn button btn-hover" data-filter="1">Brand</li>
<li class="btn button btn-hover" data-filter="2">Design</li>
<li class="btn button btn-hover" data-filter="3">Graphic</li>
</ul>
</nav>
<!-- END PORTFOLIO FILTER BUTTONS -->
<div class="row">
<!--START PORTFOLIO CONTENT -->
<div class="filtr-container">
<!-- PORTFOLIO FILTER ITEM-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="1">
<div class="port-caption">
<!-- PORTFOLIO IMAGE -->
<img src="img/portfolio/portfolio-01.jpg" alt="portfolio-01" />
<!-- PORTFOLIO TITLE -->
<div class="overlay">
<div class="info-content">
<h4>Creative Portfolio</h4>
<p>Branding ∣ Logo</p>
</div>
<div class="view-more">
<a class="modal-image" href="img/portfolio/portfolio-01.jpg">
<i class="fa fa-search fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO FILTER ITEM-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="3">
<div class="port-caption">
<!-- PORTFOLIO IMAGE -->
<img src="img/portfolio/portfolio-02.jpg" alt="portfolio-02" />
<!-- PORTFOLIO TITLE -->
<div class="overlay">
<div class="info-content">
<h4>Creative Portfolio</h4>
<p>Branding ∣ Logo</p>
</div>
<div class="view-more">
<a class="modal-image" href="img/portfolio/portfolio-02.jpg">
<i class="fa fa-search fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO FILTER ITEM-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="1">
<div class="port-caption">
<!-- PORTFOLIO IMAGE -->
<img src="img/portfolio/portfolio-03.jpg" alt="portfolio-03" />
<!-- PORTFOLIO TITLE -->
<div class="overlay">
<div class="info-content">
<h4>Creative Portfolio</h4>
<p>Branding ∣ Logo</p>
</div>
<div class="view-more">
<a class="modal-image" href="img/portfolio/portfolio-03.jpg">
<i class="fa fa-search fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO FILTER ITEM-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="2">
<div class="port-caption">
<!-- PORTFOLIO IMAGE -->
<img src="img/portfolio/portfolio-04.jpg" alt="portfolio-04" />
<!-- PORTFOLIO TITLE -->
<div class="overlay">
<div class="info-content">
<h4>Creative Portfolio</h4>
<p>Branding ∣ Logo</p>
</div>
<div class="view-more">
<a class="modal-image" href="img/portfolio/portfolio-04.jpg">
<i class="fa fa-search fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO FILTER ITEM-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="3">
<div class="port-caption">
<!-- PORTFOLIO IMAGE -->
<img src="img/portfolio/portfolio-05.jpg" alt="portfolio-05" />
<!-- PORTFOLIO TITLE -->
<div class="overlay">
<div class="info-content">
<h4>Creative Portfolio</h4>
<p>Branding ∣ Logo</p>
</div>
<div class="view-more">
<a class="modal-image" href="img/portfolio/portfolio-05.jpg">
<i class="fa fa-search fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO FILTER ITEM-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="1">
<div class="port-caption">
<!-- PORTFOLIO IMAGE -->
<img src="img/portfolio/portfolio-06.jpg" alt="portfolio-06" />
<!-- PORTFOLIO TITLE -->
<div class="overlay">
<div class="info-content">
<h4>Creative Portfolio</h4>
<p>Branding ∣ Logo</p>
</div>
<div class="view-more">
<a class="modal-image" href="img/portfolio/portfolio-06.jpg">
<i class="fa fa-search fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!--END PORTFOLIO CONTENT -->
</div>
</div>
</section>
<!-- ====== END PORTFOLIO ====== -->
<!-- ====== START TEAM====== -->
<section class="team padding" id="team" data-scroll-index="4">
<div class="container">
<!-- START TEAM SECTION TITLE -->
<div class="text-center">
<h2 class="heading-primary mb-5">Our Team </h2>
<p class="mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam magnam nihil dolores
maxime aspernatur saepe.</p>
</div>
<!-- END TEAM SECTION TITLE -->
<div class="row mt-30">
<!-- START TEAM INFO -->
<div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
<div class="team-info">
<img src="img/team/team-01.jpg" alt="team-photo" />
<div class="view-content">
<h3 class="title">Alex Smith</h3>
<span class="post">UI/UX Designer</span>
<ul class="icon">
<li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- END TEAM INFO -->
<!-- START TEAM INFO -->
<div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
<div class="team-info">
<img src="img/team/team-02.jpg" alt="team-photo" />
<div class="view-content">
<h3 class="title">Sophia</h3>
<span class="post">Web Designer</span>
<ul class="icon">
<li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- END TEAM INFO -->
<!-- START TEAM INFO -->
<div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
<div class="team-info">
<img src="img/team/team-03.jpg" alt="team-photo" />
<div class="view-content">
<h3 class="title">James Smith</h3>
<span class="post">Web Developer</span>
<ul class="icon">
<li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- END TEAM INFO -->
<!-- START TEAM INFO -->
<div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
<div class="team-info">
<img src="img/team/team-04.jpg" alt="team-photo" />
<div class="view-content">
<h3 class="title">Emily</h3>
<span class="post">Coordinator</span>
<ul class="icon">
<li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- END TEAM INFO -->
</div>
</div>
</section>
<!-- ====== END TEAM ====== -->
<!-- ====== START GET READY ====== -->
<section class="ready padding">
<div class="container">
<div class="row">
<div class="col-lg-12 cta">
<div class="text-center">
<h2 class="heading-primary mb-3">Want to work with us?</h2>
<h5 class="heading-tertiary mb-5">Tell us about your project</h5>
<a href="#0" class="button btn-hover">
<span>Get Started</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ====== END GET READY ====== -->
<!-- ====== START PRICES ====== -->
<section class="price padding" id="price" data-scroll-index="5">
<div class="container">
<!-- START PRICE SECTION TITLE -->
<div class="text-center">
<h2 class="heading-primary mb-5">Pricing Table</h2>
<p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid nisi soluta, maxime
doloribus numquam autem adipisci. Id, nisi! Quo, sequi aut? Nulla excepturi iure sit.</p>
</div>
<!-- END PRICE SECTION TITLE -->
<!-- START PRICE TABLE -->
<div class="pricing-tables text-center">
<div class="row">
<!-- START PRICE LIST -->
<div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
<div class="item mb-md50">
<div class="type">
<h4>Free</h4>
</div>
<div class="value">
<h3><span>$</span>0</h3>
<span class="per">/ Month</span>
</div>
<div class="features">
<ul>
<li>2 GB Disk Space</li>
<li>1 Domain Names</li>
<li>2 Email Address</li>
<li>Enhanced Security</li>
<li>Unlimited Support</li>
</ul>
</div>
<div class="order">
<a href="#0" class="button btn-hover">
<span>Order Now</span>
</a>
</div>
</div>
</div>
<!-- END PRICE LIST -->
<!-- START PRICE LIST -->
<div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
<div class="item mb-md50">
<div class="type">
<h4>Basic</h4>
</div>
<div class="value">
<h3><span>$</span>10</h3>
<span class="per">/ Month</span>
</div>
<div class="features">
<ul>
<li>8 GB Disk Space</li>
<li>10 Domain Names</li>
<li>4 Email Address</li>
<li>Enhanced Security</li>
<li>Unlimited Support</li>
</ul>
</div>
<div class="order">
<a href="#0" class="button btn-hover">
<span>Order Now</span>
</a>
</div>
</div>
</div>
<!-- END PRICE LIST -->
<!-- START PRICE LIST -->
<div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
<div class="item active mb-md50">
<div class="type">
<h4>Standard</h4>
</div>
<div class="value">
<h3><span>$</span>30</h3>
<span class="per">/ Month</span>
</div>
<div class="features">
<ul>
<li>20 GB Disk Space</li>
<li>15 Domain Names</li>
<li>10 Email Address</li>
<li>Enhanced Security</li>
<li>Unlimited Support</li>
</ul>
</div>
<div class="order">
<a href="#0" class="button btn-hover">
<span>Order Now</span>
</a>
</div>
</div>
</div>
<!-- END PRICE LIST -->
<!-- START PRICE LIST -->
<div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
<div class="item">
<div class="type">
<h4>Premium</h4>
</div>
<div class="value">
<h3><span>$</span>80</h3>
<span class="per">/ Month</span>
</div>
<div class="features">
<ul>
<li>50 GB Disk Space</li>
<li>30 Domain Names</li>
<li>20 Email Address</li>
<li>Enhanced Security</li>
<li>Unlimited Support</li>
</ul>
</div>
<div class="order">
<a href="#0" class="button btn-hover">
<span>Order Now</span>
</a>
</div>
</div>
</div>
<!-- END PRICE LIST -->
</div>
</div>
<!-- END PRICE TABLE -->
</div>
</div>
</section>
<!-- ====== END PRICES ====== -->
<!-- ====== START PROCESS ====== -->
<section class="process padding">
<div class="container">
<!-- START PROCESS SECTION TITLE -->
<div class="row">
<div class="text-center col-lg-12">
<h2 class="heading-primary mb-5">Work Process</h2>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, numquam aut tenetur
fugiat cumque nostrum adipisci.</p>
</div>
</div>
<!-- END PROCESS SECTION TITLE -->
<!-- START PROCESS LIST -->
<div class="row">
<div class="col-lg-3 col-md-6 mx-auto">
<div class="p-list mb-md50">
<span class="icon"><i class="fa fa-lightbulb-o"></i></span>
<h6>Creative Ideas</h6>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
<!-- END PROCESS LIST -->
<!-- START PROCESS LIST -->
<div class="col-lg-3 col-md-6 mx-auto">
<div class="p-list mb-md50">
<span class="icon"><i class="fa fa-pencil-square-o"></i> </span>
<h6>Planning & Organization</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<!-- END PROCESS LIST -->
<!-- START PROCESS LIST -->
<div class="col-lg-3 col-md-6 mx-auto">
<div class="p-list mb-sm50">
<span class="icon"><i class="fa fa-database"></i></span>
<h6>Development</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<!-- END PROCESS LIST -->
<!-- START PROCESS LIST -->
<div class="col-lg-3 col-md-6 mx-auto">
<div class="p-list">
<span class="icon"><i class="fa fa-sitemap"></i></span>
<h6>Testing</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<!-- END PROCESS LIST -->
</div>
</div>
</section>
<!-- ====== END PROCESS ====== -->
<!-- ====== START TESTIMONIALS====== -->
<section class="test padding">
<div class="container">
<div class="row">
<div class=" offset-md-2 col-md-8 col-1g-12 offset-md-2 mx-auto">
<div class="testimonials text-center">
<div class="owl-carousel owl-theme">
<!-- START TESTIMONIAL -->
<div class="testimo">
<div class="client-area">
<div class="img">
<div class="author">
<img src="img/team/team-01.jpg" alt="testimonial-picture" />
</div>
</div>
<h6>Alex Smith</h6>
<span>Envato Customer</span>
</div>
<p>" Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nobis
assumenda nulla ullam ad quibusdam voluptatum, exercitationem autem sequi
excepturi. "</p>
</div>
<!-- END TESTIMONIAL -->
<!-- START TESTIMONIAL -->
<div class="testimo">
<div class="client-area">
<div class="img">
<div class="author">
<img src="img/team/team-02.jpg" alt="testimonial-picture" />
</div>
</div>
<h6>Sophia</h6>
<span>Envato Customer</span>
</div>
<p>" Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nobis
assumenda nulla ullam ad quibusdam voluptatum, exercitationem autem sequi
excepturi. "</p>
</div>
<!-- END TESTIMONIAL -->
<!-- START TESTIMONIAL -->
<div class="testimo">
<div class="client-area">
<div class="img">
<div class="author">
<img src="img/team/team-03.jpg" alt="testimonial-picture" />
</div>
</div>
<h6>James Smith</h6>
<span>Envato Customer</span>
</div>
<p>" Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nobis
assumenda nulla ullam ad quibusdam voluptatum, exercitationem autem sequi
excepturi. "</p>
</div>
<!-- END TESTIMONIAL -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== END TESTIMONIALS====== -->
<!-- ====== START BLOG ====== -->
<section class="blog padding" id="blog" data-scroll-index="6">
<div class="container">
<div class="row">
<!-- START BLOG SECTION TITLE -->
<div class="text-center">
<h2 class="heading-primary mb-5">Our Blog</h2>
<p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur,
dolores! Iure perspiciatis, minus modi ratione est maiores. Perferendis, porro aperiam.</p>
</div>
<!-- END BLOG SECTION TITLE -->
<!-- BLOG ITEM -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="blog-img">
<div class="post-date">
<span class="date">10</span>
<span class="month">jan</span>
</div>
<img src="img/hero-03.jpg" alt="blog-image" />
</div>
<div class="blog-item">
<div class="post-title">
<a href="#0">
<h3>5 Best Responsive Web Design Practices</h3>
</a>
</div>
<div class="post-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit minima placeat aut
obcaecati iusto qui.
</p>
<a href="#0" class="button">Read More<i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="headerhr mt-4"></div>
<div class="post-meta">
<ul>
<li>
<i class="fa fa-tags"></i>
<span>Web Design</span>
</li>
<li>
<i class="fa fa-book"></i>
<span>8 mins read</span>
</li>
<li>
<i class="fa fa-comment"></i>
<a href="#0">5</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END BLOG ITEM -->
<!-- BLOG ITEM -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="blog-img">
<div class="post-date">
<span class="date">23</span>
<span class="month">aug</span>
</div>
<img src="img/hero-04.jpg" alt="blog-image" />
</div>
<div class="blog-item">
<div class="post-title">
<a href="#0">
<h3> The Most Important Rule in UX Design </h3>
</a>
</div>
<div class="post-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maxime in consectetur.
</p>
<a href="#0" class="button">Read More<i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="headerhr mt-4"></div>
<div class="post-meta">
<ul>
<li>
<i class="fa fa-tags"></i>
<span>User Experience</span>
</li>
<li>
<i class="fa fa-book"></i>
<span>5 mins read</span>
</li>
<li>
<i class="fa fa-comment"></i>
<a href="#0">7</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END BLOG ITEM -->
<!-- BLOG ITEM -->
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<div class="blog-img">
<div class="post-date">
<span class="date">12</span>
<span class="month">mar</span>
</div>
<img src="img/hero-01.jpg" alt="blog-image" />
</div>
<div class="blog-item">
<div class="post-title">
<a href="#0">
<h3>5 Business Trends Set to Rule the Industry</h3>
</a>
</div>
<div class="post-content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi repudiandae itaque
enim architecto.
</p>
<a href="#0" class="button">Read More<i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="headerhr mt-4"></div>
<div class="post-meta">
<ul>
<li>
<i class="fa fa-tags"></i>
<span>Business & Tech</span>
</li>
<li>
<i class="fa fa-book"></i>
<span>9 mins read</span>
</li>
<li>
<i class="fa fa-comment"></i>
<a href="#0">5</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END BLOG ITEM -->
</div>
</div>
</section>
<!-- ====== END BLOG ====== -->
<!-- ====== START CLIENTS ====== -->
<div class="clients text-center">
<div class="container">
<div class="row">
<div class="col-md-12 owl-carousel owl-theme">
<div class="client-logo">
<a href="#0"><img src="img/client-logo.png" alt="logo-image"></a>
</div>
<div class="client-logo">
<a href="#0"><img src="img/creative-logo.png" alt="logo-image"></a>
</div>
<div class="client-logo">
<a href="#0"><img src="img/client-logo.png" alt="logo-image"></a>
</div>
<div class="client-logo">
<a href="#0"><img src="img/creative-logo.png" alt="logo-image"></a>
</div>
<div class="client-logo">
<a href="#0"><img src="img/client-logo.png" alt="logo-image"></a>
</div>
<div class="client-logo">
<a href="#0"><img src="img/creative-logo.png" alt="logo-image"></a>
</div>
</div>
</div>
</div>
</div>
<!-- ======== END CLIENTS ====== -->
<!-- ====== START CONTACT ====== -->
<section class="contact padding" id="contact" data-scroll-index="7">
<div class="container">
<!-- START CONTACT SECTION TITLE -->
<div class="text-center">
<h2 class="heading-primary mb-5"><span> Get In <span>Touch</span></h2>
<p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
aperiam consectetur rem odit in natus.</p>
</div>
<!-- END CONTACT SECTION TITLE -->
<!-- START INFO-->
<div class="row">
<div class="col-lg-5 mx-auto">
<ul class="info">
<li>
<i class="fa fa-map fa-fw"></i>
<h5><span>Address:</span></h5>
<p>2885 Walt Nuzum Farm Road, New York</p>
</li>
<li>
<i class="fa fa-phone fa-fw"></i>
<h5><span>Mobile:</span></h5>
<p>+516-892-6997, +585-457-5267</p>
</li>
<li>
<i class="fa fa-envelope fa-fw"></i>
<h5><span>Email:</span></h5>
<p>company@email.com</p>
</li>
<li>
<i class="fa fa-refresh fa-fw"></i>
<h5><span>Timing:</span></h5>
<p>Mon-Fri - 9:00 AM to 5:00 PM</p>
</li>
</ul>
</div>
<!-- END INFO -->
<!-- START CONTACT FORM -->
<div class="contact-form col-lg-7 mx-auto">
<form class="form" id="contact-form" method="post" action="contact.php">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input id="form_name" type="text" name="name" placeholder="Name *" required="required">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="form_email" type="email" name="email" placeholder="Email *" required="required">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="form_subject" type="text" name="subject" placeholder="Subject">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea id="form_message" name="message" placeholder="Message" rows="4"
required="required"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="button btn-hover">Send Message</button>
</div>
</div>
</div>
</form>
</div>
<!-- END CONTACT FORM -->
</div>
</div>
</section>
<!-- ====== END CONTACT ====== -->
<!-- ====== START MAP ====== -->
<!--Google map-->
<div id="map"><iframe src="https://www.amap.com/" width="100%" height="100%" frameborder="0" style="border:0" sandbox=""></iframe></div>
<!-- ====== END MAP ====== -->
<!-- ====== START FOOTER ====== -->
<section class="footer">
<div class="container">
<div class="row">
<!-- START MULTIMAX -->
<div class="col-lg-4 col-md-6 mb-sm-5 mb-3">
<h3 class="heading-tertiary mb-3">Multimax</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quos ipsa, soluta eum itaque nobis
quas sunt suscipit aliquid.</p>
</div>
<!-- END MULTIMAX -->
<!-- START QUICK LINKS -->
<div class="col-lg-2 col-md-6 mb-sm-5 mb-3">
<h3 class="heading-tertiary mb-3">Quick Links</h3>
<ul>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Blog</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">About Us</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Our story</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Forum</a>
</li>
</ul>
</div>
<!-- END QUICK LINKS -->
<!-- START SUPPORT -->
<div class="col-lg-2 col-md-6 mb-sm-5 mb-3">
<h3 class="heading-tertiary mb-3">Support</h3>
<ul>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">FAQ'S</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Privacy</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Policy</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Support</a>
</li>
<li><i class="fa fa-angle-double-right"></i>
<a href="#0">Documetation</a>
</li>
</ul>
</div>
<!-- END SUPPORT -->
<!-- START NEWSLETTER -->
<div class="col-lg-4 col-md-6 mb-sm-5 mb-3">
<h3 class="heading-tertiary mb-3">Subscribe to our Newsletter</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Id nobis
quas sunt suscipit aliquid.</p>
<form class="form mt-3">
<div class="form-check mb-3"> <label class="form-check-label"> <input type="checkbox" name="checkbox">
<small>Yes, I would like to receive communications by email.
</small></label>
</div>
<div class="input-group">
<input name="email" type="email" class="form-control" placeholder="Enter your email"
required>
<button class="btn" type="submit"><i class="fa fa-paper-plane"></i></button>
</div>
</form>
</div>
<!-- END NEWSLETTER -->
<hr class="clearfix w-100 color-dark">
<!-- START FOOTER BOTTOM -->
<div class="offset-md-3 col-md-6 offset-md-3">
<!-- START SOCIAL ICONS -->
<div class="social-links">
<ul>
<li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-linkedin fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-pinterest-p fa-fw"></i></a></li>
<li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
</ul>
</div>
<!-- END SOCIAL ICONS -->
<!-- START RIGHTS -->
<div class="copyright">
<h5> © Your Company Name 2024 | All Rights Reserved. <a target="_blank" href="#" title="网站模板大全">网站模板大全</a></h5>
</div>
<!-- END RIGHTS -->
</div>
<!-- END FOOTER BOTTOM -->
</div>
</div>
</section>
<!-- ====== END FOOTER ====== -->
<!-- ====== JS ====== -->
<!--jquery-3.3.1 js-->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- popper js -->
<script src="js/popper.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- scrollIt js -->
<script src="js/scrollIt.min.js"></script>
<!-- countTo js -->
<script src="js/jquery.countTo.js"></script>
<!-- filter js -->
<script src="js/jquery.filterizr.min.js"></script>
<!-- waypoints js -->
<script src="js/waypoints.min.js"></script>
<!-- Magnific Popup core JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- owl carousel js -->
<script src="js/owl.carousel.min.js"></script>
<!-- validator js -->
<script src="js/validator.js"></script>
<!-- coustom js -->
<script src="js/main.js"></script>
</body>
</html>由于代码篇幅过长 已上传到专栏源码里 点击自行下载即可~
不明白的可以留言 随时在~
结束啦🙇：
更多干货🎁
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!
📣以上内容技术相关问题😈欢迎一起交流学习💌嘉vx+18634371151 👇🏻👇🏻👇🏻
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
