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

代码部署教程

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>