Skip to content

Instantly share code, notes, and snippets.

@Khellem

Khellem/style (2).css

Created August 25, 2017 22:33
Show Gist options
  • Save Khellem/25ceb564360fa6f257d716a880d274f9 to your computer and use it in GitHub Desktop.
Save Khellem/25ceb564360fa6f257d716a880d274f9 to your computer and use it in GitHub Desktop.
Download ZIP
Blog da Dhay
Raw
gistfile1.txt
<!DOCTYPE HTML>
<html>
<head>
<title> | HTML5 | </title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="../css/style (2).css">
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="description" content="Diário de bordo do curso de desenvolvimento web.">
<meta name="keywords" content="Turma, SBWD103001, atividade, BH, aula, html, css, correção, desenvolvimento">
</head>
<body>
<div id="main" class="col-md-8 col-md-offset-2">
<div id="header" class="col-md-12">
<div id="logo">
<div id="logo_text">
<h1> <a href="../index.html"> HTML<span class="logo_colour">5 </span></a></h1>
<h2> Exercícios propostos e algum material que vamos coletando no caminho... </h2>
</div>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected"><a href="html5/html5.html">HTML</a></li>
<li><a href="css/css.html">CSS</a></li>
<li><a href="jscript/jscript.html">JavaScript</a></li>
<li><a href="jquery/jquery.html">jQuery</a></li>
<li><a href="pesquisas/pesquisas.html">Pesquisas</a></li>
</ul>
</div>
</div> <!-- Fecha id="header" -->
<div id="content_header"></div>
<div id="content_site" class="col-md-12">
<div class="sidebar_item col-md-2"> <!-- Insira aqui os ítens da sua barra lateral! -->
<h4>Dicas!</h4>
<h5><i>Boas Práticas</i></h5>
<p>Como o nome sugere, são recomendações baseadas no bom senso, e são valiosas na criação de sites!
Vamos falar mais sobre isso e não é difícil encontrar sites ótimas orientações.
Pesquise mais, utilize boas práticas e ajude a criar uma internet mais limpa e agradável!</p>
</div>
<div id="content col-md-10">
<!-- Insira aqui o conteúdo da página -->
<h1>Primeiros passos...</h1>
<p>É difícil pensar em HTML sem pensarmos no seu estilo, não é? Mas é importante entender a estrutura e a função do HMTL, antes de começarmos a enfeitar a casa! Assim, poucos exercícios têm apenas o uso do HTML, pois a aplicação de suas folhas de estilo CSS também cria uma associação entre os dois, facilitando o aprendizado. <br> Estes exercícios foram inicialmente elaborados apenas em sua estrutura. Aqui eu refiz, adicionando as características visuais do site, mas nas anotações do código podem ser encontradas no código fonte original, junto com as observações sobre cada uma de suas etiquetas e afins. ;) </p>
<p>É uma ideia meio nonsense: explicar HTML direto no código HTML. Será que dá certo? Vamos conferir!</p>
<br>
<div class="sidebar_container">
<h3>Exercícios:</h3>
<ul>
<li><a href="olamundo.html">Olá Mundo!</a> </li>
<li><a href="etiquetas.html">Etiquetas Básicas</a> </li>
<li><a href="cadastro.html">Formulário de Cadastro</a> </li>
<li><a href="tabelas.html">Tabelas</a></li>
<li><a href="login.html">Tela de Login</a></li>
</ul>
</div> <!-- Fecha div class="sidebar_item" -->
</div> <!-- Fecha div id="content" -->
</div> <!-- Fecha div id="content_site" -->
</div> <!-- fecha div id Main -->
<div class="col-md-12"></div>
<div id="footer" class="col-md-8 col-md-offset-2">
<p><a href="http://validator.w3.org/check?uri=referer" target="blank">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" target="blank">CSS</a></p>
<p> | Blog da Dhay | </p>
</div> <!-- fecha div id Footer -->
</body>
</html>
Raw
style (2).css
/* ---------- ---------- */
/* ------------------------------ CORPO ------------------------------ */
html
{ position: relative;
height: 100%;
}
*
{ margin: 2px;
padding: 0;
}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;
}
/* ------------------------------ TEXTOS ------------------------------ */
p
{ padding: 0;
line-height: 1.7em;
font-size: 150%;
}
h1, h2, h3, h4, h5, h6
{ color: #362c20;
letter-spacing: 0em;
}
h1
{ font: normal 200% 'century gothic', arial;
margin: 0 0 1em 0;
color: #000;
}
h2
{ font-size: 180%;
color: #FF7808;
}
h3
{ font-size: 120%;
}
h4
{ color: #FF7808;
padding: 0 0 .2em 0;
font: normal 180% 'century gothic', arial;
text-transform: uppercase;
}
h5, h6
{ color: #888;
font: normal 180% 'century gothic', arial;
letter-spacing: normal;
padding: 0 0 1em 0;
}
a, a:hover /* "a:hover" é o comando para a ação ao passar o mouse; "a, a:hover" é o comando para a ação ao passar o mouse NO LINK (a,); */
{ outline: none;
text-decoration: underline;
color: #2B4E8A;
}
a:hover
{ text-decoration: none;
}
blockquote /* Tem uma citação a fazer? Blockquote nele! */
{ border-left:#008080 5px double;
background:#F5F5F5;
color:#008080;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
margin: 20px 0;
}
ul
{ margin: 2px 0 22px 17px;
}
ul li
{ list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 6px 0;
line-height: 1.5em;
}
ol
{ margin: 8px 0 22px 20px;
}
ol li
{ margin: 0 0 11px 0;
}
/* ------------------------------ HEADER ------------------------------ */
#header
{ background: none;
height: 100%;
margin-bottom: 1.5em;
}
#banner /* ***** HOME!!! ***** */
{ background: url("../img/banner_blue.jpg") no-repeat;
background-color: transparent;
width: 860px;
height: 180px;
margin-bottom: 20px;
border: 10px solid #DDD;
}
#menubar /* Aquela barrinha cinza-escuro bem fininha, em cima da barra de menus. "Border top!" */
{ width: 100%;
height: 5em;
padding-right: 1em;
background: #DDD;
border-top: 1px solid #CCC;
}
ul#menu /* Pequena barra de menus, engloba todos os itens. */
{ float: right;
margin: none;
}
ul#menu li /* Cada um dos botões */
{ float: left;
padding: 0;
list-style: none;
margin: 1em 1em 0 0 ;
}
ul#menu li a /* Cada um dos botões, enquanto link (a) */
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 26px;
padding: 6px 20px 0 20px; /* Padding: espaço dentro do botão; */
text-align: center;
color: #FFF; /* Branco */
text-decoration: none;
background: #2B4E8A; /* O azul dos botões */
border-radius: 10px 10px 0 0;
}
ul#menu li.selected /* O botão que se mantém selecionado, da página onde o usuário está */
{ background: #1F3863;
border-radius: 10px 10px 0 0;
margin: 1em 1.1em 0 0; /* Margin: espaço ao redor do botão; */
}
ul#menu li.selected a /* O botão que se mantém selecionado, da página onde o usuário está, enquanto link */
{ height: 25px;
padding: 6px 20px 0 20px;
}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #1F3863; /* Azul escuro */
}
ul#menu li a:hover
{ transition: .7s;
opacity: .8;
background-color: #1F3863;
color: #FFF;
}
#logo /* Banner Diamantes; */
{ width: 100%;
height: 17em;
position: relative;
background: url("../img/banner_diamond.jpg") no-repeat;
background-size: 100%;
}
#logo #logo_text /* Caixa com a marca/Botão home: "HTML5"; */
{ position: absolute;
top: 10px;
left: 0;
}
#logo h1, #logo h2 /* Marca/Botão home: "HTML5"; */
{ font: normal 300% 'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0 0 0 9px;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover /* Marca/Botão home: "número 5"; */
{ padding: 1em 0 0 0;
color: #323232;
letter-spacing: 0.1em;
text-decoration: none;
font-family: 'raspoutine';
}
#logo_text h1 a .logo_colour /* Marca/Botão home: "número 5"; */
{ color: #D40808;
}
#logo_text h2 /* Texto abaixo da marca/botão home */
{ font-size: 170%;
padding: 2em 0 0 0;
color: #999;
}
/* ------------------------------ BARRA LATERAL ------------------------------ */
#picture {
float: left;
/* background-image: url("../img/dicas_lateral.jpg") no-repeat; */
background-size: 100%;
width: 224px;
height: 450px;
}
#sidebar_picture
{ float: left;
width: 224px;
height: 450px;
}
#site_content
{ width: 130%;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 10px 0;
}
.sidebar_container
{ float: left;
width: 224px;
font: normal 150% 'trebuchet ms', arial, sans-serif;
}
#sidebar_top
{ width: 222px;
height: 14px;
}
#sidebar_base
{ width: 222px;
height: 14px;
}
.sidebar
{ float: right;
width: 222px;
padding: 0;
margin: 0 0 16px 0;
}
.sidebar_item
{ margin-right: 3em;
margin-left: none;
height: 100%;
font: normal 100% 'trebuchet ms', arial, sans-serif;
}
.sidebar li a.selected
{ color: #444;
}
.sidebar ul
{ margin: 0;
}
/* ------------------------------ MAIN ------------------------------ */
/* "Display: table", abaixo, acrescentado para resolver o problema das sidebar que fugiam da margem da página. Esta sintaxe força a div Main a englobar também o conteúdo das sidebar: */
#main
{ display: table;
}
/* ------------------------------ RODAPÉ ------------------------------ */
#footer
{ font-family: "Trebuchet MS", sans-serif;
font-size: 100%;
position: relative;
width: 100%;
height: 9em;
padding: 8px 0 5px 0;
text-align: center;
background: #CCC;
border-top: 1px solid #AAA;
color: #FFF;
margin: 0 0 0 0;
}
#footer p
{ line-height: 1.7em;
padding: 0;
}
#footer a
{ color: #FFF;
text-decoration: none;
}
#footer a:hover
{ color: #00C6F0;
text-decoration: none;
}
.search
{ color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment