black-cat
Version:
Um framework resposivo, com uma coleção de componentes flat feitos com HTML, CSS, Javascript.
185 lines (178 loc) • 8.25 kB
HTML
<html class="no-js" lang="pt-BR">
<head>
<!-- Caminho base das URL's -->
<base href="http://www.example.com/assets/" target="_blank" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Para remoção do zoom mobile -->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-->
<!-- Otimização de mídia social. -->
<!--
Facebook: https://developers.facebook.com/tools/debug/
-->
<meta property='og:title' content='Titulo do Artigo' />
<meta property='og:description' content='Descrição do site' />
<meta property='og:url' content='http://www.getblackcat.com.br (URL do site)' />
<meta property='og:image' content='http://www.getblackcat.com.br/imgteste.png (Imagem para a URL)' />
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property='og:type' content='website' />
<meta property='og:site_name' content='BlackCat (Nome do Site)' />
<title>Black Cat - Framework web responsivo</title>
<!-- Exclusão de URLs duplicados. -->
<link rel="canonical" href="url-canonica.html" />
<!-- Início Favicons -->
<!-- Para IE 9 e anteriores, usar favicon_32x32.ico -->
<!--[if IE]><link rel="shortcut icon" href="favicon_32x32.ico"><![endif]-->
<link rel="icon" type="image/png" href="favicon_16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon_24x24.png" sizes="24x24" />
<link rel="icon" type="image/png" href="favicon_32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon_48x48.png" sizes="48x48" />
<link rel="icon" type="image/png" href="favicon_64x64.png" sizes="64x64" />
<link rel="icon" type="image/png" href="favicon_128x128.png" sizes="128x128" />
<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple_touch_icon_152x152.png" />
<!-- iPad iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple_touch_icon_144x144.png" />
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple_touch_icon_120x120.png" />
<!-- iPhone iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple_touch_icon_114x114.png" />
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple_touch_icon_76x76.png" />
<!-- iPad iOS7- sem retina display -->
<link rel="apple-touch-icon" sizes="72x72" href="apple_touch_icon_72x72.png" />
<!-- iPhone iOS7-, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple_touch_icon_57x57.png" />
<!-- Tiles Windows 8 e 10 -->
<meta name="msapplication-TileImage" content="tile.png" />
<meta name="msapplication-TileColor" content="#FF0000" />
<meta name="msapplication-tooltip" content="Black Cat - Framework Web Responsivo" />
<!-- Final Favicons -->
<meta name="description" content="Responsive web boilerplate" />
<meta name="keywords" content="framework, css, black, cat, blackcat, black cat, cat, gato, black cat, gato preto, twosheep, javascript, grid, responsive, responsivo, modernizr, normalize css, frontend, front-end, front end" />
<meta name="robots" content="index, follow" />
<meta name="copyright" content="Two Sheep, Copyright (c) 2015" />
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<style>
html {
font-family: 'lato', Helvetica, Arial, sans-serif;
text-align: center;
}
body {
color: #565a5c;
background-color: #f5f5f5;
}
.container {
height: 800px;
max-height: 800px;
margin-top: 50px;
margin-bottom: 15px;
}
.error_img {
height: 480px;
}
.error_img_responsive {
display: inline;
max-width: auto;
height: 100%;
}
.error_txt {
height: 320px;
padding: 0 25px;
}
.error_txt h1,
.error_txt h2,
.error_txt h3,
.error_txt h4,
.error_txt h5,
.error_txt h6 {
margin: 0;
line-height: 1.1;
text-rendering: optimizelegibility;
}
.error_txt h1 {
font-size: 8em;
font-style: italic;
font-weight: 700;
}
.error_txt h2 {
font-size: 1.5em;
font-weight: 400;
margin-top: 25px;
margin-bottom: 15px;
}
.error_txt h3 {
font-size: 1.5em;
font-style: italic;
font-weight: 400;
}
@media screen and (max-width: 767px) {
.container {
height: 600px;
max-height: 600px;
margin: 0;
margin-top: 25px;
}
.error {
margin: 0;
}
.error_img {
height: 380px;
}
.error_txt {
height: 220px;
}
.error_txt h1 {
font-size: 8em;
margin-top: 10px;
}
.error_txt h2 {
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 0px;
}
.error_txt h3 {
font-size: 1.3em;
}
}
</style>
</head>
<body>
<!--[if lt IE 10]>
<p class="browserupgrade">Você esta usando um navegador <strong>desatualizado</strong>. Por favor, <a href="http://browsehappy.com/" target="_blank">atualize seu navegador</a> para melhorar a sua experiência.</p>
<![endif]-->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 error error_img">
<img src="http://getblackcat.com.br/imgs/cat404.png" alt="Gato enrolado na lã" class="error_img_responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 error error_txt">
<h2>Eu simplesmente odeio quando alguem tenta me enrolar!</h2>
<h1>404</h1>
<h3>Página não encontrada!</h3>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>
<script src="assets/js/plugins.js"></script>
<!-- Alterar UA-XXXXX-X para o seu ID do Google Analytics referente ao seu site. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>