Skip to content

CS420 - Web Development for Portable Devices

5 Topics 9 Posts
  • 0 Votes
    2 Posts
    222 Views
    Reda AamirR

    ideas share car do plz

  • 0 Votes
    2 Posts
    137 Views
    zaasmiZ

    @cyberian said in CS420 Assignment 2 Solution and Discussion:

    You are required to develop an HTML5 based webpage which draws an Animated Solar System (i.e. moon revolves around earth and earth revolves around the sun) on canvas.
    Here is a screenshot of a sample page.

    Your Task is to make such a page suitable for portable devices. You can use concepts of HTML5, CSS and JavaScript etc.

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS420 - Assignment # 2</title> </head> <body> <canvas id="canvas" width="1000" height="1000"></canvas> <script> var sun = new Image(); var moon = new Image(); var earth = new Image(); function init() { sun.src = 'images/canvas_sun.png'; moon.src = 'images/canvas_moon.png'; earth.src = 'images/canvas_earth.png'; window.requestAnimationFrame(draw); } function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0, 0, 800, 800); // clear canvas ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(400, 400); // Earth var time = new Date(); ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); ctx.translate(205, 0); ctx.fillRect(0, -12, 40, 24); // Shadow ctx.drawImage(earth, -12, -12); // Moon ctx.save(); ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); ctx.translate(0, 28.5); ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(400, 400, 205, 0, Math.PI * 2, false); // Earth orbit ctx.stroke(); ctx.drawImage(sun, 0, 0, 800, 800); window.requestAnimationFrame(draw); } init(); </script> </body> </html>

    images folder
    c513141f-d0e8-47e0-b866-045535ab5ee1-image.png

    183cd962-9200-45ca-8868-cc3297b420b2-image.png
    images:
    canvas_sun.png canvas_moon.png canvas_earth.png

  • 0 Votes
    1 Posts
    964 Views
    No one has replied
  • 0 Votes
    1 Posts
    334 Views
    No one has replied
  • 0 Votes
    3 Posts
    314 Views
    zareenZ

    Solution File
    46bc9b76-6c05-4255-8834-6d661f464f60-image.png

    home.html <!--Template Name: foodfries File Name: home.html Author Name: ThemeVault Author URI: http://www.themevault.net/ License URI: http://www.themevault.net/license/--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="images/favicon.png"/> <title>FoodFries</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/style.css" rel="stylesheet"> <link href="css/responsive.css" rel="stylesheet"> <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="fonts/website-font/stylesheet.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/counterup.min.js" type="text/javascript"></script> <script src="js/waypoints.min.js" type="text/javascript"></script> <script src="js/custom.js"></script> </head> <body> <header id="home"> <div class="main-nav"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> <img class="img-responsive" src="images/logo.png" alt="logo"> </a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="scroll"><a href="#home">Home</a></li> <li class="scroll"><a href="#about-us">About Us</a></li> <li class="scroll"><a href="#menu">Menu</a></li> <li class="scroll"><a href="#services">Services</a></li> <li class="scroll"><a href="#team">Team</a></li> <li class="scroll"><a href="#blog">Blog</a></li> <li class="scroll"><a href="#contact">Contact</a></li> </ul> </div> </div> </nav> </div><!--/#main-nav--> <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="item active" style="background-image: url(images/banner.jpg)"> <div class="caption"> <h1>Welcome to <span>FoodFries</span></h1> <p>We serve only the freshest ingredients!</p> <a class="btn tv-site-btn" href="#services">Book Your Table</a> </div> </div> <div class="item" style="background-image: url(images/banner2.jpg)"> <div class="caption"> <h1>Welcome to <span>FoodFries</span></h1> <p>We serve only the freshest ingredients!</p> <a class="btn tv-site-btn" href="#services">Book Your Table</a> </div> </div> <div class="item" style="background-image: url(images/banner3.jpg)"> <div class="caption"> <h1>Welcome to <span>FoodFries</span></h1> <p>We serve only the freshest ingredients!</p> <a class="btn tv-site-btn" href="#services">Book Your Table</a> </div> </div> </div> <a class="tv-left-control" href="#home-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="tv-right-control" href="#home-slider" data-slide="next"><i class="fa fa-angle-right"></i></a> <a id="tohash" href="#about-us"><i class="fa fa-angle-down"></i></a> </div><!--#home-slider--> </header> <section class="tv-paddingT100 tv-bgbanner" id="about-us"> <div class="container"> <div class="row"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>We Are FoodFries</h2> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-about-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et enim id ipsum vulputate egestas a id lorem. Maecenas viverra magna ut elit laoreet laoreet.</p> <p><strong>" Vestibulum dignissim ipsum eu malesuada hendrerit. "</strong></p> <div class="tv-chef-details"> <img src="images/chef.jpg" alt="chef" class="img-responsive"> <h4>Anna Taylor</h4> <p>Head Chief</p> </div> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-about-image"> <img src="images/about.jpg" alt="about" class="img-resposive"> </div> </div> </div> </div> </section> <section class="tv-paddingT100 tv-bgbanner" id="menu"> <div class="container"> <div class="row"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>Our Special Menu </h2> </div> </div> <div class="row"> <div class="tv-menu"> <div class="col-md-12 col-sm-12 col-xs-12 tv-whitebgclr"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#breakfast">BreakFast</a></li> <li><a data-toggle="tab" href="#lunch">Lunch</a></li> <li><a data-toggle="tab" href="#dinner">Dinner</a></li> <li><a data-toggle="tab" href="#drinks">Drinks</a></li> <li><a data-toggle="tab" href="#dessert">Dessert</a></li> </ul> <div class="tab-content"> <div id="breakfast" class="tab-pane fade in active"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item1.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item2.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item3.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item4.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item5.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item6.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> </div> </div> <div id="lunch" class="tab-pane fade"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item7.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item8.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item9.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item10.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item11.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item12.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> </div> </div> <div id="dinner" class="tab-pane fade"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item13.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item14.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item9.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item10.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item11.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item7.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> </div> </div> <div id="drinks" class="tab-pane fade"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item15.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item16.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item17.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item18.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item19.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc "> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item20.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> </div> </div> <div id="dessert" class="tab-pane fade"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item21.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item22.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item23.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item24.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item25.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6 width-100perc"> <div class="tv-menu-items"> <div class="tv-menu-item-img"> <img src="images/menu-item26.jpg" alt="menu-item" class="img-responsive"> </div> <div class="tv-menu-item-name"> <h4>Food Item Name</h4> <span class="tv-menu-item-price"> <del>$6.00</del> <ins>$4.00</ins> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="tv-paddingT100 tv-bgbanner" id="services"> <div class="container"> <div class="row"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>Our Best Service</h2> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-service-details"> <h3>Ingredient Supply</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet blandit urna, quis interdum justo. Cras facilisis orci eget augue gravida, ac interdum ipsum dignissim.</p> <a href="#" class="tv-site-btn2">Read More</a> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-service-image"> <img src="images/service1.jpg" alt="service" class="img-responsive"> </div> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-service-image"> <img src="images/service2.jpg" alt="service" class="img-responsive"> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-service-details"> <h3>Event Order</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet blandit urna, quis interdum justo. Cras facilisis orci eget augue gravida, ac interdum ipsum dignissim.</p> <a href="#" class="tv-site-btn2">Read More</a> </div> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-service-details"> <h3>Satisfied Customers</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet blandit urna, quis interdum justo. Cras facilisis orci eget augue gravida, ac interdum ipsum dignissim.</p> <a href="#" class="tv-site-btn2">Read More</a> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-service-image"> <img src="images/service3.jpg" alt="service" class="img-responsive"> </div> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-service-image"> <img src="images/service4.jpg" alt="service" class="img-responsive"> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-service-details"> <h3>Satisfied Employees</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet blandit urna, quis interdum justo. Cras facilisis orci eget augue gravida, ac interdum ipsum dignissim.</p> <a href="#" class="tv-site-btn2">Read More</a> </div> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-service-details"> <h3>Various Menus</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet blandit urna, quis interdum justo. Cras facilisis orci eget augue gravida, ac interdum ipsum dignissim.</p> <a href="#" class="tv-site-btn2">Read More</a> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-service-image"> <img src="images/service5.jpg" alt="service" class="img-responsive"> </div> </div> </div> </div> <div class="tv-paddingT100 container-fluid"> <div class="row"> <div class="tv-counter-banner"> <div class="tv-counter-lists"> <div class="col-md-7 col-sm-12 col-xs-12"> <div class="tv-counter-box"> <h2>We are born to serve you</h2> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-4 width-100"> <div class="tv-counter-details"> <img src="images/dish.png" alt="dish"> <h4>Amazing dishes</h4> <h2 class='counter' data-slno='1' data-min='0' data-max='3000' data-delay='.5' data-increment=4>3000</h2> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 width-100"> <div class="tv-counter-details"> <img src="images/bread.png" alt="bread"> <h4>Satisfied staff</h4> <h2 class='counter' data-slno='1' data-min='0' data-max='1500' data-delay='8' data-increment="1">1500</h2> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 width-100"> <div class="tv-counter-details"> <img src="images/half-hour.png" alt="half-n-hour"> <h4>Work hour</h4> <h2 class='counter' data-slno='1' data-min='0' data-max='255' data-delay='.5' data-increment="11">255</h2> </div> </div> </div> </div> </div> <div class="col-md-5 col-sm-12 col-xs-12"> <div class="tv-counter-image"> <img src="images/counter-img.jpg" class="img-responsive" alt="counter-img"> </div> </div> </div> </div> </div> </div> </section> <section class="tv-paddingT100 tv-bgbanner" id="team"> <div class="container"> <div class="row"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>Our Awesome Chef </h2> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-6 width-100perc"> <div class="tv-chef-content"> <div class="tv-pos-rel"> <div class="tv-chef-image"> <img src="images/chef1.jpg" alt="chef" class="img-responsive"> </div> <div class="tv-overlay"> <div class="text"> <ul> <li> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-google" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> <div class="tv-chef-name"> <h4>Anna Taylor</h4> <p>Head Chief</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-6 width-100perc"> <div class="tv-chef-content"> <div class="tv-pos-rel"> <div class="tv-chef-image"> <img src="images/chef2.jpg" alt="chef" class="img-responsive"> </div> <div class="tv-overlay"> <div class="text"> <ul> <li> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-google" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> <div class="tv-chef-name"> <h4>Anita Golden</h4> <p>Head Chief</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-6 width-100perc"> <div class="tv-chef-content"> <div class="tv-pos-rel"> <div class="tv-chef-image"> <img src="images/chef3.jpg" alt="chef" class="img-responsive"> </div> <div class="tv-overlay"> <div class="text"> <ul> <li> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-google" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> <div class="tv-chef-name"> <h4>Benderd Dimitor</h4> <p>Head Chief</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-6 width-100perc"> <div class="tv-chef-content"> <div class="tv-pos-rel"> <div class="tv-chef-image"> <img src="images/chef4.jpg" alt="chef" class="img-responsive"> </div> <div class="tv-overlay"> <div class="text"> <ul> <li> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-google" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> <div class="tv-chef-name"> <h4>Jules Boutin</h4> <p>Head Chief</p> </div> </div> </div> </div> </div> <div class="tv-paddingT100 container-fluid"> <div class="row"> <div class="tv-counter-banner"> <div id="tv-testimonial-Carousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="tv-client-list"> <div class="tv-client-info"> <div class="tv-client-img"> <i class="fa fa-quote-right"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec posuere augue, in pharetra libero. Integer placerat, massa vitae convallis viverra, nibh quam malesuada felis, quis placerat risus mauris id diam. Duis imperdiet ullamcorper risus rhoncus sodales.</p> <h4> <img src="images/client1.jpg" class="img-circle" alt="client"> Alice Lengthorn </h4> </div> </div> </div> <div class="item"> <div class="tv-client-list"> <div class="tv-client-info"> <div class="tv-client-img"> <i class="fa fa-quote-right"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec posuere augue, in pharetra libero. Integer placerat, massa vitae convallis viverra, nibh quam malesuada felis, quis placerat risus mauris id diam. Duis imperdiet ullamcorper risus rhoncus sodales.</p> <h4> <img src="images/client2.jpg" class="img-circle" alt="client"> Alice Lengthorn </h4> </div> </div> </div> <div class="item"> <div class="tv-client-list"> <div class="tv-client-info"> <div class="tv-client-img"> <i class="fa fa-quote-right"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec posuere augue, in pharetra libero. Integer placerat, massa vitae convallis viverra, nibh quam malesuada felis, quis placerat risus mauris id diam. Duis imperdiet ullamcorper risus rhoncus sodales.</p> <h4> <img src="images/client3.jpg" class="img-circle" alt="client"> Alice Lengthorn </h4> </div> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#tv-testimonial-Carousel" data-slide="prev"> <i class="fa fa-angle-double-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#tv-testimonial-Carousel" data-slide="next"> <i class="fa fa-angle-double-right" aria-hidden="true"></i> </a> </div> </div> </div> </div> </section> <section class="tv-paddingT100 tv-bgbanner" id="blog"> <div class="container"> <div class="row"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>Feature Blog</h2> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-blog-image"> <img src="images/blog3.jpg" alt="blog" class="img-responsive"> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-blog-details"> <h3><a>Easy Homemade Shahi Tukda Recipe</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> <ul class="tv-blog-info"> <li> <a class="link" href="#" tabindex="0"> <span class="author-label">By </span> <span class="author-text">Ana Swovasky</span> </a> </li> <li>/</li> <li> <a class="link date" href="#" tabindex="0">January 19, 2017</a> </li> </ul> <a class="tv-site-btn2" href="#">Read More</a> </div> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-blog-details"> <h3><a>Easy Homemade Shahi Tukda Recipe</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> <ul class="tv-blog-info"> <li> <a class="link" href="#" tabindex="0"> <span class="author-label">By </span> <span class="author-text">Ana Swovasky</span> </a> </li> <li>/</li> <li> <a class="link date" href="#" tabindex="0">January 19, 2017</a> </li> </ul> <a class="tv-site-btn2" href="#">Read More</a> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-blog-image"> <img src="images/blog2.jpg" alt="blog" class="img-responsive"> </div> </div> </div> <div class="row tv-row-flex row-flex-wrap"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="tv-blog-image"> <img src="images/blog1.jpg" alt="blog" class="img-responsive"> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12 tv-whitebgclr"> <div class="tv-blog-details"> <h3><a>Easy Homemade Shahi Tukda Recipe</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> <ul class="tv-blog-info"> <li> <a class="link" href="#" tabindex="0"> <span class="author-label">By </span> <span class="author-text">Ana Swovasky</span> </a> </li> <li>/</li> <li> <a class="link date" href="#" tabindex="0">January 19, 2017</a> </li> </ul> <a class="tv-site-btn2" href="#">Read More</a> </div> </div> </div> </section> <section class="tv-paddingT100 tv-bgbanner" id="contact"> <div class="container"> <div class="row"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>Get In Touch</h2> </div> </div> <div class="row"> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="tv-contact-details tv-whitebgclr"> <h2 class="text-right"><i class="fa fa-map-marker" aria-hidden="true"></i></h2> <h3>Address</h3> <p>701 Old York Drive Richmond USA.</p> </div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="tv-contact-details tv-whitebgclr"> <h2 class="text-right"><i class="fa fa-phone" aria-hidden="true"></i></h2> <h3>Number</h3> <a href="tel:+1-202-555-0100">+1-202-555-0100</a> </div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="tv-contact-details tv-whitebgclr"> <h2 class="text-right"><i class="fa fa-envelope" aria-hidden="true"></i></h2> <h3>Mail</h3> <a href="mailto:[email protected]">[email protected]</a> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="tv-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101257.12284776446!2d-77.56330202084071!3d37.52477641775529!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b111095799c9ed%3A0xbfd83e6de2423cc5!2sRichmond%2C+VA%2C+USA!5e0!3m2!1sen!2sin!4v1488891294599" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> <div class="tv-paddingT100 container-fluid"> <div class="row"> <div class="tv-contact-banner"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="tv-online-restu"> <div class="tv-block-heading"> <h5>Latest foody news</h5> <h2>Online Reservation</h2> </div> <p>We are willing to help you make the reservation online or call us directly <a href="tel:+1-202-555-0100">+1-202-555-0100</a></p> <div class="tv-contact-form"> <form name="sentMessage" id="contactForm" method="get"> <div class="row"> <div class="tv-contact-menu"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group"> <input type="text" id="name" class="form-control placeholder-fix" placeholder="Name" required="" aria-invalid="false"> </div> <div class="form-group"> <input type="email" id="contact" class="form-control placeholder-fix" placeholder="Email" required=""> </div> <div class="form-group"> <input type="text" id="email" class="form-control placeholder-fix" placeholder="Phone Number" required=""> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group"> <textarea name="message" id="message" class="form-control placeholder-fix" rows="5" placeholder="Message" required="" aria-invalid="false"></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="buttons text-center"> <button type="submit" class="tv-site-btn">Send Meassage</button> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="tv-footer-content"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="tv-footer-about text-center"> <img src="images/logo3.png" alt="logo"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet vestibulum orci non aliquet. Morbi finibus, eros vel imperdiet tincidunt, nunc quam tempor quam, eu finibus quam nunc vel metus. Vivamus aliquet est quis tortor venenatis, eget ullamcorper risus venenatis.</p> </div> <div class="tv-footer-address"> <ul> <li><p>701 Old York Drive Richmond USA.</p></li> <li><a href="tel:+1-202-555-0100">+1-202-555-0100</a></li> <li><a href="mailto:[email protected]">[email protected]</a></li> </ul> </div> <div class="tv-footer-social-icons"> <ul> <li> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-pinterest" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-dribbble" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-google" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="tv-footer-copyright"> <div class="container"> <div class="row"> <div class="col-xs-12"> <!--Do not remove Backlink from footer of the template. To remove it you can purchase the Backlink--> <p>&copy; 2017 All right reserved. Designed by <a href="http://www.themevault.net/" target="_blank">ThemeVault.</a></p> </div> </div> </div> </div> </footer> <a id="back-to-top" class="scrollTop tv-back-to-top" href="javascript:void(0);" style="display: none;"> <i class="fa fa-caret-up" aria-hidden="true"></i> </a> <script> jQuery(document).ready(function ($) { $('.counter').counterUp({ delay: 10, time: 1000 }); }); </script> <script type="text/javascript" src="js/wow.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>

    foodfries.zip