科技感个人简历信息网页模板下载

帝吧出征 寸草不生 2019-12-10 726 阅读

代码部署教程

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='//fonts.googleapis.com/css?family=Jura:400,300,500,600' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css?v=5.4.4" />

2. 引入JS

<script src="js/jquery-1.11.1.min.js">
</script>

<script type="text/javascript" src="js/jquery.mmenu.min.all.js?v=5.4.4">

</script>

<script src="js/Chart.js">

</script>

<script src="js/responsiveslides.min.js">

</script>

3. HTML代码

<h1>
Mobile material</h1>

<!-- main -->

<div class="main">

<!--login-profile-->

<div class="login-form">

<div class="banner">

<div class="header-top">

<ul>

<li>

<span>

</span>

</li>

<li>

<span class="chrg">

</span>

</li>

<li>

10:00 </li>

</ul>

</div>

<div class="banner-text">

<div class="menu">

<span class="menu-icon">

<a href="#">

<img src="images/menu-icon.png" alt=""/>

</a>

</span>

<ul class="nav1">

<li>

<a href="#">

Home</a>

</li>

<li>

<a href="#">

About</a>

</li>

<li>

<a href="#">

Services</a>

</li>

<li>

<a href="#">

Gallery</a>

</li>

<li>

<a href="#">

Contact</a>

</li>

</ul>

<!-- script-for-menu -->

<script>

$( "span.menu-icon" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>

<!-- /script-for-menu -->

</div>

<div class="title">

<div class="title-left">

<img src="images/img1.jpg" alt=""/>

</div>

<div class="title-right">

<h2>

Vestibulum ante </h2>

<h6>

UI/UX Designer</h6>

</div>

<div class="clear">

</div>

</div>

</div>

</div>

<div class="clear">

</div>

<div class="banner-bottom">

<div class="banner-bottom-left">

<h2>

13</h2>

<p>

Remaining tasks </p>

</div>

<div class="banner-bottom-right">

<h2>

25</h2>

<p>

Completed tasks</p>

</div>

<div class="clear">

</div>

</div>

<div class="work-text">

<h2>

TODAY</h2>

<section class="ac-container">

<div>

<input id="ac-1" name="accordion-1" type="checkbox" />

<label for="ac-1" class="grid1">

<i>

</i>

Finish landing page concept</label>

<article class="ac-small">

<p>

Lorem Ipsum is simply dummy text of the printing and industry.</p>

</article>

</div>

<div>

<input id="ac-2" name="accordion-1" type="checkbox" />

<label for="ac-2" class="grid2">

<i>

</i>

Design app illustrations</label>

<article class="ac-small">

<p>

Lorem Ipsum is simply dummy text of the printing and industry.</p>

</article>

</div>

<div>

<input id="ac-3" name="accordion-1" type="checkbox" />

<label for="ac-3" class="grid3">

<i>

</i>

Javascript training</label>

<article class="ac-small">

<p>

Lorem Ipsum is simply dummy text of the printing and industry.</p>

</article>

</div>

<div>

<input id="ac-4" name="accordion-1" type="checkbox" />

<label for="ac-4" class="grid4">

<i>

</i>

Surprise Party for Meet</label>

<article class="ac-small">

<p>

Lorem Ipsum is simply dummy text of the printing and industry.</p>

</article>

</div>

</section>

</div>

</div>

<!--login-profile-->

<!--signin-form-->

<div class="signin-form profile">

<h2>

Welcome, <span>

Jennifer</span>

</h2>

<img src="images/img1.jpg" alt=""/>

<div class="login-form">

<form>

<input type="text" placeholder="user.name55@gmail.com" required="">

<input type="password" placeholder="* * * * * * * * * *" required="">

<input type="submit" value="LOGIN">

</form>

</div>

<p>

<a href="#">

CREATE NEW ACCOUNT</a>

</p>

</div>

<!--//signin-form-->

<!--mobile-slider-->

<div class=" profile">

<div class="banner">

<div class="header-top">

<ul>

<li>

<span>

</span>

</li>

<li>

<span class="chrg">

</span>

</li>

<li>

10:00 </li>

</ul>

</div>

<div class="banner-text">

<section class="ac-container">

<div class="menu">

<input id="ac-5" name="accordion-1" type="checkbox" />

<label for="ac-5">

<img src="images/menu-icon.png" alt=""/>

</label>

<article class="ac-medium">

<ul class="nav">

<li>

<a href="#">

Home</a>

</li>

<li>

<a href="#">

About</a>

</li>

<li>

<a href="#">

Services</a>

</li>

<li>

<a href="#">

Gallery</a>

</li>

<li>

<a href="#">

Contact</a>

</li>

</ul>

</article>

</div>

</section>

<div class="title">

<div class="title-left">

<img src="images/img1.jpg" alt=""/>

</div>

<div class="title-right">

<h2>

Vestibulum ante </h2>

<h6>

UI/UX Designer</h6>

</div>

<div class="clear">

</div>

</div>

</div>

</div>

<div class="profile-slider">

<script>

// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 400,
namespace: "callbacks"
});
});
</script>

<div class="callbacks_container">

<ul class="rslides" id="slider4">

<li>

<div class="slider-text">

<h2>

Keep track of your tasks</h2>

<p>

Never miss an appointment, never forget about your daily team meeting and remember when your favourite team. </p>

</div>

</li>

<li>

<div class="slider-text">

<h2>

Team meeting remember</h2>

<p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s remember when your team is playing. </p>

</div>

</li>

<li>

<div class="slider-text">

<h2>

Your tasks keep track of </h2>

<p>

Never miss an appointment, never forget about your daily team meeting and remember when your favourite team. </p>

</div>

</li>

<li>

<div class="slider-text">

<h2>

Keep track of your tasks </h2>

<p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s remember when your team is playing. </p>

</div>

</li>

</ul>

<div class="clear">

</div>

</div>

<a href="#" class="skip">

SKIP TUTORIAL </a>

</div>

</div>

<!--//mobile-slider-->

<!--iframe-Push-Menu-->

<div class="mobile profile">

<iframe src="about.html">

</iframe>

</div>

<!--//iframe-Push-Menu-->

<!--login-graph-->

<div class="mobile-graph profile">

<div class="banner banner1">

<div class="header-top">

<ul>

<li>

<span>

</span>

</li>

<li>

<span class="chrg">

</span>

</li>

<li>

10:00 </li>

</ul>

</div>

<div class="banner-text">

<div class="menu menu-left">

<section class="ac-container">

<input id="ac-6" name="accordion-1" type="checkbox" />

<label for="ac-6">

<img src="images/menu-icon.png" alt=""/>

</label>

<article class="ac-medium">

<ul class="nav">

<li>

<a href="#">

Home</a>

</li>

<li>

<a href="#">

About</a>

</li>

<li>

<a href="#">

Services</a>

</li>

<li>

<a href="#">

Gallery</a>

</li>

<li>

<a href="#">

Contact</a>

</li>

</ul>

</article>

</section>

</div>

<div class="menu-right">

<a href="#">

<span class="icons icn4">

</span>

</a>

</div>

<div class="clear">

</div>

<h2>

<span>

Jennifer</span>

Wilson</h2>

</div>

</div>

<div class="graph-info">

<div class="graph-text">

<ul>

<li>

<span class="dott">

</span>

Design </li>

<li>

<span class="dott green">

</span>

CSS</li>

<li>

<span class="dott blue">

</span>

JavaScript </li>

</ul>

</div>

<div class="month-graph effect21">

<canvas id="line" height="195px" width="400px" style="width:300px; height: 300px;">

</canvas>

<script>

var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(135, 138, 238, 0.88)",
strokeColor : "rgba(135, 138, 238, 0.85)",
pointColor : "rgba(135, 138, 238, 0.85)",
data : [70,80,60,75,90,75,100]
},
{
fillColor : "rgba(87, 226, 201, 0.88)",
strokeColor : "rgba(87, 226, 201, 0.82)",
pointColor : "rgba(87, 226, 201, 0.82)",
data : [70,60,72,61,75,59,80]
},
{
fillColor : "rgba(248, 246, 120, 0.88)",
strokeColor : "rgba(248, 246, 120, 0.81)",
pointColor : "rgba(248, 246, 120, 0.81)",
data : [50,65,51,67,52,64,50]
}
]
}
var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
</script>

</div>

</div>

</div>

<!--//login-graph-->

</div>

<div class="copyright">

<p>

&copy; 2016 Mobile material . All rights reserved | Template by <a href="http://cxvn.com/" target="_blank" >

W3layouts</a>

</p>

</div>

演示地址

最新游戏