Commit 4e69e1f591ce23f3c70182ed811a011be7bfe9e6
1 parent
9a2a1a90
remove 无用文件
Showing
49 changed files
with
2 additions
and
3058 deletions
404.html deleted
| 1 | -<!Doctype html> | ||
| 2 | -<html class="no-js" lang=""> | ||
| 3 | - <head> | ||
| 4 | - <meta charset="utf-8"> | ||
| 5 | - <meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| 6 | - <title>Ruby - Responsive Corporate Tempalte</title> | ||
| 7 | - <meta name="description" content=""> | ||
| 8 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 9 | - | ||
| 10 | - <link rel="icon" href="img/header-logo1.png"> | ||
| 11 | - <!-- Place favicon.ico in the root directory --> | ||
| 12 | - | ||
| 13 | - <!-- Google Fonts --> | ||
| 14 | - <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> | ||
| 15 | - | ||
| 16 | - <link rel="stylesheet" href="css/bootstrap.min.css"> | ||
| 17 | - <link rel="stylesheet" href="css/slicknav.min.css"> | ||
| 18 | - <link rel="stylesheet" href="css/bootstrap-theme.min.css"> | ||
| 19 | - <link rel="stylesheet" href="css/owl.carousel.min.css"> | ||
| 20 | - <link rel="stylesheet" href="css/owl.theme.default.min.css"> | ||
| 21 | - <link rel="stylesheet" href="css/animate.min.css"> | ||
| 22 | - <link rel="stylesheet" href="css/animate-text.css"> | ||
| 23 | - <link rel="stylesheet" href="css/magnific-popup.css"> | ||
| 24 | - <link rel="stylesheet" href="css/font-awesome.min.css"> | ||
| 25 | - | ||
| 26 | - <!-- Ruby CSS --> | ||
| 27 | - <link rel="stylesheet" href="css/normalize.css"> | ||
| 28 | - <link rel="stylesheet" href="style.css"> | ||
| 29 | - <link rel="stylesheet" href="css/responsive.css"> | ||
| 30 | - | ||
| 31 | - <!-- Color CSS --> | ||
| 32 | - <link rel="stylesheet" href="css/color/color7.css"> | ||
| 33 | - <!--<link rel="stylesheet" href="css/color/color1.css">--> | ||
| 34 | - <!--<link rel="stylesheet" href="css/color/color2.css">--> | ||
| 35 | - <!--<link rel="stylesheet" href="css/color/color3.css">--> | ||
| 36 | - <!--<link rel="stylesheet" href="css/color/color4.css">--> | ||
| 37 | - <!--<link rel="stylesheet" href="css/color/color5.css">--> | ||
| 38 | - <!--<link rel="stylesheet" href="css/color/color6.css">--> | ||
| 39 | - <!--<link rel="stylesheet" href="css/color/color8.css">--> | ||
| 40 | - <!--<link rel="stylesheet" href="css/color/color9.css">--> | ||
| 41 | - | ||
| 42 | - <link rel="stylesheet" href="#" id="colors"> | ||
| 43 | - | ||
| 44 | - </head> | ||
| 45 | - <body> | ||
| 46 | - | ||
| 47 | - <div class="color-plate "> | ||
| 48 | - <a class="icon"><i class="fa fa-cog fa-spin"></i></a> | ||
| 49 | - <h2>Ruby Color</h2> | ||
| 50 | - <div class="color-head"> | ||
| 51 | - <span class="color1"></span> | ||
| 52 | - <span class="color2"></span> | ||
| 53 | - <span class="color3"></span> | ||
| 54 | - <span class="color4"></span> | ||
| 55 | - <span class="color5"></span> | ||
| 56 | - <span class="color6"></span> | ||
| 57 | - <span class="color7"></span> | ||
| 58 | - <span class="color8"></span> | ||
| 59 | - <span class="color9"></span> | ||
| 60 | - </div> | ||
| 61 | - </div> | ||
| 62 | - | ||
| 63 | - <!-- Header Area --> | ||
| 64 | - <header id="header" class="header"> | ||
| 65 | - <!-- Header Inner --> | ||
| 66 | - <div class="header-inner"> | ||
| 67 | - <div class="container"> | ||
| 68 | - <div class="row"> | ||
| 69 | - <div class="col-md-3 col-sm-2 col-xs-2"> | ||
| 70 | - <div class="logo"> | ||
| 71 | - <a href="index.html"><img src="images/logo.png" alt="logo.png"></a> | ||
| 72 | - </div> | ||
| 73 | - </div> | ||
| 74 | - <div class="col-md-9 col-sm-10"> | ||
| 75 | - <div class="mobile-menu"></div> | ||
| 76 | - <nav class="navbar navbar-default"> | ||
| 77 | - <div class="collapse navbar-collapse"> | ||
| 78 | - <ul id="nav" class="nav navbar-nav"> | ||
| 79 | - <li class="current"><a href="#slider">home</a> | ||
| 80 | - </li> | ||
| 81 | - <li><a href="#Services">Services</a></li> | ||
| 82 | - <li><a href="#latest-works">portfolio<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 83 | - <ul class="dropdown"> | ||
| 84 | - <li><a href="portfolio.html">Portfolio</a></li> | ||
| 85 | - <li><a href="portfolio-single.html">portfolio-single</a></li> | ||
| 86 | - </ul> | ||
| 87 | - </li> | ||
| 88 | - <li><a href="#blog">Blogs<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 89 | - <ul class="dropdown"> | ||
| 90 | - <li><a href="blog.html">Blog Archive</a></li> | ||
| 91 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 92 | - </ul> | ||
| 93 | - </li> | ||
| 94 | - <li><a href="#team">Team</a></li> | ||
| 95 | - <li><a href="#">Pages <i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 96 | - <ul class="dropdown"> | ||
| 97 | - <li><a href="404.html">Error 404</a></li> | ||
| 98 | - <li><a href="mail-success.html">Mail Success</a></li> | ||
| 99 | - </ul> | ||
| 100 | - </li> | ||
| 101 | - <li><a href="#contact">Contact</a></li> | ||
| 102 | - </ul> | ||
| 103 | - </div> | ||
| 104 | - </nav> | ||
| 105 | - </div> | ||
| 106 | - </div> | ||
| 107 | - </div> | ||
| 108 | - </div> | ||
| 109 | - </header> | ||
| 110 | - <!--/ End Header Area --> | ||
| 111 | - | ||
| 112 | - | ||
| 113 | - <!--breadcrumb --> | ||
| 114 | - <div class="breadcrumb" data-stellar-background-ratio="0.5"> | ||
| 115 | - <div class="container"> | ||
| 116 | - <div class="row"> | ||
| 117 | - <div class="col-md-12"> | ||
| 118 | - <div class="breadcrumb-text"> | ||
| 119 | - <h2>error 404</h2> | ||
| 120 | - <ul> | ||
| 121 | - <li><a href="index.html">Home</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i></li> | ||
| 122 | - <li><a href="blog-archive.html">error 404</a></li> | ||
| 123 | - </ul> | ||
| 124 | - </div> | ||
| 125 | - </div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - </div> | ||
| 129 | - <!--/ End breadcrumb --> | ||
| 130 | - | ||
| 131 | - | ||
| 132 | - <!-- 404 Error Page --> | ||
| 133 | - <section class="error section"> | ||
| 134 | - <div class="table"> | ||
| 135 | - <div class="table-cell"> | ||
| 136 | - <div class="container"> | ||
| 137 | - <div class="row"> | ||
| 138 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 139 | - <div class="error-left"> | ||
| 140 | - <h2>404</h2> | ||
| 141 | - <p><span>Opps!</span>Page Not Found!</p> | ||
| 142 | - <p class="p2">Sorry the Page Could not be Found here.<br>Try using the button below to go to main page of the site</p> | ||
| 143 | - <div class="button-head"> | ||
| 144 | - <div class="button"> | ||
| 145 | - <span></span> | ||
| 146 | - <a href="#" class="btn">Go Back</a> | ||
| 147 | - </div> | ||
| 148 | - </div> | ||
| 149 | - </div> | ||
| 150 | - </div> | ||
| 151 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 152 | - <div class="error-right"> | ||
| 153 | - <img class="img" src="img/error-img.png" alt="#"> | ||
| 154 | - </div> | ||
| 155 | - </div> | ||
| 156 | - </div> | ||
| 157 | - </div> | ||
| 158 | - </div> | ||
| 159 | - </div> | ||
| 160 | - </section> | ||
| 161 | - <!-- End 404 Error Page --> | ||
| 162 | - | ||
| 163 | - | ||
| 164 | - <!-- Footer Area --> | ||
| 165 | - <footer id="footer" class="footer section"> | ||
| 166 | - <!-- Footer Top --> | ||
| 167 | - <div class="footer-top"> | ||
| 168 | - <div class="container"> | ||
| 169 | - <div class="row"> | ||
| 170 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 171 | - <div class="single-footer"> | ||
| 172 | - <div class="logo"> | ||
| 173 | - <img src="img/ruby.png" alt="#"> | ||
| 174 | - </div> | ||
| 175 | - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, </p> | ||
| 176 | - <div class="contact"> | ||
| 177 | - <p class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Mirpur, dhaka-bangledesh</p> | ||
| 178 | - <p class="mail-add"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@clippinglamp.com</p> | ||
| 179 | - <p class="call"><i class="fa fa-phone-square" aria-hidden="true"></i>call:900-200-2315</p> | ||
| 180 | - </div> | ||
| 181 | - </div> | ||
| 182 | - </div> | ||
| 183 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 184 | - <div class="single-footer"> | ||
| 185 | - <h2><i class="fa fa-sliders" aria-hidden="true"></i>setra site map</h2> | ||
| 186 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>home</span> | ||
| 187 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our shop</span> | ||
| 188 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>about us</span> | ||
| 189 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>blog</span> | ||
| 190 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>your account</span> | ||
| 191 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our guarantee</span> | ||
| 192 | - </div> | ||
| 193 | - </div> | ||
| 194 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 195 | - <div class="single-footer"> | ||
| 196 | - <h2><i class="fa fa-cogs" aria-hidden="true"></i>our company</h2> | ||
| 197 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>shipping policy</span> | ||
| 198 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>international shipping</span> | ||
| 199 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>affiliates</span> | ||
| 200 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our sponsors</span> | ||
| 201 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>team & conditions</span> | ||
| 202 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>cash on delivery</span> | ||
| 203 | - </div> | ||
| 204 | - </div> | ||
| 205 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 206 | - <div class="single-footer"> | ||
| 207 | - <h2>newsletter subscription</h2> | ||
| 208 | - <p>subscribe to our newsletter to get allour news in your inbox</p> | ||
| 209 | - <div class="mail"> | ||
| 210 | - <input type="email" placeholder="Enter your email"> | ||
| 211 | - <button class="button"><a href="#">subscribe us</a></button> | ||
| 212 | - <i class="fa fa-lock" class="icon"></i> | ||
| 213 | - <p>Your email address is 100% safe to us</p> | ||
| 214 | - </div> | ||
| 215 | - </div> | ||
| 216 | - </div> | ||
| 217 | - </div> | ||
| 218 | - </div> | ||
| 219 | - </div> | ||
| 220 | - <!--/ End Footer Top --> | ||
| 221 | - | ||
| 222 | - <!-- Copyright --> | ||
| 223 | - <div class="copyright"> | ||
| 224 | - <div class="container"> | ||
| 225 | - <div class="row"> | ||
| 226 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 227 | - <div class="copyright-content"> | ||
| 228 | - <p>Copyright 2018 | Ruby Limtied | All Rights Reserved</p> | ||
| 229 | - </div> | ||
| 230 | - </div> | ||
| 231 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 232 | - <ul class="social"> | ||
| 233 | - <li><a href=""><i class="fa fa-facebook"></i></a></li> | ||
| 234 | - <li><a href=""><i class="fa fa-twitter"></i></a></li> | ||
| 235 | - <li><a href=""><i class="fa fa-instagram"></i></a></li> | ||
| 236 | - <li><a href=""><i class="fa fa-linkedin"></i></a></li> | ||
| 237 | - <li><a href=""><i class="fa fa-youtube"></i></a></li> | ||
| 238 | - </ul> | ||
| 239 | - </div> | ||
| 240 | - </div> | ||
| 241 | - </div> | ||
| 242 | - </div> | ||
| 243 | - <!--/ End Copyright --> | ||
| 244 | - </footer> | ||
| 245 | - <!--/ End Footer Area --> | ||
| 246 | - | ||
| 247 | - | ||
| 248 | - <script src="js/jquery.min.js"></script> | ||
| 249 | - <script src="js/bootstrap.min.js"></script> | ||
| 250 | - <script src="js/colors.js"></script> | ||
| 251 | - <script src="js/jquery.nav.js"></script> | ||
| 252 | - <script src="js/jquery.scrollUp.min.js"></script> | ||
| 253 | - <script src="js/jquery.slicknav.min.js"></script> | ||
| 254 | - <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> | ||
| 255 | - <script src="js/owl.carousel.min.js"></script> | ||
| 256 | - <script src="js/isotope.pkgd.min.js"></script> | ||
| 257 | - <script src="js/wow.min.js"></script> | ||
| 258 | - <script src="js/jquery.stellar.min.js"></script> | ||
| 259 | - <script src="js/jquery.magnific-popup.min.js"></script> | ||
| 260 | - <script src="js/animate-text.js"></script> | ||
| 261 | - <script src="js/particles.min.js"></script> | ||
| 262 | - <script src="js/particle-code.js"></script> | ||
| 263 | - <script src="js/jquery.counterup.min.js"></script> | ||
| 264 | - | ||
| 265 | - <script type="text/javascript" src="js/gmaps.min.js"></script> | ||
| 266 | - <script src="js/main.js"></script> | ||
| 267 | - </body> | ||
| 268 | -</html> |
blog-single.html deleted
| 1 | -<!Doctype html> | ||
| 2 | -<html class="no-js" lang=""> | ||
| 3 | - <head> | ||
| 4 | - <meta charset="utf-8"> | ||
| 5 | - <meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| 6 | - <title>Ruby - Responsive Corporate Tempalte</title> | ||
| 7 | - <meta name="description" content=""> | ||
| 8 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 9 | - | ||
| 10 | - <link rel="icon" href="img/header-logo1.png"> | ||
| 11 | - <!-- Place favicon.ico in the root directory --> | ||
| 12 | - | ||
| 13 | - <!-- Google Fonts --> | ||
| 14 | - <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> | ||
| 15 | - | ||
| 16 | - <link rel="stylesheet" href="css/bootstrap.min.css"> | ||
| 17 | - <link rel="stylesheet" href="css/slicknav.min.css"> | ||
| 18 | - <link rel="stylesheet" href="css/bootstrap-theme.min.css"> | ||
| 19 | - <link rel="stylesheet" href="css/owl.carousel.min.css"> | ||
| 20 | - <link rel="stylesheet" href="css/owl.theme.default.min.css"> | ||
| 21 | - <link rel="stylesheet" href="css/animate.min.css"> | ||
| 22 | - <link rel="stylesheet" href="css/animate-text.css"> | ||
| 23 | - <link rel="stylesheet" href="css/magnific-popup.css"> | ||
| 24 | - <link rel="stylesheet" href="css/font-awesome.min.css"> | ||
| 25 | - | ||
| 26 | - <!-- Ruby CSS --> | ||
| 27 | - <link rel="stylesheet" href="css/normalize.css"> | ||
| 28 | - <link rel="stylesheet" href="style.css"> | ||
| 29 | - <link rel="stylesheet" href="css/responsive.css"> | ||
| 30 | - | ||
| 31 | - <!-- Color CSS --> | ||
| 32 | - <link rel="stylesheet" href="css/color/color7.css"> | ||
| 33 | - <!--<link rel="stylesheet" href="css/color/color1.css">--> | ||
| 34 | - <!--<link rel="stylesheet" href="css/color/color2.css">--> | ||
| 35 | - <!--<link rel="stylesheet" href="css/color/color3.css">--> | ||
| 36 | - <!--<link rel="stylesheet" href="css/color/color4.css">--> | ||
| 37 | - <!--<link rel="stylesheet" href="css/color/color5.css">--> | ||
| 38 | - <!--<link rel="stylesheet" href="css/color/color6.css">--> | ||
| 39 | - <!--<link rel="stylesheet" href="css/color/color8.css">--> | ||
| 40 | - <!--<link rel="stylesheet" href="css/color/color9.css">--> | ||
| 41 | - | ||
| 42 | - <link rel="stylesheet" href="#" id="colors"> | ||
| 43 | - | ||
| 44 | - </head> | ||
| 45 | - <body> | ||
| 46 | - | ||
| 47 | - <div class="color-plate "> | ||
| 48 | - <a class="icon"><i class="fa fa-cog fa-spin"></i></a> | ||
| 49 | - <h2>Ruby Color</h2> | ||
| 50 | - <div class="color-head"> | ||
| 51 | - <span class="color1"></span> | ||
| 52 | - <span class="color2"></span> | ||
| 53 | - <span class="color3"></span> | ||
| 54 | - <span class="color4"></span> | ||
| 55 | - <span class="color5"></span> | ||
| 56 | - <span class="color6"></span> | ||
| 57 | - <span class="color7"></span> | ||
| 58 | - <span class="color8"></span> | ||
| 59 | - <span class="color9"></span> | ||
| 60 | - </div> | ||
| 61 | - </div> | ||
| 62 | - | ||
| 63 | - <!-- Header Area --> | ||
| 64 | - <header id="header" class="header"> | ||
| 65 | - <!-- Header Inner --> | ||
| 66 | - <div class="header-inner"> | ||
| 67 | - <div class="container"> | ||
| 68 | - <div class="row"> | ||
| 69 | - <div class="col-md-3 col-sm-2 col-xs-2"> | ||
| 70 | - <div class="logo"> | ||
| 71 | - <a href="index.html"><img src="images/logo.png" alt="logo.png"></a> | ||
| 72 | - </div> | ||
| 73 | - </div> | ||
| 74 | - <div class="col-md-9 col-sm-10"> | ||
| 75 | - <div class="mobile-menu"></div> | ||
| 76 | - <nav class="navbar navbar-default"> | ||
| 77 | - <div class="collapse navbar-collapse"> | ||
| 78 | - <ul id="nav" class="nav navbar-nav"> | ||
| 79 | - <li class="current"><a href="#slider">home</a> | ||
| 80 | - </li> | ||
| 81 | - <li><a href="#Services">Services</a></li> | ||
| 82 | - <li><a href="#latest-works">portfolio<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 83 | - <ul class="dropdown"> | ||
| 84 | - <li><a href="portfolio.html">Portfolio</a></li> | ||
| 85 | - <li><a href="portfolio-single.html">portfolio-single</a></li> | ||
| 86 | - </ul> | ||
| 87 | - </li> | ||
| 88 | - <li><a href="#blog">Blogs<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 89 | - <ul class="dropdown"> | ||
| 90 | - <li><a href="blog.html">Blog Archive</a></li> | ||
| 91 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 92 | - </ul> | ||
| 93 | - </li> | ||
| 94 | - <li><a href="#team">Team</a></li> | ||
| 95 | - <li><a href="#">Pages <i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 96 | - <ul class="dropdown"> | ||
| 97 | - <li><a href="404.html">Error 404</a></li> | ||
| 98 | - <li><a href="mail-success.html">Mail Success</a></li> | ||
| 99 | - </ul> | ||
| 100 | - </li> | ||
| 101 | - <li><a href="#contact">Contact</a></li> | ||
| 102 | - </ul> | ||
| 103 | - </div> | ||
| 104 | - </nav> | ||
| 105 | - </div> | ||
| 106 | - </div> | ||
| 107 | - </div> | ||
| 108 | - </div> | ||
| 109 | - </header> | ||
| 110 | - <!--/ End Header Area --> | ||
| 111 | - | ||
| 112 | - | ||
| 113 | - <!--breadcrumb --> | ||
| 114 | - <div class="breadcrumb" data-stellar-background-ratio="0.5"> | ||
| 115 | - <div class="container"> | ||
| 116 | - <div class="row"> | ||
| 117 | - <div class="col-md-12"> | ||
| 118 | - <div class="breadcrumb-text"> | ||
| 119 | - <h2>Blog Single</h2> | ||
| 120 | - <ul> | ||
| 121 | - <li><a href="index.html">Home</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i></li> | ||
| 122 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 123 | - </ul> | ||
| 124 | - </div> | ||
| 125 | - </div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - </div> | ||
| 129 | - <!--/ End breadcrumb --> | ||
| 130 | - | ||
| 131 | - <!-- Blog --> | ||
| 132 | - <section id="blog-single" class="section"> | ||
| 133 | - <div class="container"> | ||
| 134 | - <div class="row"> | ||
| 135 | - <div class="col-md-12 col-sm-12 col-xs-12"> | ||
| 136 | - <div class="single-news"> | ||
| 137 | - <div class="news-head"> | ||
| 138 | - <img src="img/single-b1.jpg" alt="#"> | ||
| 139 | - </div> | ||
| 140 | - <div class="news-body"> | ||
| 141 | - <h3 class="date">25<span>nov</span></h3> | ||
| 142 | - <h2><a href="#"> give us that</a></h2> | ||
| 143 | - <div class="title"><span class="user"><i class="fa fa-user" aria-hidden="true"></i>adminaccess</span> <span class="comment"><i class="fa fa-comment-o" aria-hidden="true"></i>no comment</span></div> | ||
| 144 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 145 | - <p>eti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor i do eiusmod tempo </p> | ||
| 146 | - <p>sum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisici ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 147 | - <h5 class="tags">tags- | ||
| 148 | - <li><a href="#">html,</a></li> | ||
| 149 | - <li><a href="#">Bootstrap,</a></li> | ||
| 150 | - <li><a href="#">Creative,</a></li> | ||
| 151 | - <li><a href="#">web design</a></li> | ||
| 152 | - </h5> | ||
| 153 | - </div> | ||
| 154 | - </div> | ||
| 155 | - </div> | ||
| 156 | - | ||
| 157 | - | ||
| 158 | - | ||
| 159 | - </div> | ||
| 160 | - </div> | ||
| 161 | - </section> | ||
| 162 | - <!--/ End Newslatter --> | ||
| 163 | - | ||
| 164 | - | ||
| 165 | - | ||
| 166 | - <!-- Clients Area --> | ||
| 167 | - <div id="clients" class="clients section"> | ||
| 168 | - <div class="container"> | ||
| 169 | - <div class="row"> | ||
| 170 | - <div class="col-md-12 col-sm-12 col-xs-12"> | ||
| 171 | - <div class="owl-carousel clients-slider"> | ||
| 172 | - <!-- Single Clients --> | ||
| 173 | - <div class="single-clients"> | ||
| 174 | - <img src="img/client1.jpg" alt="#"> | ||
| 175 | - </div> | ||
| 176 | - <!--/ End Single Client --> | ||
| 177 | - <!-- Single Client --> | ||
| 178 | - <div class="single-clients"> | ||
| 179 | - <img src="img/client2.jpg" alt="#"> | ||
| 180 | - </div> | ||
| 181 | - <!--/ End Single Client --> | ||
| 182 | - <!-- Single Client --> | ||
| 183 | - <div class="single-clients"> | ||
| 184 | - <img src="img/client3.jpg" alt="#"> | ||
| 185 | - </div> | ||
| 186 | - <!--/ End Single Client --> | ||
| 187 | - <!-- Single Client --> | ||
| 188 | - <div class="single-clients"> | ||
| 189 | - <img src="img/client4.jpg" alt="#"> | ||
| 190 | - </div> | ||
| 191 | - <!--/ End Single Client --> | ||
| 192 | - <!-- Single Client --> | ||
| 193 | - <div class="single-clients"> | ||
| 194 | - <img src="img/client5.jpg" alt="#"> | ||
| 195 | - </div> | ||
| 196 | - <!--/ End Single Client --> | ||
| 197 | - <!-- Single Client --> | ||
| 198 | - <div class="single-clients"> | ||
| 199 | - <img src="img/client6.jpg" alt="#"> | ||
| 200 | - </div> | ||
| 201 | - <!--/ End Single Client --> | ||
| 202 | - <!-- Single Client --> | ||
| 203 | - <div class="single-clients"> | ||
| 204 | - <img src="img/client7.jpg" alt="#"> | ||
| 205 | - </div> | ||
| 206 | - <!--/ End Single Client --> | ||
| 207 | - <!-- Single Client --> | ||
| 208 | - <div class="single-clients"> | ||
| 209 | - <img src="img/client8.jpg" alt="#"> | ||
| 210 | - </div> | ||
| 211 | - <!--/ End Single Client --> | ||
| 212 | - <!-- Single Client --> | ||
| 213 | - <div class="single-clients"> | ||
| 214 | - <img src="img/client9.jpg" alt="#"> | ||
| 215 | - </div> | ||
| 216 | - <!--/ End Single Client --> | ||
| 217 | - </div> | ||
| 218 | - </div> | ||
| 219 | - </div> | ||
| 220 | - </div> | ||
| 221 | - </div> | ||
| 222 | - <!--/ End Clients Area --> | ||
| 223 | - | ||
| 224 | - | ||
| 225 | - | ||
| 226 | - | ||
| 227 | - <!-- Footer Area --> | ||
| 228 | - <footer id="footer" class="footer section"> | ||
| 229 | - <!-- Footer Top --> | ||
| 230 | - <div class="footer-top"> | ||
| 231 | - <div class="container"> | ||
| 232 | - <div class="row"> | ||
| 233 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 234 | - <div class="single-footer"> | ||
| 235 | - <div class="logo"> | ||
| 236 | - <img src="img/ruby.png" alt="#"> | ||
| 237 | - </div> | ||
| 238 | - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, </p> | ||
| 239 | - <div class="contact"> | ||
| 240 | - <p class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Mirpur, dhaka-bangledesh</p> | ||
| 241 | - <p class="mail-add"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@clippinglamp.com</p> | ||
| 242 | - <p class="call"><i class="fa fa-phone-square" aria-hidden="true"></i>call:900-200-2315</p> | ||
| 243 | - </div> | ||
| 244 | - </div> | ||
| 245 | - </div> | ||
| 246 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 247 | - <div class="single-footer"> | ||
| 248 | - <h2><i class="fa fa-sliders" aria-hidden="true"></i>setra site map</h2> | ||
| 249 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>home</span> | ||
| 250 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our shop</span> | ||
| 251 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>about us</span> | ||
| 252 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>blog</span> | ||
| 253 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>your account</span> | ||
| 254 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our guarantee</span> | ||
| 255 | - </div> | ||
| 256 | - </div> | ||
| 257 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 258 | - <div class="single-footer"> | ||
| 259 | - <h2><i class="fa fa-cogs" aria-hidden="true"></i>our company</h2> | ||
| 260 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>shipping policy</span> | ||
| 261 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>international shipping</span> | ||
| 262 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>affiliates</span> | ||
| 263 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our sponsors</span> | ||
| 264 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>team & conditions</span> | ||
| 265 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>cash on delivery</span> | ||
| 266 | - </div> | ||
| 267 | - </div> | ||
| 268 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 269 | - <div class="single-footer"> | ||
| 270 | - <h2>newsletter subscription</h2> | ||
| 271 | - <p>subscribe to our newsletter to get allour news in your inbox</p> | ||
| 272 | - <div class="mail"> | ||
| 273 | - <input type="email" placeholder="Enter your email"> | ||
| 274 | - <button class="button"><a href="#">subscribe us</a></button> | ||
| 275 | - <i class="fa fa-lock" class="icon"></i> | ||
| 276 | - <p>Your email address is 100% safe to us</p> | ||
| 277 | - </div> | ||
| 278 | - </div> | ||
| 279 | - </div> | ||
| 280 | - </div> | ||
| 281 | - </div> | ||
| 282 | - </div> | ||
| 283 | - <!--/ End Footer Top --> | ||
| 284 | - | ||
| 285 | - <!-- Copyright --> | ||
| 286 | - <div class="copyright"> | ||
| 287 | - <div class="container"> | ||
| 288 | - <div class="row"> | ||
| 289 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 290 | - <div class="copyright-content"> | ||
| 291 | - <p>Copyright 2018 | Ruby Limtied | All Rights Reserved</p> | ||
| 292 | - </div> | ||
| 293 | - </div> | ||
| 294 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 295 | - <ul class="social"> | ||
| 296 | - <li><a href=""><i class="fa fa-facebook"></i></a></li> | ||
| 297 | - <li><a href=""><i class="fa fa-twitter"></i></a></li> | ||
| 298 | - <li><a href=""><i class="fa fa-instagram"></i></a></li> | ||
| 299 | - <li><a href=""><i class="fa fa-linkedin"></i></a></li> | ||
| 300 | - <li><a href=""><i class="fa fa-youtube"></i></a></li> | ||
| 301 | - </ul> | ||
| 302 | - </div> | ||
| 303 | - </div> | ||
| 304 | - </div> | ||
| 305 | - </div> | ||
| 306 | - <!--/ End Copyright --> | ||
| 307 | - </footer> | ||
| 308 | - <!--/ End Footer Area --> | ||
| 309 | - | ||
| 310 | - | ||
| 311 | - <script src="js/jquery.min.js"></script> | ||
| 312 | - <script src="js/bootstrap.min.js"></script> | ||
| 313 | - <script src="js/colors.js"></script> | ||
| 314 | - <script src="js/jquery.nav.js"></script> | ||
| 315 | - <script src="js/jquery.scrollUp.min.js"></script> | ||
| 316 | - <script src="js/jquery.slicknav.min.js"></script> | ||
| 317 | - <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> | ||
| 318 | - <script src="js/owl.carousel.min.js"></script> | ||
| 319 | - <script src="js/isotope.pkgd.min.js"></script> | ||
| 320 | - <script src="js/wow.min.js"></script> | ||
| 321 | - <script src="js/jquery.stellar.min.js"></script> | ||
| 322 | - <script src="js/jquery.magnific-popup.min.js"></script> | ||
| 323 | - <script src="js/animate-text.js"></script> | ||
| 324 | - <script src="js/particles.min.js"></script> | ||
| 325 | - <script src="js/particle-code.js"></script> | ||
| 326 | - <script src="js/jquery.counterup.min.js"></script> | ||
| 327 | - | ||
| 328 | - <script type="text/javascript" src="js/gmaps.min.js"></script> | ||
| 329 | - <script src="js/main.js"></script> | ||
| 330 | - </body> | ||
| 331 | -</html> |
blog.html deleted
| 1 | -<!Doctype html> | ||
| 2 | -<html class="no-js" lang=""> | ||
| 3 | - <head> | ||
| 4 | - <meta charset="utf-8"> | ||
| 5 | - <meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| 6 | - <title>Ruby - Responsive Corporate Tempalte</title> | ||
| 7 | - <meta name="description" content=""> | ||
| 8 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 9 | - | ||
| 10 | - <link rel="icon" href="img/header-logo1.png"> | ||
| 11 | - <!-- Place favicon.ico in the root directory --> | ||
| 12 | - | ||
| 13 | - <!-- Google Fonts --> | ||
| 14 | - <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> | ||
| 15 | - | ||
| 16 | - <link rel="stylesheet" href="css/bootstrap.min.css"> | ||
| 17 | - <link rel="stylesheet" href="css/slicknav.min.css"> | ||
| 18 | - <link rel="stylesheet" href="css/bootstrap-theme.min.css"> | ||
| 19 | - <link rel="stylesheet" href="css/owl.carousel.min.css"> | ||
| 20 | - <link rel="stylesheet" href="css/owl.theme.default.min.css"> | ||
| 21 | - <link rel="stylesheet" href="css/animate.min.css"> | ||
| 22 | - <link rel="stylesheet" href="css/animate-text.css"> | ||
| 23 | - <link rel="stylesheet" href="css/magnific-popup.css"> | ||
| 24 | - <link rel="stylesheet" href="css/font-awesome.min.css"> | ||
| 25 | - | ||
| 26 | - <!-- Ruby CSS --> | ||
| 27 | - <link rel="stylesheet" href="css/normalize.css"> | ||
| 28 | - <link rel="stylesheet" href="style.css"> | ||
| 29 | - <link rel="stylesheet" href="css/responsive.css"> | ||
| 30 | - | ||
| 31 | - <!-- Color CSS --> | ||
| 32 | - <link rel="stylesheet" href="css/color/color7.css"> | ||
| 33 | - <!--<link rel="stylesheet" href="css/color/color1.css">--> | ||
| 34 | - <!--<link rel="stylesheet" href="css/color/color2.css">--> | ||
| 35 | - <!--<link rel="stylesheet" href="css/color/color3.css">--> | ||
| 36 | - <!--<link rel="stylesheet" href="css/color/color4.css">--> | ||
| 37 | - <!--<link rel="stylesheet" href="css/color/color5.css">--> | ||
| 38 | - <!--<link rel="stylesheet" href="css/color/color6.css">--> | ||
| 39 | - <!--<link rel="stylesheet" href="css/color/color8.css">--> | ||
| 40 | - <!--<link rel="stylesheet" href="css/color/color9.css">--> | ||
| 41 | - | ||
| 42 | - <link rel="stylesheet" href="#" id="colors"> | ||
| 43 | - | ||
| 44 | - </head> | ||
| 45 | - <body> | ||
| 46 | - | ||
| 47 | - <div class="color-plate "> | ||
| 48 | - <a class="icon"><i class="fa fa-cog fa-spin"></i></a> | ||
| 49 | - <h2>Ruby Color</h2> | ||
| 50 | - <div class="color-head"> | ||
| 51 | - <span class="color1"></span> | ||
| 52 | - <span class="color2"></span> | ||
| 53 | - <span class="color3"></span> | ||
| 54 | - <span class="color4"></span> | ||
| 55 | - <span class="color5"></span> | ||
| 56 | - <span class="color6"></span> | ||
| 57 | - <span class="color7"></span> | ||
| 58 | - <span class="color8"></span> | ||
| 59 | - <span class="color9"></span> | ||
| 60 | - </div> | ||
| 61 | - </div> | ||
| 62 | - | ||
| 63 | - <!-- Header Area --> | ||
| 64 | - <header id="header" class="header"> | ||
| 65 | - <!-- Header Inner --> | ||
| 66 | - <div class="header-inner"> | ||
| 67 | - <div class="container"> | ||
| 68 | - <div class="row"> | ||
| 69 | - <div class="col-md-3 col-sm-2 col-xs-2"> | ||
| 70 | - <div class="logo"> | ||
| 71 | - <a href="index.html"><img src="images/logo.png" alt="logo.png"></a> | ||
| 72 | - </div> | ||
| 73 | - </div> | ||
| 74 | - <div class="col-md-9 col-sm-10"> | ||
| 75 | - <div class="mobile-menu"></div> | ||
| 76 | - <nav class="navbar navbar-default"> | ||
| 77 | - <div class="collapse navbar-collapse"> | ||
| 78 | - <ul id="nav" class="nav navbar-nav"> | ||
| 79 | - <li class="current"><a href="#slider">home</a> | ||
| 80 | - </li> | ||
| 81 | - <li><a href="#Services">Services</a></li> | ||
| 82 | - <li><a href="#latest-works">portfolio<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 83 | - <ul class="dropdown"> | ||
| 84 | - <li><a href="portfolio.html">Portfolio</a></li> | ||
| 85 | - <li><a href="portfolio-single.html">portfolio-single</a></li> | ||
| 86 | - </ul> | ||
| 87 | - </li> | ||
| 88 | - <li><a href="#blog">Blogs<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 89 | - <ul class="dropdown"> | ||
| 90 | - <li><a href="blog.html">Blog Archive</a></li> | ||
| 91 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 92 | - </ul> | ||
| 93 | - </li> | ||
| 94 | - <li><a href="#team">Team</a></li> | ||
| 95 | - <li><a href="#">Pages <i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 96 | - <ul class="dropdown"> | ||
| 97 | - <li><a href="404.html">Error 404</a></li> | ||
| 98 | - <li><a href="mail-success.html">Mail Success</a></li> | ||
| 99 | - </ul> | ||
| 100 | - </li> | ||
| 101 | - <li><a href="#contact">Contact</a></li> | ||
| 102 | - </ul> | ||
| 103 | - </div> | ||
| 104 | - </nav> | ||
| 105 | - </div> | ||
| 106 | - </div> | ||
| 107 | - </div> | ||
| 108 | - </div> | ||
| 109 | - </header> | ||
| 110 | - <!--/ End Header Area --> | ||
| 111 | - | ||
| 112 | - <!--breadcrumb --> | ||
| 113 | - <div class="breadcrumb" data-stellar-background-ratio="0.5"> | ||
| 114 | - <div class="container"> | ||
| 115 | - <div class="row"> | ||
| 116 | - <div class="col-md-12"> | ||
| 117 | - <div class="breadcrumb-text"> | ||
| 118 | - <h2>Blog</h2> | ||
| 119 | - <ul> | ||
| 120 | - <li><a href="index.html">Home</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i></li> | ||
| 121 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 122 | - </ul> | ||
| 123 | - </div> | ||
| 124 | - </div> | ||
| 125 | - </div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - <!--/ End breadcrumb --> | ||
| 129 | - | ||
| 130 | - <!-- Blog --> | ||
| 131 | - <section id="blog-single" class="section"> | ||
| 132 | - <div class="container"> | ||
| 133 | - <div class="row"> | ||
| 134 | - <div class="col-md-12 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.4s"> | ||
| 135 | - <div class="single-news"> | ||
| 136 | - <div class="news-head"> | ||
| 137 | - <img src="img/blog1.jpg" alt="#"> | ||
| 138 | - </div> | ||
| 139 | - <div class="news-body"> | ||
| 140 | - <h3 class="date">25<span>nov</span></h3> | ||
| 141 | - <h2><a href="#"> give us that</a></h2> | ||
| 142 | - <div class="title"><span class="user"><i class="fa fa-user" aria-hidden="true"></i>adminaccess</span> <span class="comment"><i class="fa fa-comment-o" aria-hidden="true"></i>no comment</span></div> | ||
| 143 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 144 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 145 | - <a href="#" class="btn">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 146 | - <h5 class="tags">tags- | ||
| 147 | - <li><a href="#">html,</a></li> | ||
| 148 | - <li><a href="#">Bootstrap,</a></li> | ||
| 149 | - <li><a href="#">Creative,</a></li> | ||
| 150 | - <li><a href="#">web design</a></li> | ||
| 151 | - </h5> | ||
| 152 | - </div> | ||
| 153 | - </div> | ||
| 154 | - </div> | ||
| 155 | - <div class="col-md-12 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.4s"> | ||
| 156 | - <div class="single-news"> | ||
| 157 | - <div class="news-head"> | ||
| 158 | - <img src="img/blog2.jpg" alt="#"> | ||
| 159 | - </div> | ||
| 160 | - <div class="news-body"> | ||
| 161 | - <h3 class="date">30<span>nov</span></h3> | ||
| 162 | - <h2><a href="#"> consisting with technology</a></h2> | ||
| 163 | - <div class="title"><span class="user"><i class="fa fa-user" aria-hidden="true"></i>adminaccess</span> <span class="comment"><i class="fa fa-comment-o" aria-hidden="true"></i>no comment</span></div> | ||
| 164 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 165 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 166 | - <a href="#" class="btn">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 167 | - <h5 class="tags">tags- | ||
| 168 | - <li><a href="#">html,</a></li> | ||
| 169 | - <li><a href="#">Bootstrap,</a></li> | ||
| 170 | - <li><a href="#">Creative,</a></li> | ||
| 171 | - <li><a href="#">web design</a></li> | ||
| 172 | - </h5> | ||
| 173 | - </div> | ||
| 174 | - </div> | ||
| 175 | - </div> | ||
| 176 | - <div class="col-md-12 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.4s"> | ||
| 177 | - <div class="single-news"> | ||
| 178 | - <div class="news-head"> | ||
| 179 | - <img src="img/blog3.jpg" alt="#"> | ||
| 180 | - </div> | ||
| 181 | - <div class="news-body"> | ||
| 182 | - <h3 class="date">05<span>dec</span></h3> | ||
| 183 | - <h2><a href="#">the inline product </a></h2> | ||
| 184 | - <div class="title"><span class="user"><i class="fa fa-user" aria-hidden="true"></i>adminaccess</span> <span class="comment"><i class="fa fa-comment-o" aria-hidden="true"></i>no comment</span></div> | ||
| 185 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 186 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 187 | - <a href="#" class="btn">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 188 | - <h5 class="tags">tags- | ||
| 189 | - <li><a href="#">html,</a></li> | ||
| 190 | - <li><a href="#">Bootstrap,</a></li> | ||
| 191 | - <li><a href="#">Creative,</a></li> | ||
| 192 | - <li><a href="#">web design</a></li> | ||
| 193 | - </h5> | ||
| 194 | - </div> | ||
| 195 | - </div> | ||
| 196 | - </div> | ||
| 197 | - <div class="col-md-12 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.4s"> | ||
| 198 | - <div class="single-news"> | ||
| 199 | - <div class="news-head"> | ||
| 200 | - <img src="img/blog1.jpg" alt="#"> | ||
| 201 | - </div> | ||
| 202 | - <div class="news-body"> | ||
| 203 | - <h3 class="date">05<span>dec</span></h3> | ||
| 204 | - <h2><a href="#">the inline product </a></h2> | ||
| 205 | - <div class="title"><span class="user"><i class="fa fa-user" aria-hidden="true"></i>adminaccess</span> <span class="comment"><i class="fa fa-comment-o" aria-hidden="true"></i>no comment</span></div> | ||
| 206 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 207 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 208 | - <a href="#" class="btn">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 209 | - <h5 class="tags">tags- | ||
| 210 | - <li><a href="#">html,</a></li> | ||
| 211 | - <li><a href="#">Bootstrap,</a></li> | ||
| 212 | - <li><a href="#">Creative,</a></li> | ||
| 213 | - <li><a href="#">web design</a></li> | ||
| 214 | - </h5> | ||
| 215 | - </div> | ||
| 216 | - </div> | ||
| 217 | - </div> | ||
| 218 | - <div class="col-md-12 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.4s"> | ||
| 219 | - <div class="single-news"> | ||
| 220 | - <div class="news-head"> | ||
| 221 | - <img src="img/blog2.jpg" alt="#"> | ||
| 222 | - </div> | ||
| 223 | - <div class="news-body"> | ||
| 224 | - <h3 class="date">05<span>dec</span></h3> | ||
| 225 | - <h2><a href="#">the inline product </a></h2> | ||
| 226 | - <div class="title"><span class="user"><i class="fa fa-user" aria-hidden="true"></i>adminaccess</span> <span class="comment"><i class="fa fa-comment-o" aria-hidden="true"></i>no comment</span></div> | ||
| 227 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 228 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> | ||
| 229 | - <a href="#" class="btn">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 230 | - <h5 class="tags">tags- | ||
| 231 | - <li><a href="#">html,</a></li> | ||
| 232 | - <li><a href="#">Bootstrap,</a></li> | ||
| 233 | - <li><a href="#">Creative,</a></li> | ||
| 234 | - <li><a href="#">web design</a></li> | ||
| 235 | - </h5> | ||
| 236 | - </div> | ||
| 237 | - </div> | ||
| 238 | - </div> | ||
| 239 | - | ||
| 240 | - <div class="col-md-12 col-sm-12 col-xs-12"> | ||
| 241 | - <div class="pagination-head"> | ||
| 242 | - <div class="pagination"> | ||
| 243 | - <ul> | ||
| 244 | - <li><a href="#"><i class="fa fa-long-arrow-left" aria-hidden="true"></i>prev</a></li> | ||
| 245 | - <li><a href="#">1</a></li> | ||
| 246 | - <li><a href="#">2</a></li> | ||
| 247 | - <li><a href="#">3</a></li> | ||
| 248 | - <li><a href="#">4</a></li> | ||
| 249 | - <li><a href="#">5</a></li> | ||
| 250 | - <li><a href="#">next<i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> | ||
| 251 | - </ul> | ||
| 252 | - </div> | ||
| 253 | - </div> | ||
| 254 | - </div> | ||
| 255 | - | ||
| 256 | - </div> | ||
| 257 | - </div> | ||
| 258 | - </section> | ||
| 259 | - <!--/ End Newslatter --> | ||
| 260 | - | ||
| 261 | - | ||
| 262 | - <!-- Clients Area --> | ||
| 263 | - <div id="clients" class="clients section"> | ||
| 264 | - <div class="container"> | ||
| 265 | - <div class="row"> | ||
| 266 | - <div class="col-md-12 col-sm-12 col-xs-12"> | ||
| 267 | - <div class="owl-carousel clients-slider"> | ||
| 268 | - <!-- Single Clients --> | ||
| 269 | - <div class="single-clients"> | ||
| 270 | - <img src="img/client1.jpg" alt="#"> | ||
| 271 | - </div> | ||
| 272 | - <!--/ End Single Client --> | ||
| 273 | - <!-- Single Client --> | ||
| 274 | - <div class="single-clients"> | ||
| 275 | - <img src="img/client2.jpg" alt="#"> | ||
| 276 | - </div> | ||
| 277 | - <!--/ End Single Client --> | ||
| 278 | - <!-- Single Client --> | ||
| 279 | - <div class="single-clients"> | ||
| 280 | - <img src="img/client3.jpg" alt="#"> | ||
| 281 | - </div> | ||
| 282 | - <!--/ End Single Client --> | ||
| 283 | - <!-- Single Client --> | ||
| 284 | - <div class="single-clients"> | ||
| 285 | - <img src="img/client4.jpg" alt="#"> | ||
| 286 | - </div> | ||
| 287 | - <!--/ End Single Client --> | ||
| 288 | - <!-- Single Client --> | ||
| 289 | - <div class="single-clients"> | ||
| 290 | - <img src="img/client5.jpg" alt="#"> | ||
| 291 | - </div> | ||
| 292 | - <!--/ End Single Client --> | ||
| 293 | - <!-- Single Client --> | ||
| 294 | - <div class="single-clients"> | ||
| 295 | - <img src="img/client6.jpg" alt="#"> | ||
| 296 | - </div> | ||
| 297 | - <!--/ End Single Client --> | ||
| 298 | - <!-- Single Client --> | ||
| 299 | - <div class="single-clients"> | ||
| 300 | - <img src="img/client7.jpg" alt="#"> | ||
| 301 | - </div> | ||
| 302 | - <!--/ End Single Client --> | ||
| 303 | - <!-- Single Client --> | ||
| 304 | - <div class="single-clients"> | ||
| 305 | - <img src="img/client8.jpg" alt="#"> | ||
| 306 | - </div> | ||
| 307 | - <!--/ End Single Client --> | ||
| 308 | - <!-- Single Client --> | ||
| 309 | - <div class="single-clients"> | ||
| 310 | - <img src="img/client9.jpg" alt="#"> | ||
| 311 | - </div> | ||
| 312 | - <!--/ End Single Client --> | ||
| 313 | - </div> | ||
| 314 | - </div> | ||
| 315 | - </div> | ||
| 316 | - </div> | ||
| 317 | - </div> | ||
| 318 | - <!--/ End Clients Area --> | ||
| 319 | - | ||
| 320 | - | ||
| 321 | - | ||
| 322 | - | ||
| 323 | - <!-- Footer Area --> | ||
| 324 | - <footer id="footer" class="footer section"> | ||
| 325 | - <!-- Footer Top --> | ||
| 326 | - <div class="footer-top"> | ||
| 327 | - <div class="container"> | ||
| 328 | - <div class="row"> | ||
| 329 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 330 | - <div class="single-footer"> | ||
| 331 | - <div class="logo"> | ||
| 332 | - <img src="img/ruby.png" alt="#"> | ||
| 333 | - </div> | ||
| 334 | - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, </p> | ||
| 335 | - <div class="contact"> | ||
| 336 | - <p class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Mirpur, dhaka-bangledesh</p> | ||
| 337 | - <p class="mail-add"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@clippinglamp.com</p> | ||
| 338 | - <p class="call"><i class="fa fa-phone-square" aria-hidden="true"></i>call:900-200-2315</p> | ||
| 339 | - </div> | ||
| 340 | - </div> | ||
| 341 | - </div> | ||
| 342 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 343 | - <div class="single-footer"> | ||
| 344 | - <h2><i class="fa fa-sliders" aria-hidden="true"></i>setra site map</h2> | ||
| 345 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>home</span> | ||
| 346 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our shop</span> | ||
| 347 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>about us</span> | ||
| 348 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>blog</span> | ||
| 349 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>your account</span> | ||
| 350 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our guarantee</span> | ||
| 351 | - </div> | ||
| 352 | - </div> | ||
| 353 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 354 | - <div class="single-footer"> | ||
| 355 | - <h2><i class="fa fa-cogs" aria-hidden="true"></i>our company</h2> | ||
| 356 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>shipping policy</span> | ||
| 357 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>international shipping</span> | ||
| 358 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>affiliates</span> | ||
| 359 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our sponsors</span> | ||
| 360 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>team & conditions</span> | ||
| 361 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>cash on delivery</span> | ||
| 362 | - </div> | ||
| 363 | - </div> | ||
| 364 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 365 | - <div class="single-footer"> | ||
| 366 | - <h2>newsletter subscription</h2> | ||
| 367 | - <p>subscribe to our newsletter to get allour news in your inbox</p> | ||
| 368 | - <div class="mail"> | ||
| 369 | - <input type="email" placeholder="Enter your email"> | ||
| 370 | - <button class="button"><a href="#">subscribe us</a></button> | ||
| 371 | - <i class="fa fa-lock" class="icon"></i> | ||
| 372 | - <p>Your email address is 100% safe to us</p> | ||
| 373 | - </div> | ||
| 374 | - </div> | ||
| 375 | - </div> | ||
| 376 | - </div> | ||
| 377 | - </div> | ||
| 378 | - </div> | ||
| 379 | - <!--/ End Footer Top --> | ||
| 380 | - | ||
| 381 | - <!-- Copyright --> | ||
| 382 | - <div class="copyright"> | ||
| 383 | - <div class="container"> | ||
| 384 | - <div class="row"> | ||
| 385 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 386 | - <div class="copyright-content"> | ||
| 387 | - <p>Copyright 2018 | Ruby Limtied | All Rights Reserved</p> | ||
| 388 | - </div> | ||
| 389 | - </div> | ||
| 390 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 391 | - <ul class="social"> | ||
| 392 | - <li><a href=""><i class="fa fa-facebook"></i></a></li> | ||
| 393 | - <li><a href=""><i class="fa fa-twitter"></i></a></li> | ||
| 394 | - <li><a href=""><i class="fa fa-instagram"></i></a></li> | ||
| 395 | - <li><a href=""><i class="fa fa-linkedin"></i></a></li> | ||
| 396 | - <li><a href=""><i class="fa fa-youtube"></i></a></li> | ||
| 397 | - </ul> | ||
| 398 | - </div> | ||
| 399 | - </div> | ||
| 400 | - </div> | ||
| 401 | - </div> | ||
| 402 | - <!--/ End Copyright --> | ||
| 403 | - </footer> | ||
| 404 | - <!--/ End Footer Area --> | ||
| 405 | - | ||
| 406 | - | ||
| 407 | - <script src="js/jquery.min.js"></script> | ||
| 408 | - <script src="js/bootstrap.min.js"></script> | ||
| 409 | - <script src="js/colors.js"></script> | ||
| 410 | - <script src="js/jquery.nav.js"></script> | ||
| 411 | - <script src="js/jquery.scrollUp.min.js"></script> | ||
| 412 | - <script src="js/jquery.slicknav.min.js"></script> | ||
| 413 | - <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> | ||
| 414 | - <script src="js/owl.carousel.min.js"></script> | ||
| 415 | - <script src="js/isotope.pkgd.min.js"></script> | ||
| 416 | - <script src="js/wow.min.js"></script> | ||
| 417 | - <script src="js/jquery.stellar.min.js"></script> | ||
| 418 | - <script src="js/jquery.magnific-popup.min.js"></script> | ||
| 419 | - <script src="js/animate-text.js"></script> | ||
| 420 | - <script src="js/particles.min.js"></script> | ||
| 421 | - <script src="js/particle-code.js"></script> | ||
| 422 | - <script src="js/jquery.counterup.min.js"></script> | ||
| 423 | - | ||
| 424 | - <script type="text/javascript" src="js/gmaps.min.js"></script> | ||
| 425 | - <script src="js/main.js"></script> | ||
| 426 | - </body> | ||
| 427 | -</html> |
doc/TOC.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | ||
| 2 | - | ||
| 3 | -## Getting started | ||
| 4 | - | ||
| 5 | -* [Usage](usage.md) — Overview of the project contents. | ||
| 6 | -* [FAQ](faq.md) — Frequently asked questions along with their answers. | ||
| 7 | - | ||
| 8 | -## HTML5 Boilerplate core | ||
| 9 | - | ||
| 10 | -* [HTML](html.md) — Guide to the default HTML. | ||
| 11 | -* [CSS](css.md) — Guide to the default CSS. | ||
| 12 | -* [JavaScript](js.md) — Guide to the default JavaScript. | ||
| 13 | -* [Everything else](misc.md). | ||
| 14 | - | ||
| 15 | -## Development | ||
| 16 | - | ||
| 17 | -* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further | ||
| 18 | - with the boilerplate. | ||
| 19 | - | ||
| 20 | -## Related projects | ||
| 21 | - | ||
| 22 | -The [H5BP organization](https://github.com/h5bp) maintains several projects | ||
| 23 | -that complement HTML5 Boilerplate, projects that can help you improve different | ||
| 24 | -aspects of your website/web app (e.g.: the performance, security, etc.). | ||
| 25 | - | ||
| 26 | -* [Server Configs](https://github.com/h5bp/server-configs) — Fast and | ||
| 27 | - smart configurations for web servers such as Apache and Nginx. | ||
| 28 | -* [Ant Build Script](https://github.com/h5bp/ant-build-script) — Apache | ||
| 29 | - Ant based build script. |
doc/css.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# The CSS | ||
| 5 | - | ||
| 6 | -HTML5 Boilerplate's CSS includes: | ||
| 7 | - | ||
| 8 | -* [Normalize.css](#normalizecss) | ||
| 9 | -* [Useful defaults](#useful-defaults) | ||
| 10 | -* [Common helpers](#common-helpers) | ||
| 11 | -* [Placeholder media queries](#media-queries) | ||
| 12 | -* [Print styles](#print-styles) | ||
| 13 | - | ||
| 14 | -This starting CSS does not rely on the presence of | ||
| 15 | -[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/), | ||
| 16 | -[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/), | ||
| 17 | -or [Modernizr](http://modernizr.com/), and it is ready to use no matter what | ||
| 18 | -your development preferences happen to be. | ||
| 19 | - | ||
| 20 | - | ||
| 21 | -## Normalize.css | ||
| 22 | - | ||
| 23 | -In order to make browsers render all elements more consistently and in line | ||
| 24 | -with modern standards, we include | ||
| 25 | -[Normalize.css](https://necolas.github.io/normalize.css/) — a modern, HTML5-ready | ||
| 26 | -alternative to CSS resets. | ||
| 27 | - | ||
| 28 | -As opposed to CSS resets, Normalize.css: | ||
| 29 | - | ||
| 30 | -* targets only the styles that need normalizing | ||
| 31 | -* preserves useful browser defaults rather than erasing them | ||
| 32 | -* corrects bugs and common browser inconsistencies | ||
| 33 | -* improves usability with subtle improvements | ||
| 34 | -* doesn't clutter the debugging tools | ||
| 35 | -* has better documentation | ||
| 36 | - | ||
| 37 | -For more information about Normalize.css, please refer to its [project | ||
| 38 | -page](https://necolas.github.com/normalize.css/), as well as this | ||
| 39 | -[blog post](http://nicolasgallagher.com/about-normalize-css/). | ||
| 40 | - | ||
| 41 | - | ||
| 42 | -## Useful defaults | ||
| 43 | - | ||
| 44 | -Several base styles are included that build upon `Normalize.css`. These | ||
| 45 | -styles: | ||
| 46 | - | ||
| 47 | -* provide basic typography settings that improve text readability | ||
| 48 | -* protect against unwanted `text-shadow` during text highlighting | ||
| 49 | -* tweak the default alignment of some elements (e.g.: `img`, `video`, | ||
| 50 | - `fieldset`, `textarea`) | ||
| 51 | -* style the prompt that is displayed to users using an outdated browser | ||
| 52 | - | ||
| 53 | -You are free and even encouraged to modify or add to these base styles as your | ||
| 54 | -project requires. | ||
| 55 | - | ||
| 56 | - | ||
| 57 | -## Common helpers | ||
| 58 | - | ||
| 59 | -Along with the base styles, we also provide some commonly used helper classes. | ||
| 60 | - | ||
| 61 | -#### `.hidden` | ||
| 62 | - | ||
| 63 | -The `hidden` class can be added to any element that you want to hide visually | ||
| 64 | -and from screen readers. It could be an element that will be populated and | ||
| 65 | -displayed later, or an element you will hide with JavaScript. | ||
| 66 | - | ||
| 67 | -#### `.visuallyhidden` | ||
| 68 | - | ||
| 69 | -The `visuallyhidden` class can be added to any element that you want to hide | ||
| 70 | -visually, while still have its content accessible to screen readers. | ||
| 71 | - | ||
| 72 | -See also: | ||
| 73 | - | ||
| 74 | -* [CSS in Action: Invisible Content Just for Screen Reader | ||
| 75 | - Users](http://www.webaim.org/techniques/css/invisiblecontent/) | ||
| 76 | -* [Hiding content for | ||
| 77 | - accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility) | ||
| 78 | -* [HTML5 Boilerplate - Issue #194](https://github.com/h5bp/html5-boilerplate/issues/194/). | ||
| 79 | - | ||
| 80 | -#### `.invisible` | ||
| 81 | - | ||
| 82 | -The `invisible` class can be added to any element that you want to hide | ||
| 83 | -visually and from screen readers, but without affecting the layout. | ||
| 84 | - | ||
| 85 | -As opposed to the `hidden` class that effectively removes the element from the | ||
| 86 | -layout, the `invisible` class will simply make the element invisible while | ||
| 87 | -keeping it in the flow and not affecting the positioning of the surrounding | ||
| 88 | -content. | ||
| 89 | - | ||
| 90 | -__N.B.__ Try to stay away from, and don't use the classes specified above for | ||
| 91 | -[keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) as you will | ||
| 92 | -harm your site's ranking! | ||
| 93 | - | ||
| 94 | -#### `.clearfix` | ||
| 95 | - | ||
| 96 | -The `clearfix` class can be added to any element to ensure that it always fully | ||
| 97 | -contains its floated children. | ||
| 98 | - | ||
| 99 | -Over the years there have been many variants of the clearfix hack, but currently, | ||
| 100 | -we use the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). | ||
| 101 | - | ||
| 102 | - | ||
| 103 | -## Media Queries | ||
| 104 | - | ||
| 105 | -HTML5 Boilerplate makes it easy for you to get started with a | ||
| 106 | -[_mobile first_](http://www.lukew.com/presos/preso.asp?26) and [_responsive web | ||
| 107 | -design_](http://www.alistapart.com/articles/responsive-web-design/) approach to | ||
| 108 | -development. But it's worth remembering that there are [no silver | ||
| 109 | -bullets](http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). | ||
| 110 | - | ||
| 111 | -We include placeholder media queries to help you build up your mobile styles for | ||
| 112 | -wider viewports and high-resolution displays. It's recommended that you adapt | ||
| 113 | -these media queries based on the content of your site rather than mirroring the | ||
| 114 | -fixed dimensions of specific devices. | ||
| 115 | - | ||
| 116 | -If you do not want to take the _mobile first_ approach, you can simply edit or | ||
| 117 | -remove these placeholder media queries. One possibility would be to work from | ||
| 118 | -wide viewports down, and use `max-width` media queries instead (e.g.: | ||
| 119 | -`@media only screen and (max-width: 480px)`). | ||
| 120 | - | ||
| 121 | -For more features that can help you in your mobile web development, take a look | ||
| 122 | -into our [Mobile Boilerplate](https://github.com/h5bp/mobile-boilerplate). | ||
| 123 | - | ||
| 124 | - | ||
| 125 | -## Print styles | ||
| 126 | - | ||
| 127 | -Lastly, we provide some useful print styles that will optimize the printing | ||
| 128 | -process, as well as make the printed pages easier to read. | ||
| 129 | - | ||
| 130 | -At printing time, these styles will: | ||
| 131 | - | ||
| 132 | -* strip all background colors, change the font color to black, and remove the | ||
| 133 | - `text-shadow` — done in order to [help save printer ink and speed up the | ||
| 134 | - printing process](http://www.sanbeiji.com/archives/953) | ||
| 135 | -* underline and expand links to include the URL — done in order to allow users | ||
| 136 | - to know where to refer to<br> | ||
| 137 | - (exceptions to this are: the links that are | ||
| 138 | - [fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href), | ||
| 139 | - or use the | ||
| 140 | - [`javascript:` pseudo protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs)) | ||
| 141 | -* expand abbreviations to include the full description — done in order to allow | ||
| 142 | - users to know what the abbreviations stands for | ||
| 143 | -* provide instructions on how browsers should break the content into pages and | ||
| 144 | - on [orphans/widows](https://en.wikipedia.org/wiki/Widows_and_orphans), namely, | ||
| 145 | - we instruct | ||
| 146 | - [supporting browsers](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules) | ||
| 147 | - that they should: | ||
| 148 | - | ||
| 149 | - * ensure the table header (`<thead>`) is [printed on each page spanned by the | ||
| 150 | - table](http://css-discuss.incutio.com/wiki/Printing_Tables) | ||
| 151 | - * prevent block quotations, preformatted text, images and table rows from | ||
| 152 | - being split onto two different pages | ||
| 153 | - * ensure that headings never appear on a different page than the text they | ||
| 154 | - are associated with | ||
| 155 | - * ensure that | ||
| 156 | - [orphans and widows](https://en.wikipedia.org/wiki/Widows_and_orphans) do | ||
| 157 | - [not appear on printed pages](https://css-tricks.com/almanac/properties/o/orphans/) | ||
| 158 | - | ||
| 159 | -The print styles are included along with the other `css` to [avoid the | ||
| 160 | -additional HTTP request](http://www.phpied.com/delay-loading-your-print-css/). | ||
| 161 | -Also, they should always be included last, so that the other styles can be | ||
| 162 | -overwritten. |
doc/extend.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# Extend and customise HTML5 Boilerplate | ||
| 5 | - | ||
| 6 | -Here is some useful advice for how you can make your project with HTML5 | ||
| 7 | -Boilerplate even better. We don't want to include it all by default, as | ||
| 8 | -not everything fits with everyone's needs. | ||
| 9 | - | ||
| 10 | - | ||
| 11 | -* [App Stores](#app-stores) | ||
| 12 | -* [DNS prefetching](#dns-prefetching) | ||
| 13 | -* [Google Universal Analytics](#google-universal-analytics) | ||
| 14 | -* [Internet Explorer](#internet-explorer) | ||
| 15 | -* [Miscellaneous](#miscellaneous) | ||
| 16 | -* [News Feeds](#news-feeds) | ||
| 17 | -* [Search](#search) | ||
| 18 | -* [Social Networks](#social-networks) | ||
| 19 | -* [URLs](#urls) | ||
| 20 | -* [Web Apps](#web-apps) | ||
| 21 | - | ||
| 22 | - | ||
| 23 | -## App Stores | ||
| 24 | - | ||
| 25 | -### Install a Chrome Web Store app | ||
| 26 | - | ||
| 27 | -Users can install a Chrome app directly from your website, as long as | ||
| 28 | -the app and site have been associated via Google's Webmaster Tools. | ||
| 29 | -Read more on [Chrome Web Store's Inline Installation | ||
| 30 | -docs](https://developer.chrome.com/webstore/inline_installation). | ||
| 31 | - | ||
| 32 | -```html | ||
| 33 | -<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"> | ||
| 34 | -``` | ||
| 35 | - | ||
| 36 | -### Smart App Banners in iOS 6+ Safari | ||
| 37 | - | ||
| 38 | -Stop bothering everyone with gross modals advertising your entry in the | ||
| 39 | -App Store. Include the following [meta tag](https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2) | ||
| 40 | -will unintrusively allow the user the option to download your iOS app, | ||
| 41 | -or open it with some data about the user's current state on the website. | ||
| 42 | - | ||
| 43 | -```html | ||
| 44 | -<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT"> | ||
| 45 | -``` | ||
| 46 | - | ||
| 47 | -## DNS prefetching | ||
| 48 | - | ||
| 49 | -In short, DNS Prefetching is a method of informing the browser of domain names | ||
| 50 | -referenced on a site so that the client can resolve the DNS for those hosts, | ||
| 51 | -cache them, and when it comes time to use them, have a faster turn around on | ||
| 52 | -the request. | ||
| 53 | - | ||
| 54 | -### Implicit prefetches | ||
| 55 | - | ||
| 56 | -There is a lot of prefetching done for you automatically by the browser. When | ||
| 57 | -the browser encounters an anchor in your html that does not share the same | ||
| 58 | -domain name as the current location the browser requests, from the client OS, | ||
| 59 | -the IP address for this new domain. The client first checks its cache and | ||
| 60 | -then, lacking a cached copy, makes a request from a DNS server. These requests | ||
| 61 | -happen in the background and are not meant to block the rendering of the | ||
| 62 | -page. | ||
| 63 | - | ||
| 64 | -The goal of this is that when the foreign IP address is finally needed it will | ||
| 65 | -already be in the client cache and will not block the loading of the foreign | ||
| 66 | -content. Fewer requests result in faster page load times. The perception of this | ||
| 67 | -is increased on a mobile platform where DNS latency can be greater. | ||
| 68 | - | ||
| 69 | -#### Disable implicit prefetching | ||
| 70 | - | ||
| 71 | -```html | ||
| 72 | -<meta http-equiv="x-dns-prefetch-control" content="off"> | ||
| 73 | -``` | ||
| 74 | - | ||
| 75 | -Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still | ||
| 76 | -prefetch any explicit dns-prefetch links. | ||
| 77 | - | ||
| 78 | -**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM | ||
| 79 | -FOREIGN DOMAINS. | ||
| 80 | - | ||
| 81 | -### Explicit prefetches | ||
| 82 | - | ||
| 83 | -Typically the browser only scans the HTML for foreign domains. If you have | ||
| 84 | -resources that are outside of your HTML (a javascript request to a remote | ||
| 85 | -server or a CDN that hosts content that may not be present on every page of | ||
| 86 | -your site, for example) then you can queue up a domain name to be prefetched. | ||
| 87 | - | ||
| 88 | -```html | ||
| 89 | -<link rel="dns-prefetch" href="//example.com"> | ||
| 90 | -<link rel="dns-prefetch" href="https://ajax.googleapis.com"> | ||
| 91 | -``` | ||
| 92 | - | ||
| 93 | -You can use as many of these as you need, but it's best if they are all | ||
| 94 | -immediately after the [Meta | ||
| 95 | -Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset) | ||
| 96 | -element (which should go right at the top of the `head`), so the browser can | ||
| 97 | -act on them ASAP. | ||
| 98 | - | ||
| 99 | -#### Common Prefetch Links | ||
| 100 | - | ||
| 101 | -Amazon S3: | ||
| 102 | - | ||
| 103 | -```html | ||
| 104 | -<link rel="dns-prefetch" href="//s3.amazonaws.com"> | ||
| 105 | -``` | ||
| 106 | - | ||
| 107 | -Google APIs: | ||
| 108 | - | ||
| 109 | -```html | ||
| 110 | -<link rel="dns-prefetch" href="https://ajax.googleapis.com"> | ||
| 111 | -``` | ||
| 112 | - | ||
| 113 | -Microsoft Ajax Content Delivery Network: | ||
| 114 | - | ||
| 115 | -```html | ||
| 116 | -<link rel="dns-prefetch" href="//ajax.microsoft.com"> | ||
| 117 | -<link rel="dns-prefetch" href="//ajax.aspnetcdn.com"> | ||
| 118 | -``` | ||
| 119 | - | ||
| 120 | -### Further reading about DNS prefetching | ||
| 121 | - | ||
| 122 | -* https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching | ||
| 123 | -* https://dev.chromium.org/developers/design-documents/dns-prefetching | ||
| 124 | -* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx | ||
| 125 | -* http://dayofjs.com/videos/22158462/web-browsers_alex-russel | ||
| 126 | - | ||
| 127 | - | ||
| 128 | -## Google Universal Analytics | ||
| 129 | - | ||
| 130 | -### More tracking settings | ||
| 131 | - | ||
| 132 | -The [optimized Google Universal Analytics | ||
| 133 | -snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) | ||
| 134 | -included with HTML5 Boilerplate includes something like this: | ||
| 135 | - | ||
| 136 | -```js | ||
| 137 | -ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); | ||
| 138 | -``` | ||
| 139 | - | ||
| 140 | -To customize further, see Google's [Advanced | ||
| 141 | -Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced), | ||
| 142 | -[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages), | ||
| 143 | -and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs. | ||
| 144 | - | ||
| 145 | -### Anonymize IP addresses | ||
| 146 | - | ||
| 147 | -In some countries, no personal data may be transferred outside jurisdictions | ||
| 148 | -that do not have similarly strict laws (i.e. from Germany to outside the EU). | ||
| 149 | -Thus a webmaster using the Google Universal Analytics may have to ensure that | ||
| 150 | -no personal (trackable) data is transferred to the US. You can do that with | ||
| 151 | -[the `ga('set', 'anonymizeIp', true);` | ||
| 152 | -parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip) | ||
| 153 | -before sending any events/pageviews. In use it looks like this: | ||
| 154 | - | ||
| 155 | -```js | ||
| 156 | -ga('create', 'UA-XXXXX-X', 'auto'); | ||
| 157 | -ga('set', 'anonymizeIp', true); | ||
| 158 | -ga('send', 'pageview'); | ||
| 159 | -``` | ||
| 160 | - | ||
| 161 | -### Track jQuery AJAX requests in Google Analytics | ||
| 162 | - | ||
| 163 | -An article by @JangoSteve explains how to [track jQuery AJAX requests in Google | ||
| 164 | -Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). | ||
| 165 | - | ||
| 166 | -Add this to `plugins.js`: | ||
| 167 | - | ||
| 168 | -```js | ||
| 169 | -/* | ||
| 170 | - * Log all jQuery AJAX requests to Google Analytics | ||
| 171 | - * See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ | ||
| 172 | - */ | ||
| 173 | -if (typeof ga !== "undefined" && ga !== null) { | ||
| 174 | - $(document).ajaxSend(function(event, xhr, settings){ | ||
| 175 | - ga('send', 'pageview', settings.url); | ||
| 176 | - }); | ||
| 177 | -} | ||
| 178 | -``` | ||
| 179 | - | ||
| 180 | -### Track JavaScript errors in Google Analytics | ||
| 181 | - | ||
| 182 | -Add this function after `ga` is defined: | ||
| 183 | - | ||
| 184 | -```js | ||
| 185 | -(function(window){ | ||
| 186 | - var undefined, | ||
| 187 | - link = function (href) { | ||
| 188 | - var a = window.document.createElement('a'); | ||
| 189 | - a.href = href; | ||
| 190 | - return a; | ||
| 191 | - }; | ||
| 192 | - window.onerror = function (message, file, line, column) { | ||
| 193 | - var host = link(file).hostname; | ||
| 194 | - ga('send', { | ||
| 195 | - 'hitType': 'event', | ||
| 196 | - 'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', | ||
| 197 | - 'eventAction': message, | ||
| 198 | - 'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(), | ||
| 199 | - 'nonInteraction': 1 | ||
| 200 | - }); | ||
| 201 | - }; | ||
| 202 | -}(window)); | ||
| 203 | -``` | ||
| 204 | - | ||
| 205 | -### Track page scroll | ||
| 206 | - | ||
| 207 | -Add this function after `ga` is defined: | ||
| 208 | - | ||
| 209 | -```js | ||
| 210 | -$(function(){ | ||
| 211 | - var isDuplicateScrollEvent, | ||
| 212 | - scrollTimeStart = new Date, | ||
| 213 | - $window = $(window), | ||
| 214 | - $document = $(document), | ||
| 215 | - scrollPercent; | ||
| 216 | - | ||
| 217 | - $window.scroll(function() { | ||
| 218 | - scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); | ||
| 219 | - if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% | ||
| 220 | - isDuplicateScrollEvent = 1; | ||
| 221 | - ga('send', 'event', 'scroll', | ||
| 222 | - 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's' | ||
| 223 | - ); | ||
| 224 | - } | ||
| 225 | - }); | ||
| 226 | -}); | ||
| 227 | -``` | ||
| 228 | - | ||
| 229 | -## Internet Explorer | ||
| 230 | - | ||
| 231 | -### Prompt users to switch to "Desktop Mode" in IE10 Metro | ||
| 232 | - | ||
| 233 | -IE10 does not support plugins, such as Flash, in Metro mode. If | ||
| 234 | -your site requires plugins, you can let users know that via the | ||
| 235 | -`x-ua-compatible` meta element, which will prompt them to switch | ||
| 236 | -to Desktop Mode. | ||
| 237 | - | ||
| 238 | -```html | ||
| 239 | -<meta http-equiv="x-ua-compatible" content="requiresActiveX=true"> | ||
| 240 | -``` | ||
| 241 | - | ||
| 242 | -Here's what it looks like alongside H5BP's default `x-ua-compatible` | ||
| 243 | -values: | ||
| 244 | - | ||
| 245 | -```html | ||
| 246 | -<meta http-equiv="x-ua-compatible" content="ie=edge,requiresActiveX=true"> | ||
| 247 | -``` | ||
| 248 | - | ||
| 249 | -You can find more information in [Microsoft's IEBlog post about prompting for | ||
| 250 | -plugin use in IE10 Metro | ||
| 251 | -Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx). | ||
| 252 | - | ||
| 253 | -### IE Pinned Sites (IE9+) | ||
| 254 | - | ||
| 255 | -Enabling your application for pinning will allow IE9 users to add it to their | ||
| 256 | -Windows Taskbar and Start Menu. This comes with a range of new tools that you | ||
| 257 | -can easily configure with the elements below. See more [documentation on IE9 | ||
| 258 | -Pinned Sites](https://msdn.microsoft.com/en-us/library/gg131029.aspx). | ||
| 259 | - | ||
| 260 | -### Name the Pinned Site for Windows | ||
| 261 | - | ||
| 262 | -Without this rule, Windows will use the page title as the name for your | ||
| 263 | -application. | ||
| 264 | - | ||
| 265 | -```html | ||
| 266 | -<meta name="application-name" content="Sample Title"> | ||
| 267 | -``` | ||
| 268 | - | ||
| 269 | -### Give your Pinned Site a tooltip | ||
| 270 | - | ||
| 271 | -You know — a tooltip. A little textbox that appears when the user holds their | ||
| 272 | -mouse over your Pinned Site's icon. | ||
| 273 | - | ||
| 274 | -```html | ||
| 275 | -<meta name="msapplication-tooltip" content="A description of what this site does."> | ||
| 276 | -``` | ||
| 277 | - | ||
| 278 | -### Set a default page for your Pinned Site | ||
| 279 | - | ||
| 280 | -If the site should go to a specific URL when it is pinned (such as the | ||
| 281 | -homepage), enter it here. One idea is to send it to a special URL so you can | ||
| 282 | -track the number of pinned users, like so: | ||
| 283 | -`http://www.example.com/index.html?pinned=true` | ||
| 284 | - | ||
| 285 | -```html | ||
| 286 | -<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true"> | ||
| 287 | -``` | ||
| 288 | - | ||
| 289 | -### Recolor IE's controls manually for a Pinned Site | ||
| 290 | - | ||
| 291 | -IE9+ will automatically use the overall color of your Pinned Site's favicon to | ||
| 292 | -shade its browser buttons. UNLESS you give it another color here. Only use | ||
| 293 | -named colors (`red`) or hex colors (`#ff0000`). | ||
| 294 | - | ||
| 295 | -```html | ||
| 296 | -<meta name="msapplication-navbutton-color" content="#ff0000"> | ||
| 297 | -``` | ||
| 298 | - | ||
| 299 | -### Manually set the window size of a Pinned Site | ||
| 300 | - | ||
| 301 | -If the site should open at a certain window size once pinned, you can specify | ||
| 302 | -the dimensions here. It only supports static pixel dimensions. 800x600 | ||
| 303 | -minimum. | ||
| 304 | - | ||
| 305 | -```html | ||
| 306 | -<meta name="msapplication-window" content="width=800;height=600"> | ||
| 307 | -``` | ||
| 308 | - | ||
| 309 | -### Jump List "Tasks" for Pinned Sites | ||
| 310 | - | ||
| 311 | -Add Jump List Tasks that will appear when the Pinned Site's icon gets a | ||
| 312 | -right-click. Each Task goes to the specified URL, and gets its own mini icon | ||
| 313 | -(essentially a favicon, a 16x16 .ICO). You can add as many of these as you | ||
| 314 | -need. | ||
| 315 | - | ||
| 316 | -```html | ||
| 317 | -<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"> | ||
| 318 | -<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"> | ||
| 319 | -``` | ||
| 320 | - | ||
| 321 | -### (Windows 8) High quality visuals for Pinned Sites | ||
| 322 | - | ||
| 323 | -Windows 8 adds the ability for you to provide a PNG tile image and specify the | ||
| 324 | -tile's background color. [Full details on the IE | ||
| 325 | -blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). | ||
| 326 | - | ||
| 327 | -* Create a 144x144 image of your site icon, filling all of the canvas, and | ||
| 328 | - using a transparent background. | ||
| 329 | -* Save this image as a 32-bit PNG and optimize it without reducing | ||
| 330 | - colour-depth. It can be named whatever you want (e.g. `metro-tile.png`). | ||
| 331 | -* To reference the tile and its color, add the HTML `meta` elements described | ||
| 332 | - in the IE Blog post. | ||
| 333 | - | ||
| 334 | -### (Windows 8) Badges for Pinned Sites | ||
| 335 | - | ||
| 336 | -IE10 will poll an XML document for badge information to display on your app's | ||
| 337 | -tile in the Start screen. The user will be able to receive these badge updates | ||
| 338 | -even when your app isn't actively running. The badge's value can be a number, | ||
| 339 | -or one of a predefined list of glyphs. | ||
| 340 | - | ||
| 341 | -* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx) | ||
| 342 | -* [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx) | ||
| 343 | - | ||
| 344 | -```html | ||
| 345 | -<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml"> | ||
| 346 | -``` | ||
| 347 | - | ||
| 348 | -### Disable link highlighting upon tap in IE10 | ||
| 349 | - | ||
| 350 | -Similar to [-webkit-tap-highlight-color](http://davidwalsh.name/mobile-highlight-color) | ||
| 351 | -in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its | ||
| 352 | -value is boolean rather than a color. It's all or nothing. | ||
| 353 | - | ||
| 354 | -```html | ||
| 355 | -<meta name="msapplication-tap-highlight" content="no" /> | ||
| 356 | -``` | ||
| 357 | - | ||
| 358 | -You can read about this useful element and more techniques in | ||
| 359 | -[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) | ||
| 360 | - | ||
| 361 | -## Search | ||
| 362 | - | ||
| 363 | -### Direct search spiders to your sitemap | ||
| 364 | - | ||
| 365 | -[Learn how to make a sitemap](http://www.sitemaps.org/protocol.html) | ||
| 366 | - | ||
| 367 | -```html | ||
| 368 | -<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"> | ||
| 369 | -``` | ||
| 370 | - | ||
| 371 | -### Hide pages from search engines | ||
| 372 | - | ||
| 373 | -According to Heather Champ, former community manager at Flickr, you should not | ||
| 374 | -allow search engines to index your "Contact Us" or "Complaints" page if you | ||
| 375 | -value your sanity. This is an HTML-centric way of achieving that. | ||
| 376 | - | ||
| 377 | -```html | ||
| 378 | -<meta name="robots" content="noindex"> | ||
| 379 | -``` | ||
| 380 | - | ||
| 381 | -**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. | ||
| 382 | - | ||
| 383 | -### Firefox and IE Search Plugins | ||
| 384 | - | ||
| 385 | -Sites with in-site search functionality should be strongly considered for a | ||
| 386 | -browser search plugin. A "search plugin" is an XML file which defines how your | ||
| 387 | -plugin behaves in the browser. [How to make a browser search | ||
| 388 | -plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). | ||
| 389 | - | ||
| 390 | -```html | ||
| 391 | -<link rel="search" title="" type="application/opensearchdescription+xml" href=""> | ||
| 392 | -``` | ||
| 393 | - | ||
| 394 | - | ||
| 395 | -## Miscellaneous | ||
| 396 | - | ||
| 397 | -* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). | ||
| 398 | - | ||
| 399 | -* Use [Microformats](http://microformats.org/wiki/Main_Page) (via | ||
| 400 | - [microdata](http://microformats.org/wiki/microdata)) for optimum search | ||
| 401 | - results | ||
| 402 | - [visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html). | ||
| 403 | - | ||
| 404 | -* If you're building a web app you may want [native style momentum scrolling in | ||
| 405 | - iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/) | ||
| 406 | - using `-webkit-overflow-scrolling: touch`. | ||
| 407 | - | ||
| 408 | -* If you want to disable the translation prompt in Chrome or block Google | ||
| 409 | - Translate from translating your web page, use [`<meta name="google" | ||
| 410 | - value="notranslate">`](https://support.google.com/translate/?hl=en#2641276). | ||
| 411 | - To disable translation for a particular section of the web page, add | ||
| 412 | - [`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276). | ||
| 413 | - | ||
| 414 | -* If you want to disable the automatic detection and formatting of possible | ||
| 415 | - phone numbers in Safari on iOS, use [`<meta name="format-detection" | ||
| 416 | - content="telephone=no">`](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5). | ||
| 417 | - | ||
| 418 | -* Avoid development/stage websites "leaking" into SERPs (search engine results | ||
| 419 | - page) by [implementing X-Robots-tag | ||
| 420 | - headers](https://github.com/h5bp/html5-boilerplate/issues/804). | ||
| 421 | - | ||
| 422 | -* Screen readers currently have less-than-stellar support for HTML5 but the JS | ||
| 423 | - script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can | ||
| 424 | - help increase accessibility by adding ARIA roles to HTML5 elements. | ||
| 425 | - | ||
| 426 | - | ||
| 427 | -## News Feeds | ||
| 428 | - | ||
| 429 | -### RSS | ||
| 430 | - | ||
| 431 | -Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from | ||
| 432 | -scratch](http://www.rssboard.org/rss-specification)? | ||
| 433 | - | ||
| 434 | -```html | ||
| 435 | -<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> | ||
| 436 | -``` | ||
| 437 | - | ||
| 438 | -### Atom | ||
| 439 | - | ||
| 440 | -Atom is similar to RSS, and you might prefer to use it instead of or in | ||
| 441 | -addition to it. [See what Atom's all | ||
| 442 | -about](http://www.atomenabled.org/developers/syndication/). | ||
| 443 | - | ||
| 444 | -```html | ||
| 445 | -<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml"> | ||
| 446 | -``` | ||
| 447 | - | ||
| 448 | -### Pingbacks | ||
| 449 | - | ||
| 450 | -Your server may be notified when another site links to yours. The href | ||
| 451 | -attribute should contain the location of your pingback service. | ||
| 452 | - | ||
| 453 | -```html | ||
| 454 | -<link rel="pingback" href=""> | ||
| 455 | -``` | ||
| 456 | - | ||
| 457 | -* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks | ||
| 458 | -* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 | ||
| 459 | -* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ | ||
| 460 | - | ||
| 461 | - | ||
| 462 | - | ||
| 463 | -## Social Networks | ||
| 464 | - | ||
| 465 | -### Facebook Open Graph data | ||
| 466 | - | ||
| 467 | -You can control the information that Facebook and others display when users | ||
| 468 | -share your site. Below are just the most basic data points you might need. For | ||
| 469 | -specific content types (including "website"), see [Facebook's built-in Open | ||
| 470 | -Graph content | ||
| 471 | -templates](https://developers.facebook.com/docs/opengraph/objects/builtin/). | ||
| 472 | -Take full advantage of Facebook's support for complex data and activity by | ||
| 473 | -following the [Open Graph | ||
| 474 | -tutorial](https://developers.facebook.com/docs/opengraph/tutorial/). | ||
| 475 | - | ||
| 476 | -```html | ||
| 477 | -<meta property="og:title" content=""> | ||
| 478 | -<meta property="og:description" content=""> | ||
| 479 | -<meta property="og:image" content=""> | ||
| 480 | -``` | ||
| 481 | - | ||
| 482 | -### Twitter Cards | ||
| 483 | - | ||
| 484 | -Twitter provides a snippet specification that serves a similar purpose to Open | ||
| 485 | -Graph. In fact, Twitter will use Open Graph when Cards is not available. Note | ||
| 486 | -that, as of this writing, Twitter requires that app developers activate Cards | ||
| 487 | -on a per-domain basis. You can read more about the various snippet formats | ||
| 488 | -and application process in the [official Twitter Cards | ||
| 489 | -documentation](https://dev.twitter.com/docs/cards). | ||
| 490 | - | ||
| 491 | -```html | ||
| 492 | -<meta name="twitter:card" content="summary"> | ||
| 493 | -<meta name="twitter:site" content="@site_account"> | ||
| 494 | -<meta name="twitter:creator" content="@individual_account"> | ||
| 495 | -<meta name="twitter:url" content="http://www.example.com/path/to/page.html"> | ||
| 496 | -<meta name="twitter:title" content=""> | ||
| 497 | -<meta name="twitter:description" content=""> | ||
| 498 | -<meta name="twitter:image" content="http://www.example.com/path/to/image.jpg"> | ||
| 499 | -``` | ||
| 500 | - | ||
| 501 | - | ||
| 502 | -## URLs | ||
| 503 | - | ||
| 504 | -### Canonical URL | ||
| 505 | - | ||
| 506 | -Signal to search engines and others "Use this URL for this page!" Useful when | ||
| 507 | -parameters after a `#` or `?` is used to control the display state of a page. | ||
| 508 | -`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as | ||
| 509 | -the cleaner, more accurate `http://www.example.com/cart.html`. | ||
| 510 | - | ||
| 511 | -```html | ||
| 512 | -<link rel="canonical" href=""> | ||
| 513 | -``` | ||
| 514 | - | ||
| 515 | -### Official shortlink | ||
| 516 | - | ||
| 517 | -Signal to the world "This is the shortened URL to use this page!" Poorly | ||
| 518 | -supported at this time. Learn more by reading the [article about shortlinks on | ||
| 519 | -the Microformats wiki](http://microformats.org/wiki/rel-shortlink). | ||
| 520 | - | ||
| 521 | -```html | ||
| 522 | -<link rel="shortlink" href="h5bp.com"> | ||
| 523 | -``` | ||
| 524 | - | ||
| 525 | -### Separate mobile URLs | ||
| 526 | - | ||
| 527 | -If you use separate URLs for desktop and mobile users, you should consider | ||
| 528 | -helping search engine algorithms better understand the configuration on your | ||
| 529 | -web site. | ||
| 530 | - | ||
| 531 | -This can be done by adding the following annotations in your HTML pages: | ||
| 532 | - | ||
| 533 | -* on the desktop page, add the `link rel="alternate"` tag pointing to the | ||
| 534 | - corresponding mobile URL, e.g.: | ||
| 535 | - | ||
| 536 | - `<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" >` | ||
| 537 | - | ||
| 538 | -* on the mobile page, add the `link rel="canonical"` tag pointing to the | ||
| 539 | - corresponding desktop URL, e.g.: | ||
| 540 | - | ||
| 541 | - `<link rel="canonical" href="http://www.example.com/page.html">` | ||
| 542 | - | ||
| 543 | -For more information please see: | ||
| 544 | - | ||
| 545 | -* https://developers.google.com/webmasters/smartphone-sites/details#separateurls | ||
| 546 | -* https://developers.google.com/webmasters/smartphone-sites/feature-phones | ||
| 547 | - | ||
| 548 | - | ||
| 549 | -## Web Apps | ||
| 550 | - | ||
| 551 | -There are a couple of meta tags that provide information about a web app when | ||
| 552 | -added to the Home Screen on iOS: | ||
| 553 | - | ||
| 554 | -* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and | ||
| 555 | -provide the default iOS app view. You can control the color scheme of the | ||
| 556 | -default view by adding `apple-mobile-web-app-status-bar-style`. | ||
| 557 | - | ||
| 558 | - ```html | ||
| 559 | -<meta name="apple-mobile-web-app-capable" content="yes"> | ||
| 560 | -<meta name="apple-mobile-web-app-status-bar-style" content="black"> | ||
| 561 | -``` | ||
| 562 | - | ||
| 563 | -* You can use `apple-mobile-web-app-title` to add a specific sites name for the | ||
| 564 | -Home Screen icon. This works since iOS 6. | ||
| 565 | - | ||
| 566 | - ```html | ||
| 567 | -<meta name="apple-mobile-web-app-title" content=""> | ||
| 568 | -``` | ||
| 569 | - | ||
| 570 | -For further information please read the [official | ||
| 571 | -documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) | ||
| 572 | -on Apple's site. | ||
| 573 | - | ||
| 574 | - | ||
| 575 | -### Apple Touch Icons | ||
| 576 | - | ||
| 577 | -The Apple touch icons can be seen as the favicons of iOS devices. | ||
| 578 | - | ||
| 579 | -The main sizes of the Apple touch icons are: | ||
| 580 | - | ||
| 581 | -* `57×57px` – iPhone with @1x display and iPod Touch | ||
| 582 | -* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6 | ||
| 583 | -* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7 | ||
| 584 | -* `114×114px` – iPhone with @2x display running iOS ≤ 6 | ||
| 585 | -* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7 | ||
| 586 | -* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6 | ||
| 587 | -* `152×152px` – iPad and iPad mini with @2x display running iOS 7 | ||
| 588 | -* `180×180px` – iPad and iPad mini with @2x display running iOS 8 | ||
| 589 | - | ||
| 590 | -Displays meaning: | ||
| 591 | - | ||
| 592 | -* @1x - non-Retina | ||
| 593 | -* @2x - Retina | ||
| 594 | -* @3x - Retina HD | ||
| 595 | - | ||
| 596 | -More information about the displays of iOS devices can be found | ||
| 597 | -[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display). | ||
| 598 | - | ||
| 599 | -In most cases, one `180×180px` touch icon named `apple-touch-icon.png` | ||
| 600 | -and including: | ||
| 601 | - | ||
| 602 | -```html | ||
| 603 | -<link rel="apple-touch-icon" href="apple-touch-icon.png"> | ||
| 604 | -``` | ||
| 605 | - | ||
| 606 | -in the `<head>` of the page is enough. If you use art-direction and/or | ||
| 607 | -want to have different content for each device, you can add more touch | ||
| 608 | -icons as written above. | ||
| 609 | - | ||
| 610 | -For a more comprehensive overview, please refer to Mathias' [article on Touch | ||
| 611 | -Icons](https://mathiasbynens.be/notes/touch-icons). | ||
| 612 | - | ||
| 613 | - | ||
| 614 | -### Apple Touch Startup Image | ||
| 615 | - | ||
| 616 | -Apart from that it is possible to add start-up screens for web apps on iOS. This | ||
| 617 | -basically works by defining `apple-touch-startup-image` with an according link | ||
| 618 | -to the image. Since iOS devices have different screen resolutions it is | ||
| 619 | -necessary to add media queries to detect which image to load. Here is an | ||
| 620 | -example for a retina iPhone: | ||
| 621 | - | ||
| 622 | -```html | ||
| 623 | -<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png"> | ||
| 624 | -``` | ||
| 625 | - | ||
| 626 | -However, it is possible to detect which start-up image to use with JavaScript. | ||
| 627 | -The Mobile Boilerplate provides a useful function for this. Please see | ||
| 628 | -[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383) | ||
| 629 | -for the implementation. | ||
| 630 | - | ||
| 631 | - | ||
| 632 | -### Chrome Mobile web apps | ||
| 633 | - | ||
| 634 | -Chrome Mobile has a specific meta tag for making apps [installable to the | ||
| 635 | -homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen) | ||
| 636 | -which tries to be a more generic replacement to Apple's proprietary meta tag: | ||
| 637 | - | ||
| 638 | -```html | ||
| 639 | -<meta name="mobile-web-app-capable" content="yes"> | ||
| 640 | -``` | ||
| 641 | - | ||
| 642 | -Same applies to the touch icons: | ||
| 643 | - | ||
| 644 | -```html | ||
| 645 | -<link rel="icon" sizes="192x192" href="highres-icon.png"> | ||
| 646 | -``` | ||
| 647 | - | ||
| 648 | -### Theme Color | ||
| 649 | - | ||
| 650 | -You can add the [`theme-color` meta extension](https://github.com/whatwg/meta-theme-color) | ||
| 651 | -in the `<head>` of your pages to suggest the color that browsers and | ||
| 652 | -OSes should use if they customize the display of individual pages in | ||
| 653 | -their UIs with varying colors. | ||
| 654 | - | ||
| 655 | -```html | ||
| 656 | -<meta name="theme-color" content="#ff69b4"> | ||
| 657 | -``` | ||
| 658 | - | ||
| 659 | -The `content` attribute extension can take any valid CSS color. | ||
| 660 | - | ||
| 661 | -Currently, the `theme-color` meta extension is supported by [Chrome 39+ | ||
| 662 | -for Android Lollipop](http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) | ||
| 663 | -and [Firefox OS 2.1+](https://twitter.com/ahmednefzaoui/status/492344698493997057). |
doc/faq.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# Frequently asked questions | ||
| 5 | - | ||
| 6 | -* [Why is the Google Analytics code at the bottom? Google recommends it be | ||
| 7 | - placed in the `<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head) | ||
| 8 | -* [How can I integrate Bootstrap with HTML5 | ||
| 9 | - Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate) | ||
| 10 | -* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is | ||
| 11 | - released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released) | ||
| 12 | -* [Where can I get help with support | ||
| 13 | - questions?](#where-can-i-get-help-with-support-questions) | ||
| 14 | - | ||
| 15 | --- | ||
| 16 | - | ||
| 17 | - | ||
| 18 | -### Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`. | ||
| 19 | - | ||
| 20 | -The main advantage of placing it in the `<head>` is that you will track the | ||
| 21 | -user's `pageview` even if they leave the page before it has been fully loaded. | ||
| 22 | -However, having the code at the bottom of the page [helps improve | ||
| 23 | -performance](https://stevesouders.com/efws/inline-scripts-bottom.php). | ||
| 24 | - | ||
| 25 | - | ||
| 26 | -### How can I integrate [Bootstrap](http://getbootstrap.com/) with HTML5 Boilerplate? | ||
| 27 | - | ||
| 28 | -One simple way is to use [Initializr](http://www.initializr.com/) and create a | ||
| 29 | -custom build that includes both HTML5 Boilerplate and | ||
| 30 | -[Bootstrap](http://getbootstrap.com/). | ||
| 31 | - | ||
| 32 | -Read more about how [HTML5 Boilerplate and Bootstrap complement each | ||
| 33 | -other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher). | ||
| 34 | - | ||
| 35 | - | ||
| 36 | -### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released? | ||
| 37 | - | ||
| 38 | -No, same as you don't normally replace the foundation of a house once it | ||
| 39 | -was built. However, there is nothing stopping you from trying to work in the | ||
| 40 | -latest changes, but you'll have to assess the costs/benefits of doing so. | ||
| 41 | - | ||
| 42 | - | ||
| 43 | -### Where can I get help with support questions? | ||
| 44 | - | ||
| 45 | -Please ask for help on | ||
| 46 | -[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate). |
doc/html.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# The HTML | ||
| 5 | - | ||
| 6 | -By default, HTML5 Boilerplate provides two `html` pages: | ||
| 7 | - | ||
| 8 | -* [`index.html`](#indexhtml) - a default HTML skeleton that should form the | ||
| 9 | - basis of all pages on your website | ||
| 10 | -* [`404.html`](#404html) - a placeholder 404 error page | ||
| 11 | - | ||
| 12 | - | ||
| 13 | -## `index.html` | ||
| 14 | - | ||
| 15 | - | ||
| 16 | -### The `no-js` class | ||
| 17 | - | ||
| 18 | -The `no-js` class is provided in order to allow you to more easily and | ||
| 19 | -explicitly add custom styles based on whether JavaScript is disabled | ||
| 20 | -(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the | ||
| 21 | -FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/). | ||
| 22 | - | ||
| 23 | - | ||
| 24 | -## Language attribute | ||
| 25 | - | ||
| 26 | -Please consider specifying the language of your content by adding the `lang` | ||
| 27 | -attribute to `<html>` as in this example: | ||
| 28 | - | ||
| 29 | -```html | ||
| 30 | -<html class="no-js" lang="en"> | ||
| 31 | -``` | ||
| 32 | - | ||
| 33 | -### The order of the `<title>` and `<meta>` tags | ||
| 34 | - | ||
| 35 | -The order in which the `<title>` and the `<meta>` tags are specified is | ||
| 36 | -important because: | ||
| 37 | - | ||
| 38 | -1) the charset declaration (`<meta charset="utf-8">`): | ||
| 39 | - | ||
| 40 | - * must be included completely within the [first 1024 bytes of the | ||
| 41 | - document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset) | ||
| 42 | - | ||
| 43 | - * should be specified as early as possible (before any content that could | ||
| 44 | - be controlled by an attacker, such as a `<title>` element) in order to | ||
| 45 | - avoid a potential [encoding-related security | ||
| 46 | - issue](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in | ||
| 47 | - Internet Explorer | ||
| 48 | - | ||
| 49 | -2) the meta tag for compatibility mode | ||
| 50 | - (`<meta http-equiv="x-ua-compatible" content="ie=edge">`): | ||
| 51 | - | ||
| 52 | - * [needs to be included before all other tags except for the `<title>` and | ||
| 53 | - the other `<meta>` | ||
| 54 | - tags](https://msdn.microsoft.com/en-us/library/cc288325.aspx) | ||
| 55 | - | ||
| 56 | - | ||
| 57 | -### `x-ua-compatible` | ||
| 58 | - | ||
| 59 | -Internet Explorer 8/9/10 support [document compatibility | ||
| 60 | -modes](https://msdn.microsoft.com/en-us/library/cc288325.aspx) that affect the | ||
| 61 | -way webpages are interpreted and displayed. Because of this, even if your site's | ||
| 62 | -visitor is using, let's say, Internet Explorer 9, it's possible that IE will not | ||
| 63 | -use the latest rendering engine, and instead, decide to render your page using | ||
| 64 | -the Internet Explorer 5.5 rendering engine. | ||
| 65 | - | ||
| 66 | -Specifying the `x-ua-compatible` meta tag: | ||
| 67 | - | ||
| 68 | -```html | ||
| 69 | -<meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| 70 | -``` | ||
| 71 | - | ||
| 72 | -or sending the page with the following HTTP response header | ||
| 73 | - | ||
| 74 | -``` | ||
| 75 | -X-UA-Compatible: IE=edge | ||
| 76 | -``` | ||
| 77 | - | ||
| 78 | -will force Internet Explorer 8/9/10 to render the webpage in the highest | ||
| 79 | -available mode in [the various cases when it may | ||
| 80 | -not](https://hsivonen.fi/doctype/#ie8), and therefore, ensure that anyone | ||
| 81 | -browsing your site is treated to the best possible user experience that | ||
| 82 | -browser can offer. | ||
| 83 | - | ||
| 84 | -If possible, we recommend that you remove the `meta` tag and send only the | ||
| 85 | -HTTP response header as the `meta` tag will not always work if your site is | ||
| 86 | -served on a non-standard port, as Internet Explorer's preference option | ||
| 87 | -`Display intranet sites in Compatibility View` is checked by default. | ||
| 88 | - | ||
| 89 | -If you are using Apache as your webserver, including the | ||
| 90 | -[`.htaccess`](https://github.com/h5bp/server-configs-apache) file takes care of | ||
| 91 | -the HTTP header. If you are using a different server, check out our [other | ||
| 92 | -server config](https://github.com/h5bp/server-configs). | ||
| 93 | - | ||
| 94 | -Starting with Internet Explorer 11, [document modes are | ||
| 95 | -deprecated](https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode). | ||
| 96 | -If your business still relies on older web apps and services that were | ||
| 97 | -designed for older versions of Internet Explorer, you might want to consider | ||
| 98 | -enabling [Enterprise Mode](http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx) throughout your company. | ||
| 99 | - | ||
| 100 | - | ||
| 101 | -## Mobile viewport | ||
| 102 | - | ||
| 103 | -There are a few different options that you can use with the [`viewport` meta | ||
| 104 | -tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and | ||
| 105 | -Media Queries - The Complete Idiot's Guide"). You can find out more in [the | ||
| 106 | -Apple developer docs](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html). | ||
| 107 | -HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases. | ||
| 108 | - | ||
| 109 | -```html | ||
| 110 | -<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 111 | -``` | ||
| 112 | - | ||
| 113 | -## Favicons and Touch Icon | ||
| 114 | - | ||
| 115 | -The shortcut icons should be put in the root directory of your site. HTML5 | ||
| 116 | -Boilerplate comes with a default set of icons (include favicon and one Apple | ||
| 117 | -Touch Icon) that you can use as a baseline to create your own. | ||
| 118 | - | ||
| 119 | -Please refer to the more detailed description in the [Extend section](extend.md) | ||
| 120 | -of these docs. | ||
| 121 | - | ||
| 122 | -## Modernizr | ||
| 123 | - | ||
| 124 | -HTML5 Boilerplate uses a custom build of Modernizr. | ||
| 125 | - | ||
| 126 | -[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to | ||
| 127 | -the `html` element based on the results of feature test and which ensures that | ||
| 128 | -all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). | ||
| 129 | -This allows you to target parts of your CSS and JavaScript based on the | ||
| 130 | -features supported by a browser. | ||
| 131 | - | ||
| 132 | -In general, in order to keep page load times to a minimum, it's best to call | ||
| 133 | -any JavaScript at the end of the page because if a script is slow to load | ||
| 134 | -from an external server it may cause the whole page to hang. That said, the | ||
| 135 | -Modernizr script *needs* to run *before* the browser begins rendering the page, | ||
| 136 | -so that browsers lacking support for some of the new HTML5 elements are able to | ||
| 137 | -handle them properly. Therefore the Modernizr script is the only JavaScript | ||
| 138 | -file synchronously loaded at the top of the document. | ||
| 139 | - | ||
| 140 | -## What about polyfills? | ||
| 141 | - | ||
| 142 | -If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) | ||
| 143 | -in your project, you must make sure those load before any other JavaScript. If you're | ||
| 144 | -using some polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/), | ||
| 145 | -just put it before the other scripts in the bottom of the page: | ||
| 146 | - | ||
| 147 | -```html | ||
| 148 | - <script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script> | ||
| 149 | - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | ||
| 150 | - <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> | ||
| 151 | - <script src="js/plugins.js"></script> | ||
| 152 | - <script src="js/main.js"></script> | ||
| 153 | -</body> | ||
| 154 | -``` | ||
| 155 | - | ||
| 156 | -If you like to just include the polyfills yourself, you could include them in | ||
| 157 | -`js/plugins.js`. When you have a bunch of polyfills to load in, you could | ||
| 158 | -also create a `polyfills.js` file in the `js/vendor` directory. Also using | ||
| 159 | -this technique, make sure the polyfills are all loaded before any other | ||
| 160 | -Javascript. | ||
| 161 | - | ||
| 162 | -There are some misconceptions about Modernizr and polyfills. It's important | ||
| 163 | -to understand that Modernizr just handles feature checking, not polyfilling | ||
| 164 | -itself. The only thing Modernizr does regarding polyfills is that the team | ||
| 165 | -maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). | ||
| 166 | - | ||
| 167 | -## The content area | ||
| 168 | - | ||
| 169 | -The central part of the boilerplate template is pretty much empty. This is | ||
| 170 | -intentional, in order to make the boilerplate suitable for both web page and | ||
| 171 | -web app development. | ||
| 172 | - | ||
| 173 | -### Browser Upgrade Prompt | ||
| 174 | - | ||
| 175 | -The main content area of the boilerplate includes a prompt to install an up to | ||
| 176 | -date browser for users of IE 6/7. If you intended to support IE 6/7, then you | ||
| 177 | -should remove the snippet of code. | ||
| 178 | - | ||
| 179 | -### jQuery CDN for jQuery | ||
| 180 | - | ||
| 181 | -The jQuery CDN version of the jQuery JavaScript library is referenced towards | ||
| 182 | -the bottom of the page. A local fallback of jQuery is included for rare instances | ||
| 183 | -when the CDN version might not be available, and to facilitate offline | ||
| 184 | -development. | ||
| 185 | - | ||
| 186 | -The jQuery CDN version was chosen over other potential candidates | ||
| 187 | -([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/)) | ||
| 188 | -because it's fast ([comparable or faster than Google by some | ||
| 189 | -measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90)) | ||
| 190 | -and, (unlike Google's CDN) is available to China's hundreds of millions of internet users. | ||
| 191 | -For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191) | ||
| 192 | -the Google Hosted version over the jQuery CDN because it was available | ||
| 193 | -over HTTPS (the jQuery CDN was not,) and it offered a better chance of | ||
| 194 | -hitting the cache lottery owing to the popularity of the Google CDN. | ||
| 195 | -The first issue is no longer valid and the second is far outweighed by | ||
| 196 | -being able to serve jQuery to Chinese users. | ||
| 197 | - | ||
| 198 | -While the jQuery CDN is a strong default solution your site or application may | ||
| 199 | -require a different configuration. Testing your site with services like | ||
| 200 | -[WebPageTest](https://www.webpagetest.org/) and browser tools like | ||
| 201 | -[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) or | ||
| 202 | -[YSlow](https://developer.yahoo.com/yslow/) will help you examine the real | ||
| 203 | -world performance of your site and can show where you can optimize your specific | ||
| 204 | -site or application. | ||
| 205 | - | ||
| 206 | -### Google Universal Analytics Tracking Code | ||
| 207 | - | ||
| 208 | -Finally, an optimized version of the Google Universal Analytics tracking code is | ||
| 209 | -included. Google recommends that this script be placed at the top of the page. | ||
| 210 | -Factors to consider: if you place this script at the top of the page, you’ll | ||
| 211 | -be able to count users who don’t fully load the page, and you’ll incur the max | ||
| 212 | -number of simultaneous connections of the browser. | ||
| 213 | - | ||
| 214 | -Further information: | ||
| 215 | - | ||
| 216 | -* [Optimizing the Google Universal Analytics | ||
| 217 | - Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) | ||
| 218 | -* [Introduction to | ||
| 219 | - Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/) | ||
| 220 | -* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/) | ||
| 221 | - | ||
| 222 | -**N.B.** The Google Universal Analytics snippet is included by default mainly | ||
| 223 | -because Google Analytics is [currently one of the most popular tracking | ||
| 224 | -solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there. | ||
| 225 | -However, its usage isn't set in stone, and you SHOULD consider exploring the | ||
| 226 | -[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software) | ||
| 227 | -and use whatever suits your needs best! |
doc/js.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# The JavaScript | ||
| 5 | - | ||
| 6 | -Information about the default JavaScript included in the project. | ||
| 7 | - | ||
| 8 | -## main.js | ||
| 9 | - | ||
| 10 | -This file can be used to contain or reference your site/app JavaScript code. | ||
| 11 | -For larger projects, you can make use of a JavaScript module loader, like | ||
| 12 | -[Require.js](http://requirejs.org/), to load any other scripts you need to | ||
| 13 | -run. | ||
| 14 | - | ||
| 15 | -## plugins.js | ||
| 16 | - | ||
| 17 | -This file can be used to contain all your plugins, such as jQuery plugins and | ||
| 18 | -other 3rd party scripts. | ||
| 19 | - | ||
| 20 | -One approach is to put jQuery plugins inside of a `(function($){ ... | ||
| 21 | -})(jQuery);` closure to make sure they're in the jQuery namespace safety | ||
| 22 | -blanket. Read more about [jQuery plugin | ||
| 23 | -authoring](https://learn.jquery.com/plugins/#Getting_Started). | ||
| 24 | - | ||
| 25 | -By default the `plugins.js` file contains a small script to avoid `console` | ||
| 26 | -errors in browsers that lack a `console`. The script will make sure that, if | ||
| 27 | -a console method isn't available, that method will have the value of empty | ||
| 28 | -function, thus, preventing the browser from throwing an error. | ||
| 29 | - | ||
| 30 | - | ||
| 31 | -## vendor | ||
| 32 | - | ||
| 33 | -This directory can be used to contain all 3rd party library code. | ||
| 34 | - | ||
| 35 | -Minified versions of the latest jQuery and Modernizr libraries are included by | ||
| 36 | -default. You may wish to create your own [custom Modernizr | ||
| 37 | -build](http://www.modernizr.com/download/). |
doc/misc.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# Miscellaneous | ||
| 5 | - | ||
| 6 | -* [.gitignore](#gitignore) | ||
| 7 | -* [.editorconfig](#editorconfig) | ||
| 8 | -* [Server Configuration](#server-configuration) | ||
| 9 | -* [crossdomain.xml](#crossdomainxml) | ||
| 10 | -* [robots.txt](#robotstxt) | ||
| 11 | -* [browserconfig.xml](#browserconfigxml) | ||
| 12 | - | ||
| 13 | --- | ||
| 14 | - | ||
| 15 | -## .gitignore | ||
| 16 | - | ||
| 17 | -HTML5 Boilerplate includes a basic project-level `.gitignore`. This should | ||
| 18 | -primarily be used to avoid certain project-level files and directories from | ||
| 19 | -being kept under source control. Different development-environments will | ||
| 20 | -benefit from different collections of ignores. | ||
| 21 | - | ||
| 22 | -OS-specific and editor-specific files should be ignored using a "global | ||
| 23 | -ignore" that applies to all repositories on your system. | ||
| 24 | - | ||
| 25 | -For example, add the following to your `~/.gitconfig`, where the `.gitignore` | ||
| 26 | -in your HOME directory contains the files and directories you'd like to | ||
| 27 | -globally ignore: | ||
| 28 | - | ||
| 29 | -```gitignore | ||
| 30 | -[core] | ||
| 31 | - excludesfile = ~/.gitignore | ||
| 32 | -``` | ||
| 33 | - | ||
| 34 | -* More on global ignores: https://help.github.com/articles/ignoring-files | ||
| 35 | -* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore | ||
| 36 | - | ||
| 37 | - | ||
| 38 | -## .editorconfig | ||
| 39 | - | ||
| 40 | -The `.editorconfig` file is provided in order to encourage and help you and | ||
| 41 | -your team define and maintain consistent coding styles between different | ||
| 42 | -editors and IDEs. | ||
| 43 | - | ||
| 44 | -By default, `.editorconfig` includes some basic | ||
| 45 | -[properties](http://editorconfig.org/#supported-properties) that reflect the | ||
| 46 | -coding styles from the files provided by default, but you can easily change | ||
| 47 | -them to better suit your needs. | ||
| 48 | - | ||
| 49 | -In order for your editor/IDE to apply the | ||
| 50 | -[properties](http://editorconfig.org/#supported-properties) from the | ||
| 51 | -`.editorconfig` file, you will need to [install a | ||
| 52 | -plugin]( http://editorconfig.org/#download). | ||
| 53 | - | ||
| 54 | -__N.B.__ If you aren't using the server configurations provided by HTML5 | ||
| 55 | -Boilerplate, we highly encourage you to configure your server to block | ||
| 56 | -access to `.editorconfig` files, as they can disclose sensitive information! | ||
| 57 | - | ||
| 58 | -For more details, please refer to the [EditorConfig | ||
| 59 | -project](http://editorconfig.org/). | ||
| 60 | - | ||
| 61 | - | ||
| 62 | -## Server Configuration | ||
| 63 | - | ||
| 64 | -H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP | ||
| 65 | -server](https://httpd.apache.org/docs/). If you are not using Apache | ||
| 66 | -as your web server, then you are encouraged to download a | ||
| 67 | -[server configuration](https://github.com/h5bp/server-configs) that | ||
| 68 | -corresponds to your web server and environment. | ||
| 69 | - | ||
| 70 | -A `.htaccess` (hypertext access) file is a [Apache HTTP server | ||
| 71 | -configuration file](https://github.com/h5bp/server-configs-apache). | ||
| 72 | -The `.htaccess` file is mostly used for: | ||
| 73 | - | ||
| 74 | -* Rewriting URLs | ||
| 75 | -* Controlling cache | ||
| 76 | -* Authentication | ||
| 77 | -* Server-side includes | ||
| 78 | -* Redirects | ||
| 79 | -* Gzipping | ||
| 80 | - | ||
| 81 | -If you have access to the main server configuration file (usually called | ||
| 82 | -`httpd.conf`), you should add the logic from the `.htaccess` file in, for | ||
| 83 | -example, a <Directory> section in the main configuration file. This is usually | ||
| 84 | -the recommended way, as using .htaccess files slows down Apache! | ||
| 85 | - | ||
| 86 | -To enable Apache modules locally, please see: | ||
| 87 | -https://github.com/h5bp/server-configs-apache/wiki/How-to-enable-Apache-modules. | ||
| 88 | - | ||
| 89 | -In the repo the `.htaccess` is used for: | ||
| 90 | - | ||
| 91 | -* Allowing cross-origin access to web fonts | ||
| 92 | -* CORS header for images when browsers request it | ||
| 93 | -* Enable `404.html` as 404 error document | ||
| 94 | -* Making the website experience better for IE users better | ||
| 95 | -* Media UTF-8 as character encoding for `text/html` and `text/plain` | ||
| 96 | -* Enabling the rewrite URLs engine | ||
| 97 | -* Forcing or removing the `www.` at the begin of a URL | ||
| 98 | -* It blocks access to directories without a default document | ||
| 99 | -* It blocks access to files that can expose sensitive information. | ||
| 100 | -* It reduces MIME type security risks | ||
| 101 | -* It forces compressing (gzipping) | ||
| 102 | -* It tells the browser whether they should request a specific file from the | ||
| 103 | - server or whether they should grab it from the browser's cache | ||
| 104 | - | ||
| 105 | -When using `.htaccess` we recommend reading all inline comments (the rules after | ||
| 106 | -a `#`) in the file once. There is a bunch of optional stuff in it. | ||
| 107 | - | ||
| 108 | -If you want to know more about the `.htaccess` file check out the | ||
| 109 | -[Apache HTTP server docs](https://httpd.apache.org/docs/) or more | ||
| 110 | -specifically the [htaccess | ||
| 111 | -section](https://httpd.apache.org/docs/current/howto/htaccess.html). | ||
| 112 | - | ||
| 113 | -Notice that the original repo for the `.htaccess` file is [this | ||
| 114 | -one](https://github.com/h5bp/server-configs-apache). | ||
| 115 | - | ||
| 116 | - | ||
| 117 | -## crossdomain.xml | ||
| 118 | - | ||
| 119 | -The _cross-domain policy file_ is an XML document that gives a web client — | ||
| 120 | -such as Adobe Flash Player, Adobe Reader, etc. — permission to handle data | ||
| 121 | -across multiple domains, by: | ||
| 122 | - | ||
| 123 | - * granting read access to data | ||
| 124 | - * permitting the client to include custom headers in cross-domain requests | ||
| 125 | - * granting permissions for socket-based connections | ||
| 126 | - | ||
| 127 | -__e.g.__ If a client hosts content from a particular source domain and that | ||
| 128 | -content makes requests directed towards a domain other than its own, the remote | ||
| 129 | -domain would need to host a cross-domain policy file in order to grant access | ||
| 130 | -to the source domain and allow the client to continue with the transaction. | ||
| 131 | - | ||
| 132 | -For more in-depth information, please see Adobe's [cross-domain policy file | ||
| 133 | -specification](https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html). | ||
| 134 | - | ||
| 135 | - | ||
| 136 | -## robots.txt | ||
| 137 | - | ||
| 138 | -The `robots.txt` file is used to give instructions to web robots on what can | ||
| 139 | -be crawled from the website. | ||
| 140 | - | ||
| 141 | -By default, the file provided by this project includes the next two lines: | ||
| 142 | - | ||
| 143 | - * `User-agent: *` - the following rules apply to all web robots | ||
| 144 | - * `Disallow:` - everything on the website is allowed to be crawled | ||
| 145 | - | ||
| 146 | -If you want to disallow certain pages you will need to specify the path in a | ||
| 147 | -`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow | ||
| 148 | -crawling of all content, use `Disallow: /`. | ||
| 149 | - | ||
| 150 | -The `/robots.txt` file is not intended for access control, so don't try to | ||
| 151 | -use it as such. Think of it as a "No Entry" sign, rather than a locked door. | ||
| 152 | -URLs disallowed by the `robots.txt` file might still be indexed without being | ||
| 153 | -crawled, and the content from within the `robots.txt` file can be viewed by | ||
| 154 | -anyone, potentially disclosing the location of your private content! So, if | ||
| 155 | -you want to block access to private content, use proper authentication instead. | ||
| 156 | - | ||
| 157 | -For more information about `robots.txt`, please see: | ||
| 158 | - | ||
| 159 | - * [robotstxt.org](http://www.robotstxt.org/) | ||
| 160 | - * [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt) | ||
| 161 | - | ||
| 162 | - | ||
| 163 | -## browserconfig.xml | ||
| 164 | - | ||
| 165 | -The `browserconfig.xml` file is used to customize the tile displayed when users | ||
| 166 | -pin your site to the Windows 8.1 start screen. In there you can define custom | ||
| 167 | -tile colors, custom images or even [live tiles](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx#CreatingLiveTiles). | ||
| 168 | - | ||
| 169 | -By default, the file points to 2 placeholder tile images: | ||
| 170 | - | ||
| 171 | -* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles. | ||
| 172 | - This image resizes automatically when necessary. | ||
| 173 | -* `tile-wide.png` (558x270px): user for `Wide` tiles. | ||
| 174 | - | ||
| 175 | -Notice that IE11 uses the same images when adding a site to the `favorites`. | ||
| 176 | - | ||
| 177 | -For more in-depth information about the `browserconfig.xml` file, please | ||
| 178 | -see [MSDN](https://msdn.microsoft.com/en-us/library/ie/dn320426.aspx). |
doc/usage.md deleted
| 1 | -[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation | ||
| 2 | -table of contents](TOC.md) | ||
| 3 | - | ||
| 4 | -# Usage | ||
| 5 | - | ||
| 6 | -Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app | ||
| 7 | -usually involves the following: | ||
| 8 | - | ||
| 9 | -1. Set up the basic structure of the site. | ||
| 10 | -2. Add some content, style, and functionality. | ||
| 11 | -3. Run your site locally to see how it looks. | ||
| 12 | -4. (Optionally run a build script to automate the optimization of your site - | ||
| 13 | - e.g. [ant build script](https://github.com/h5bp/ant-build-script)) | ||
| 14 | -5. Deploy your site. | ||
| 15 | - | ||
| 16 | - | ||
| 17 | -## Basic structure | ||
| 18 | - | ||
| 19 | -A basic HTML5 Boilerplate site initially looks something like this: | ||
| 20 | - | ||
| 21 | -``` | ||
| 22 | -. | ||
| 23 | -├── css | ||
| 24 | -│ ├── main.css | ||
| 25 | -│ └── normalize.css | ||
| 26 | -├── doc | ||
| 27 | -├── img | ||
| 28 | -├── js | ||
| 29 | -│ ├── main.js | ||
| 30 | -│ ├── plugins.js | ||
| 31 | -│ └── vendor | ||
| 32 | -│ ├── jquery.min.js | ||
| 33 | -│ └── modernizr.min.js | ||
| 34 | -├── .editorconfig | ||
| 35 | -├── .htaccess | ||
| 36 | -├── 404.html | ||
| 37 | -├── apple-touch-icon.png | ||
| 38 | -├── browserconfig.xml | ||
| 39 | -├── index.html | ||
| 40 | -├── humans.txt | ||
| 41 | -├── robots.txt | ||
| 42 | -├── crossdomain.xml | ||
| 43 | -├── favicon.ico | ||
| 44 | -├── tile-wide.png | ||
| 45 | -└── tile.png | ||
| 46 | -``` | ||
| 47 | - | ||
| 48 | -What follows is a general overview of each major part and how to use them. | ||
| 49 | - | ||
| 50 | -### css | ||
| 51 | - | ||
| 52 | -This directory should contain all your project's CSS files. It includes some | ||
| 53 | -initial CSS to help get you started from a solid foundation. [About the | ||
| 54 | -CSS](css.md). | ||
| 55 | - | ||
| 56 | -### doc | ||
| 57 | - | ||
| 58 | -This directory contains all the HTML5 Boilerplate documentation. You can use it | ||
| 59 | -as the location and basis for your own project's documentation. | ||
| 60 | - | ||
| 61 | -### js | ||
| 62 | - | ||
| 63 | -This directory should contain all your project's JS files. Libraries, plugins, | ||
| 64 | -and custom code can all be included here. It includes some initial JS to help | ||
| 65 | -get you started. [About the JavaScript](js.md). | ||
| 66 | - | ||
| 67 | -### .htaccess | ||
| 68 | - | ||
| 69 | -The default web server configs are for Apache. For more information, please | ||
| 70 | -refer to the [Apache Server Configs | ||
| 71 | -repository](https://github.com/h5bp/server-configs-apache). | ||
| 72 | - | ||
| 73 | -Host your site on a server other than Apache? You're likely to find the | ||
| 74 | -corresponding server configs project listed in our [Server Configs | ||
| 75 | -](https://github.com/h5bp/server-configs/blob/master/README.md) repository. | ||
| 76 | - | ||
| 77 | -### 404.html | ||
| 78 | - | ||
| 79 | -A helpful custom 404 to get you started. | ||
| 80 | - | ||
| 81 | -### browserconfig.xml | ||
| 82 | - | ||
| 83 | -This file contains all settings regarding custom tiles for IE11. | ||
| 84 | - | ||
| 85 | -For more info on this topic, please refer to | ||
| 86 | -[MSDN](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx). | ||
| 87 | - | ||
| 88 | -### .editorconfig | ||
| 89 | - | ||
| 90 | -The `.editorconfig` file is provided in order to encourage and help you and | ||
| 91 | -your team to maintain consistent coding styles between different | ||
| 92 | -editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig). | ||
| 93 | - | ||
| 94 | -### index.html | ||
| 95 | - | ||
| 96 | -This is the default HTML skeleton that should form the basis of all pages on | ||
| 97 | -your site. If you are using a server-side templating framework, then you will | ||
| 98 | -need to integrate this starting HTML with your setup. | ||
| 99 | - | ||
| 100 | -Make sure that you update the URLs for the referenced CSS and JavaScript if you | ||
| 101 | -modify the directory structure at all. | ||
| 102 | - | ||
| 103 | -If you are using Google Universal Analytics, make sure that you edit the | ||
| 104 | -corresponding snippet at the bottom to include your analytics ID. | ||
| 105 | - | ||
| 106 | -### humans.txt | ||
| 107 | - | ||
| 108 | -Edit this file to include the team that worked on your site/app, and the | ||
| 109 | -technology powering it. | ||
| 110 | - | ||
| 111 | -### robots.txt | ||
| 112 | - | ||
| 113 | -Edit this file to include any pages you need hidden from search engines. | ||
| 114 | - | ||
| 115 | -### crossdomain.xml | ||
| 116 | - | ||
| 117 | -A template for working with cross-domain requests. [About | ||
| 118 | -crossdomain.xml](misc.md#crossdomainxml). | ||
| 119 | - | ||
| 120 | -### Icons | ||
| 121 | - | ||
| 122 | -Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple | ||
| 123 | -Touch Icon with your own. | ||
| 124 | - | ||
| 125 | -If you want to use different Apple Touch Icons for different resolutions please | ||
| 126 | -refer to the [according documentation](extend.md#apple-touch-icons). | ||
| 127 | - | ||
| 128 | -You might want to check out Hans' handy [HTML5 Boilerplate Favicon and Apple | ||
| 129 | -Touch Icon | ||
| 130 | -PSD-Template](https://drublic.de/blog/html5-boilerplate-favicons-psd-template/). |
images/qrcode_for_gh.jpg
0 → 100644
8.42 KB
img/Computer.jpg deleted
296 KB
img/blog1.jpg deleted
27.8 KB
img/blog2.jpg deleted
16.9 KB
img/blog3.jpg deleted
18 KB
img/breadgramb_bg.jpg deleted
86.1 KB
img/client1.jpg deleted
561 KB
img/client2.jpg deleted
563 KB
img/client3.jpg deleted
564 KB
img/client4.jpg deleted
573 KB
img/client5.jpg deleted
585 KB
img/client6.jpg deleted
562 KB
img/error-img.png deleted
807 KB
img/fun-bg.jpg deleted
258 KB
img/header-logo1.png deleted
5.75 KB
img/pf1.jpg deleted
47.6 KB
img/pf2.jpg deleted
44.4 KB
img/pf3.jpg deleted
80.7 KB
img/pf4.jpg deleted
41.3 KB
img/pf5.jpg deleted
104 KB
img/pf6.jpg deleted
69.9 KB
img/ruby.png deleted
17.2 KB
img/single-b1.jpg deleted
146 KB
img/single-pf1.jpg deleted
119 KB
img/single-pf2.jpg deleted
109 KB
img/single-pf3.jpg deleted
156 KB
img/success.png deleted
446 KB
img/team1.png deleted
317 KB
img/team2.png deleted
317 KB
img/team3.png deleted
317 KB
img/testi-1.jpg deleted
29.6 KB
img/testi-2.jpg deleted
29.3 KB
img/testi-3.jpg deleted
23.4 KB
img/testi-bg.jpg deleted
195 KB
img/tic.png deleted
36 KB
mail-success.html deleted
| 1 | -<!Doctype html> | ||
| 2 | -<html class="no-js" lang=""> | ||
| 3 | - <head> | ||
| 4 | - <meta charset="utf-8"> | ||
| 5 | - <meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| 6 | - <title>Ruby - Responsive Corporate Tempalte</title> | ||
| 7 | - <meta name="description" content=""> | ||
| 8 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 9 | - | ||
| 10 | - <link rel="icon" href="img/header-logo1.png"> | ||
| 11 | - <!-- Place favicon.ico in the root directory --> | ||
| 12 | - | ||
| 13 | - <!-- Google Fonts --> | ||
| 14 | - <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> | ||
| 15 | - | ||
| 16 | - <link rel="stylesheet" href="css/bootstrap.min.css"> | ||
| 17 | - <link rel="stylesheet" href="css/slicknav.min.css"> | ||
| 18 | - <link rel="stylesheet" href="css/bootstrap-theme.min.css"> | ||
| 19 | - <link rel="stylesheet" href="css/owl.carousel.min.css"> | ||
| 20 | - <link rel="stylesheet" href="css/owl.theme.default.min.css"> | ||
| 21 | - <link rel="stylesheet" href="css/animate.min.css"> | ||
| 22 | - <link rel="stylesheet" href="css/animate-text.css"> | ||
| 23 | - <link rel="stylesheet" href="css/magnific-popup.css"> | ||
| 24 | - <link rel="stylesheet" href="css/font-awesome.min.css"> | ||
| 25 | - | ||
| 26 | - <!-- Ruby CSS --> | ||
| 27 | - <link rel="stylesheet" href="css/normalize.css"> | ||
| 28 | - <link rel="stylesheet" href="style.css"> | ||
| 29 | - <link rel="stylesheet" href="css/responsive.css"> | ||
| 30 | - | ||
| 31 | - <!-- Color CSS --> | ||
| 32 | - <link rel="stylesheet" href="css/color/color7.css"> | ||
| 33 | - <!--<link rel="stylesheet" href="css/color/color1.css">--> | ||
| 34 | - <!--<link rel="stylesheet" href="css/color/color2.css">--> | ||
| 35 | - <!--<link rel="stylesheet" href="css/color/color3.css">--> | ||
| 36 | - <!--<link rel="stylesheet" href="css/color/color4.css">--> | ||
| 37 | - <!--<link rel="stylesheet" href="css/color/color5.css">--> | ||
| 38 | - <!--<link rel="stylesheet" href="css/color/color6.css">--> | ||
| 39 | - <!--<link rel="stylesheet" href="css/color/color8.css">--> | ||
| 40 | - <!--<link rel="stylesheet" href="css/color/color9.css">--> | ||
| 41 | - | ||
| 42 | - <link rel="stylesheet" href="#" id="colors"> | ||
| 43 | - | ||
| 44 | - </head> | ||
| 45 | - <body> | ||
| 46 | - | ||
| 47 | - <div class="color-plate "> | ||
| 48 | - <a class="icon"><i class="fa fa-cog fa-spin"></i></a> | ||
| 49 | - <h2>Ruby Color</h2> | ||
| 50 | - <div class="color-head"> | ||
| 51 | - <span class="color1"></span> | ||
| 52 | - <span class="color2"></span> | ||
| 53 | - <span class="color3"></span> | ||
| 54 | - <span class="color4"></span> | ||
| 55 | - <span class="color5"></span> | ||
| 56 | - <span class="color6"></span> | ||
| 57 | - <span class="color7"></span> | ||
| 58 | - <span class="color8"></span> | ||
| 59 | - <span class="color9"></span> | ||
| 60 | - </div> | ||
| 61 | - </div> | ||
| 62 | - | ||
| 63 | - <!-- Header Area --> | ||
| 64 | - <header id="header" class="header"> | ||
| 65 | - <!-- Header Inner --> | ||
| 66 | - <div class="header-inner"> | ||
| 67 | - <div class="container"> | ||
| 68 | - <div class="row"> | ||
| 69 | - <div class="col-md-3 col-sm-2 col-xs-2"> | ||
| 70 | - <div class="logo"> | ||
| 71 | - <a href="index.html"><img src="images/logo.png" alt="logo.png"></a> | ||
| 72 | - </div> | ||
| 73 | - </div> | ||
| 74 | - <div class="col-md-9 col-sm-10"> | ||
| 75 | - <div class="mobile-menu"></div> | ||
| 76 | - <nav class="navbar navbar-default"> | ||
| 77 | - <div class="collapse navbar-collapse"> | ||
| 78 | - <ul id="nav" class="nav navbar-nav"> | ||
| 79 | - <li class="current"><a href="#slider">home</a> | ||
| 80 | - </li> | ||
| 81 | - <li><a href="#Services">Services</a></li> | ||
| 82 | - <li><a href="#latest-works">portfolio<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 83 | - <ul class="dropdown"> | ||
| 84 | - <li><a href="portfolio.html">Portfolio</a></li> | ||
| 85 | - <li><a href="portfolio-single.html">portfolio-single</a></li> | ||
| 86 | - </ul> | ||
| 87 | - </li> | ||
| 88 | - <li><a href="#blog">Blogs<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 89 | - <ul class="dropdown"> | ||
| 90 | - <li><a href="blog.html">Blog Archive</a></li> | ||
| 91 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 92 | - </ul> | ||
| 93 | - </li> | ||
| 94 | - <li><a href="#team">Team</a></li> | ||
| 95 | - <li><a href="#">Pages <i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 96 | - <ul class="dropdown"> | ||
| 97 | - <li><a href="404.html">Error 404</a></li> | ||
| 98 | - <li><a href="mail-success.html">Mail Success</a></li> | ||
| 99 | - </ul> | ||
| 100 | - </li> | ||
| 101 | - <li><a href="#contact">Contact</a></li> | ||
| 102 | - </ul> | ||
| 103 | - </div> | ||
| 104 | - </nav> | ||
| 105 | - </div> | ||
| 106 | - </div> | ||
| 107 | - </div> | ||
| 108 | - </div> | ||
| 109 | - </header> | ||
| 110 | - <!--/ End Header Area --> | ||
| 111 | - | ||
| 112 | - | ||
| 113 | - <!--breadcrumb --> | ||
| 114 | - <div class="breadcrumb" data-stellar-background-ratio="0.5"> | ||
| 115 | - <div class="container"> | ||
| 116 | - <div class="row"> | ||
| 117 | - <div class="col-md-12"> | ||
| 118 | - <div class="breadcrumb-text"> | ||
| 119 | - <h2>mail success</h2> | ||
| 120 | - <ul> | ||
| 121 | - <li><a href="index.html">Home</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i></li> | ||
| 122 | - <li><a href="blog-archive.html">mail success</a></li> | ||
| 123 | - </ul> | ||
| 124 | - </div> | ||
| 125 | - </div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - </div> | ||
| 129 | - <!--/ End breadcrumb --> | ||
| 130 | - | ||
| 131 | - | ||
| 132 | - <!-- mail-success Page --> | ||
| 133 | - <section class="mail-success section"> | ||
| 134 | - <div class="table"> | ||
| 135 | - <div class="table-cell"> | ||
| 136 | - <div class="container"> | ||
| 137 | - <div class="row"> | ||
| 138 | - <div class="col-md-12 col-sm-12 col-xs-12"> | ||
| 139 | - <div class="mail-head"> | ||
| 140 | - <img src="img/success.png" alt="#"> | ||
| 141 | - <h2><span><img src="img/tic.png" alt="#"></span>Your Mail Has Sent Successfully!</h2> | ||
| 142 | - <div class="button-head"> | ||
| 143 | - <div class="button"> | ||
| 144 | - <span></span> | ||
| 145 | - <a href="#" class="btn">Go Back</a> | ||
| 146 | - </div> | ||
| 147 | - </div> | ||
| 148 | - </div> | ||
| 149 | - </div> | ||
| 150 | - </div> | ||
| 151 | - </div> | ||
| 152 | - </div> | ||
| 153 | - </div> | ||
| 154 | - </section> | ||
| 155 | - <!-- End mail-success Page --> | ||
| 156 | - | ||
| 157 | - | ||
| 158 | - <!-- Footer Area --> | ||
| 159 | - <footer id="footer" class="footer section"> | ||
| 160 | - <!-- Footer Top --> | ||
| 161 | - <div class="footer-top"> | ||
| 162 | - <div class="container"> | ||
| 163 | - <div class="row"> | ||
| 164 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 165 | - <div class="single-footer"> | ||
| 166 | - <div class="logo"> | ||
| 167 | - <img src="img/ruby.png" alt="#"> | ||
| 168 | - </div> | ||
| 169 | - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, </p> | ||
| 170 | - <div class="contact"> | ||
| 171 | - <p class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Mirpur, dhaka-bangledesh</p> | ||
| 172 | - <p class="mail-add"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@clippinglamp.com</p> | ||
| 173 | - <p class="call"><i class="fa fa-phone-square" aria-hidden="true"></i>call:900-200-2315</p> | ||
| 174 | - </div> | ||
| 175 | - </div> | ||
| 176 | - </div> | ||
| 177 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 178 | - <div class="single-footer"> | ||
| 179 | - <h2><i class="fa fa-sliders" aria-hidden="true"></i>setra site map</h2> | ||
| 180 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>home</span> | ||
| 181 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our shop</span> | ||
| 182 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>about us</span> | ||
| 183 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>blog</span> | ||
| 184 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>your account</span> | ||
| 185 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our guarantee</span> | ||
| 186 | - </div> | ||
| 187 | - </div> | ||
| 188 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 189 | - <div class="single-footer"> | ||
| 190 | - <h2><i class="fa fa-cogs" aria-hidden="true"></i>our company</h2> | ||
| 191 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>shipping policy</span> | ||
| 192 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>international shipping</span> | ||
| 193 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>affiliates</span> | ||
| 194 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our sponsors</span> | ||
| 195 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>team & conditions</span> | ||
| 196 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>cash on delivery</span> | ||
| 197 | - </div> | ||
| 198 | - </div> | ||
| 199 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 200 | - <div class="single-footer"> | ||
| 201 | - <h2>newsletter subscription</h2> | ||
| 202 | - <p>subscribe to our newsletter to get allour news in your inbox</p> | ||
| 203 | - <div class="mail"> | ||
| 204 | - <input type="email" placeholder="Enter your email"> | ||
| 205 | - <button class="button"><a href="#">subscribe us</a></button> | ||
| 206 | - <i class="fa fa-lock" class="icon"></i> | ||
| 207 | - <p>Your email address is 100% safe to us</p> | ||
| 208 | - </div> | ||
| 209 | - </div> | ||
| 210 | - </div> | ||
| 211 | - </div> | ||
| 212 | - </div> | ||
| 213 | - </div> | ||
| 214 | - <!--/ End Footer Top --> | ||
| 215 | - | ||
| 216 | - <!-- Copyright --> | ||
| 217 | - <div class="copyright"> | ||
| 218 | - <div class="container"> | ||
| 219 | - <div class="row"> | ||
| 220 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 221 | - <div class="copyright-content"> | ||
| 222 | - <p>Copyright 2018 | Ruby Limtied | All Rights Reserved</p> | ||
| 223 | - </div> | ||
| 224 | - </div> | ||
| 225 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 226 | - <ul class="social"> | ||
| 227 | - <li><a href=""><i class="fa fa-facebook"></i></a></li> | ||
| 228 | - <li><a href=""><i class="fa fa-twitter"></i></a></li> | ||
| 229 | - <li><a href=""><i class="fa fa-instagram"></i></a></li> | ||
| 230 | - <li><a href=""><i class="fa fa-linkedin"></i></a></li> | ||
| 231 | - <li><a href=""><i class="fa fa-youtube"></i></a></li> | ||
| 232 | - </ul> | ||
| 233 | - </div> | ||
| 234 | - </div> | ||
| 235 | - </div> | ||
| 236 | - </div> | ||
| 237 | - <!--/ End Copyright --> | ||
| 238 | - </footer> | ||
| 239 | - <!--/ End Footer Area --> | ||
| 240 | - | ||
| 241 | - <script src="js/jquery.min.js"></script> | ||
| 242 | - <script src="js/bootstrap.min.js"></script> | ||
| 243 | - <script src="js/colors.js"></script> | ||
| 244 | - <script src="js/jquery.nav.js"></script> | ||
| 245 | - <script src="js/jquery.scrollUp.min.js"></script> | ||
| 246 | - <script src="js/jquery.slicknav.min.js"></script> | ||
| 247 | - <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> | ||
| 248 | - <script src="js/owl.carousel.min.js"></script> | ||
| 249 | - <script src="js/isotope.pkgd.min.js"></script> | ||
| 250 | - <script src="js/wow.min.js"></script> | ||
| 251 | - <script src="js/jquery.stellar.min.js"></script> | ||
| 252 | - <script src="js/jquery.magnific-popup.min.js"></script> | ||
| 253 | - <script src="js/animate-text.js"></script> | ||
| 254 | - <script src="js/particles.min.js"></script> | ||
| 255 | - <script src="js/particle-code.js"></script> | ||
| 256 | - <script src="js/jquery.counterup.min.js"></script> | ||
| 257 | - | ||
| 258 | - <script type="text/javascript" src="js/gmaps.min.js"></script> | ||
| 259 | - <script src="js/main.js"></script> | ||
| 260 | - </body> | ||
| 261 | -</html> |
portfolio-single.html deleted
| 1 | -<!Doctype html> | ||
| 2 | -<html class="no-js" lang=""> | ||
| 3 | - <head> | ||
| 4 | - <meta charset="utf-8"> | ||
| 5 | - <meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| 6 | - <title>Ruby - Responsive Corporate Tempalte</title> | ||
| 7 | - <meta name="description" content=""> | ||
| 8 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 9 | - | ||
| 10 | - <link rel="icon" href="img/header-logo1.png"> | ||
| 11 | - <!-- Place favicon.ico in the root directory --> | ||
| 12 | - | ||
| 13 | - <!-- Google Fonts --> | ||
| 14 | - <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> | ||
| 15 | - | ||
| 16 | - <link rel="stylesheet" href="css/bootstrap.min.css"> | ||
| 17 | - <link rel="stylesheet" href="css/slicknav.min.css"> | ||
| 18 | - <link rel="stylesheet" href="css/bootstrap-theme.min.css"> | ||
| 19 | - <link rel="stylesheet" href="css/owl.carousel.min.css"> | ||
| 20 | - <link rel="stylesheet" href="css/owl.theme.default.min.css"> | ||
| 21 | - <link rel="stylesheet" href="css/animate.min.css"> | ||
| 22 | - <link rel="stylesheet" href="css/animate-text.css"> | ||
| 23 | - <link rel="stylesheet" href="css/magnific-popup.css"> | ||
| 24 | - <link rel="stylesheet" href="css/font-awesome.min.css"> | ||
| 25 | - | ||
| 26 | - <!-- Ruby CSS --> | ||
| 27 | - <link rel="stylesheet" href="css/normalize.css"> | ||
| 28 | - <link rel="stylesheet" href="style.css"> | ||
| 29 | - <link rel="stylesheet" href="css/responsive.css"> | ||
| 30 | - | ||
| 31 | - <!-- Color CSS --> | ||
| 32 | - <link rel="stylesheet" href="css/color/color7.css"> | ||
| 33 | - <!--<link rel="stylesheet" href="css/color/color1.css">--> | ||
| 34 | - <!--<link rel="stylesheet" href="css/color/color2.css">--> | ||
| 35 | - <!--<link rel="stylesheet" href="css/color/color3.css">--> | ||
| 36 | - <!--<link rel="stylesheet" href="css/color/color4.css">--> | ||
| 37 | - <!--<link rel="stylesheet" href="css/color/color5.css">--> | ||
| 38 | - <!--<link rel="stylesheet" href="css/color/color6.css">--> | ||
| 39 | - <!--<link rel="stylesheet" href="css/color/color8.css">--> | ||
| 40 | - <!--<link rel="stylesheet" href="css/color/color9.css">--> | ||
| 41 | - | ||
| 42 | - <link rel="stylesheet" href="#" id="colors"> | ||
| 43 | - | ||
| 44 | - </head> | ||
| 45 | - <body> | ||
| 46 | - | ||
| 47 | - <div class="color-plate "> | ||
| 48 | - <a class="icon"><i class="fa fa-cog fa-spin"></i></a> | ||
| 49 | - <h2>Ruby Color</h2> | ||
| 50 | - <div class="color-head"> | ||
| 51 | - <span class="color1"></span> | ||
| 52 | - <span class="color2"></span> | ||
| 53 | - <span class="color3"></span> | ||
| 54 | - <span class="color4"></span> | ||
| 55 | - <span class="color5"></span> | ||
| 56 | - <span class="color6"></span> | ||
| 57 | - <span class="color7"></span> | ||
| 58 | - <span class="color8"></span> | ||
| 59 | - <span class="color9"></span> | ||
| 60 | - </div> | ||
| 61 | - </div> | ||
| 62 | - | ||
| 63 | - <!-- Header Area --> | ||
| 64 | - <header id="header" class="header"> | ||
| 65 | - <!-- Header Inner --> | ||
| 66 | - <div class="header-inner"> | ||
| 67 | - <div class="container"> | ||
| 68 | - <div class="row"> | ||
| 69 | - <div class="col-md-3 col-sm-2 col-xs-2"> | ||
| 70 | - <div class="logo"> | ||
| 71 | - <a href="index.html"><img src="images/logo.png" alt="logo.png"></a> | ||
| 72 | - </div> | ||
| 73 | - </div> | ||
| 74 | - <div class="col-md-9 col-sm-10"> | ||
| 75 | - <div class="mobile-menu"></div> | ||
| 76 | - <nav class="navbar navbar-default"> | ||
| 77 | - <div class="collapse navbar-collapse"> | ||
| 78 | - <ul id="nav" class="nav navbar-nav"> | ||
| 79 | - <li class="current"><a href="#slider">home</a> | ||
| 80 | - </li> | ||
| 81 | - <li><a href="#Services">Services</a></li> | ||
| 82 | - <li><a href="#latest-works">portfolio<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 83 | - <ul class="dropdown"> | ||
| 84 | - <li><a href="portfolio.html">Portfolio</a></li> | ||
| 85 | - <li><a href="portfolio-single.html">portfolio-single</a></li> | ||
| 86 | - </ul> | ||
| 87 | - </li> | ||
| 88 | - <li><a href="#blog">Blogs<i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 89 | - <ul class="dropdown"> | ||
| 90 | - <li><a href="blog.html">Blog Archive</a></li> | ||
| 91 | - <li><a href="blog-single.html">Blog Single</a></li> | ||
| 92 | - </ul> | ||
| 93 | - </li> | ||
| 94 | - <li><a href="#team">Team</a></li> | ||
| 95 | - <li><a href="#">Pages <i class="fa fa-caret-down" aria-hidden="true"></i></a> | ||
| 96 | - <ul class="dropdown"> | ||
| 97 | - <li><a href="404.html">Error 404</a></li> | ||
| 98 | - <li><a href="mail-success.html">Mail Success</a></li> | ||
| 99 | - </ul> | ||
| 100 | - </li> | ||
| 101 | - <li><a href="#contact">Contact</a></li> | ||
| 102 | - </ul> | ||
| 103 | - </div> | ||
| 104 | - </nav> | ||
| 105 | - </div> | ||
| 106 | - </div> | ||
| 107 | - </div> | ||
| 108 | - </div> | ||
| 109 | - </header> | ||
| 110 | - <!--/ End Header Area --> | ||
| 111 | - | ||
| 112 | - | ||
| 113 | - <!--breadcrumb --> | ||
| 114 | - <div class="breadcrumb" data-stellar-background-ratio="0.5"> | ||
| 115 | - <div class="container"> | ||
| 116 | - <div class="row"> | ||
| 117 | - <div class="col-md-12"> | ||
| 118 | - <div class="breadcrumb-text"> | ||
| 119 | - <h2>single portfolio</h2> | ||
| 120 | - <ul> | ||
| 121 | - <li><a href="index.html">Home</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i></li> | ||
| 122 | - <li><a href="blog-archive.html">single portfolio</a></li> | ||
| 123 | - </ul> | ||
| 124 | - </div> | ||
| 125 | - </div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - </div> | ||
| 129 | - <!--/ End breadcrumb --> | ||
| 130 | - | ||
| 131 | - | ||
| 132 | - | ||
| 133 | - <!-- single-pf --> | ||
| 134 | - <section id="single-pf" class=" section"> | ||
| 135 | - <div class="container"> | ||
| 136 | - <div class="row"> | ||
| 137 | - <div class="col-md-12"> | ||
| 138 | - <div class="single-pf owl-carousel"> | ||
| 139 | - <!--Single pf --> | ||
| 140 | - <div class="single-news"> | ||
| 141 | - <div class="news-head"> | ||
| 142 | - <img src="img/single-pf1.jpg" alt="#"> | ||
| 143 | - </div> | ||
| 144 | - <div class="news-body"> | ||
| 145 | - <h2>about project</h2> | ||
| 146 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, </p> | ||
| 147 | - <h5>project details</h5> | ||
| 148 | - <span><i class="fa fa-clock-o" aria-hidden="true"></i>date: nov 25, 2017</span> | ||
| 149 | - <span><i class="fa fa-folder-open-o" aria-hidden="true"></i>category: web design</span> | ||
| 150 | - <span><i class="fa fa-folder-o" aria-hidden="true"></i>project url: <a href="#">www.twitter.com</a></span> | ||
| 151 | - <a href="#" class="btn">view live<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 152 | - </div> | ||
| 153 | - </div> | ||
| 154 | - <!--/ End Single Team --> | ||
| 155 | - <!--Single pf --> | ||
| 156 | - <div class="single-news"> | ||
| 157 | - <div class="news-head"> | ||
| 158 | - <img src="img/single-pf2.jpg" alt="#"> | ||
| 159 | - </div> | ||
| 160 | - <div class="news-body"> | ||
| 161 | - <h2>about project</h2> | ||
| 162 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, </p> | ||
| 163 | - <h5>project details</h5> | ||
| 164 | - <span><i class="fa fa-clock-o" aria-hidden="true"></i>date: dec 12, 2017</span> | ||
| 165 | - <span><i class="fa fa-folder-open-o" aria-hidden="true"></i>category: branding</span> | ||
| 166 | - <span><i class="fa fa-folder-o" aria-hidden="true"></i>project url: <a href="#">www.facebook.com</a></span> | ||
| 167 | - <a href="#" class="btn">view live<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 168 | - </div> | ||
| 169 | - </div> | ||
| 170 | - <!--/ End Single Team --> | ||
| 171 | - <!--Single pf --> | ||
| 172 | - <div class="single-news"> | ||
| 173 | - <div class="news-head"> | ||
| 174 | - <img src="img/single-pf3.jpg" alt="#"> | ||
| 175 | - </div> | ||
| 176 | - <div class="news-body"> | ||
| 177 | - <h2>about project</h2> | ||
| 178 | - <p>Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor a sit ameti, consectetur adipisicing elit, </p> | ||
| 179 | - <h5>project details</h5> | ||
| 180 | - <span><i class="fa fa-clock-o" aria-hidden="true"></i>date: jan 30, 2017</span> | ||
| 181 | - <span><i class="fa fa-folder-open-o" aria-hidden="true"></i>category: wordpress</span> | ||
| 182 | - <span><i class="fa fa-folder-o" aria-hidden="true"></i>project url: <a href="#">www.google.com</a></span> | ||
| 183 | - <a href="#" class="btn">view live<i class="fa fa-caret-right" aria-hidden="true"></i></a> | ||
| 184 | - </div> | ||
| 185 | - </div> | ||
| 186 | - <!--/ End Single Team --> | ||
| 187 | - </div> | ||
| 188 | - </div> | ||
| 189 | - </div> | ||
| 190 | - </div> | ||
| 191 | - </section> | ||
| 192 | - <!--/ End single-pf --> | ||
| 193 | - | ||
| 194 | - | ||
| 195 | - <!-- Footer Area --> | ||
| 196 | - <footer id="footer" class="footer section"> | ||
| 197 | - <!-- Footer Top --> | ||
| 198 | - <div class="footer-top"> | ||
| 199 | - <div class="container"> | ||
| 200 | - <div class="row"> | ||
| 201 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 202 | - <div class="single-footer"> | ||
| 203 | - <div class="logo"> | ||
| 204 | - <img src="img/ruby.png" alt="#"> | ||
| 205 | - </div> | ||
| 206 | - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, </p> | ||
| 207 | - <div class="contact"> | ||
| 208 | - <p class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Mirpur, dhaka-bangledesh</p> | ||
| 209 | - <p class="mail-add"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@clippinglamp.com</p> | ||
| 210 | - <p class="call"><i class="fa fa-phone-square" aria-hidden="true"></i>call:900-200-2315</p> | ||
| 211 | - </div> | ||
| 212 | - </div> | ||
| 213 | - </div> | ||
| 214 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 215 | - <div class="single-footer"> | ||
| 216 | - <h2><i class="fa fa-sliders" aria-hidden="true"></i>setra site map</h2> | ||
| 217 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>home</span> | ||
| 218 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our shop</span> | ||
| 219 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>about us</span> | ||
| 220 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>blog</span> | ||
| 221 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>your account</span> | ||
| 222 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our guarantee</span> | ||
| 223 | - </div> | ||
| 224 | - </div> | ||
| 225 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 226 | - <div class="single-footer"> | ||
| 227 | - <h2><i class="fa fa-cogs" aria-hidden="true"></i>our company</h2> | ||
| 228 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>shipping policy</span> | ||
| 229 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>international shipping</span> | ||
| 230 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>affiliates</span> | ||
| 231 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>our sponsors</span> | ||
| 232 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>team & conditions</span> | ||
| 233 | - <span><i class="fa fa-caret-right" aria-hidden="true"></i>cash on delivery</span> | ||
| 234 | - </div> | ||
| 235 | - </div> | ||
| 236 | - <div class="col-md-3 col-sm-3 col-xs-12"> | ||
| 237 | - <div class="single-footer"> | ||
| 238 | - <h2>newsletter subscription</h2> | ||
| 239 | - <p>subscribe to our newsletter to get allour news in your inbox</p> | ||
| 240 | - <div class="mail"> | ||
| 241 | - <input type="email" placeholder="Enter your email"> | ||
| 242 | - <button class="button"><a href="#">subscribe us</a></button> | ||
| 243 | - <i class="fa fa-lock" class="icon"></i> | ||
| 244 | - <p>Your email address is 100% safe to us</p> | ||
| 245 | - </div> | ||
| 246 | - </div> | ||
| 247 | - </div> | ||
| 248 | - </div> | ||
| 249 | - </div> | ||
| 250 | - </div> | ||
| 251 | - <!--/ End Footer Top --> | ||
| 252 | - | ||
| 253 | - <!-- Copyright --> | ||
| 254 | - <div class="copyright"> | ||
| 255 | - <div class="container"> | ||
| 256 | - <div class="row"> | ||
| 257 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 258 | - <div class="copyright-content"> | ||
| 259 | - <p>Copyright 2018 | Ruby Limtied | All Rights Reserved</p> | ||
| 260 | - </div> | ||
| 261 | - </div> | ||
| 262 | - <div class="col-md-6 col-sm-6 col-xs-12"> | ||
| 263 | - <ul class="social"> | ||
| 264 | - <li><a href=""><i class="fa fa-facebook"></i></a></li> | ||
| 265 | - <li><a href=""><i class="fa fa-twitter"></i></a></li> | ||
| 266 | - <li><a href=""><i class="fa fa-instagram"></i></a></li> | ||
| 267 | - <li><a href=""><i class="fa fa-linkedin"></i></a></li> | ||
| 268 | - <li><a href=""><i class="fa fa-youtube"></i></a></li> | ||
| 269 | - </ul> | ||
| 270 | - </div> | ||
| 271 | - </div> | ||
| 272 | - </div> | ||
| 273 | - </div> | ||
| 274 | - <!--/ End Copyright --> | ||
| 275 | - </footer> | ||
| 276 | - <!--/ End Footer Area --> | ||
| 277 | - | ||
| 278 | - <script src="js/jquery.min.js"></script> | ||
| 279 | - <script src="js/bootstrap.min.js"></script> | ||
| 280 | - <script src="js/colors.js"></script> | ||
| 281 | - <script src="js/jquery.nav.js"></script> | ||
| 282 | - <script src="js/jquery.scrollUp.min.js"></script> | ||
| 283 | - <script src="js/jquery.slicknav.min.js"></script> | ||
| 284 | - <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> | ||
| 285 | - <script src="js/owl.carousel.min.js"></script> | ||
| 286 | - <script src="js/isotope.pkgd.min.js"></script> | ||
| 287 | - <script src="js/wow.min.js"></script> | ||
| 288 | - <script src="js/jquery.stellar.min.js"></script> | ||
| 289 | - <script src="js/jquery.magnific-popup.min.js"></script> | ||
| 290 | - <script src="js/animate-text.js"></script> | ||
| 291 | - <script src="js/particles.min.js"></script> | ||
| 292 | - <script src="js/particle-code.js"></script> | ||
| 293 | - <script src="js/jquery.counterup.min.js"></script> | ||
| 294 | - | ||
| 295 | - <script type="text/javascript" src="js/gmaps.min.js"></script> | ||
| 296 | - <script src="js/main.js"></script> | ||
| 297 | - </body> | ||
| 298 | -</html> |
style.css
| @@ -2490,7 +2490,8 @@ a:hover{ | @@ -2490,7 +2490,8 @@ a:hover{ | ||
| 2490 | .rnt_wechat{ | 2490 | .rnt_wechat{ |
| 2491 | width: 120px; | 2491 | width: 120px; |
| 2492 | height: 120px; | 2492 | height: 120px; |
| 2493 | - background: #0b0b0b; | 2493 | + background:url("images/qrcode_for_gh.jpg") no-repeat; |
| 2494 | + background-size: 120px 120px; | ||
| 2494 | border-radius: 4px; | 2495 | border-radius: 4px; |
| 2495 | top:51px; | 2496 | top:51px; |
| 2496 | left: 0px; | 2497 | left: 0px; |