You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
9.3 KiB
306 lines
9.3 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Home</title> |
|
<!--Custom Theme files--> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<meta name="keywords" content="" /> |
|
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> |
|
<!-- Custom Theme files --> |
|
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> |
|
<!--web-fonts--> |
|
<link href='http://fonts.useso.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" /> |
|
<!--//web-fonts--> |
|
<!-- js --> |
|
<script src="js/jquery.min.js"></script> |
|
<script type="text/javascript" src="js/jquery.mmenu.min.all.js?v=5.4.4"></script> |
|
<!-- //js --> |
|
<!-- chart --> |
|
<script src="js/Chart.js"></script> |
|
<!-- //chart --> |
|
</head> |
|
<body> |
|
<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"> |
|
<h3>13</h3> |
|
<p>Remaining tasks </p> |
|
</div> |
|
<div class="banner-bottom-right"> |
|
<h3>25</h3> |
|
<p>Completed tasks</p> |
|
</div> |
|
<div class="clear"> </div> |
|
</div> |
|
<div class="work-text"> |
|
<h3>TODAY</h3> |
|
<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"> |
|
<h3>Welcome, <span>Jennifer</span></h3> |
|
<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"> |
|
<h3>Keep track of your tasks</h3> |
|
<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"> |
|
<h3>Team meeting remember</h3> |
|
<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"> |
|
<h3>Your tasks keep track of </h3> |
|
<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"> |
|
<h3>Keep track of your tasks </h3> |
|
<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> |
|
<script src="js/responsiveslides.min.js"></script> |
|
|
|
</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> |
|
<h3><span>Jennifer</span> Wilson</h3> |
|
</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> |
|
|
|
</body> |
|
</html> |