178.214.29.48: /* BLACKQUOTE */

2016-04-04T07:40:43Z

BLACKQUOTE

New page

{{Cat|HTML5}}
{{Cat|Web Design}}
{{Cat|Web Development}}

== What We Do ==
'''We making a website in two different themes'''

One is desktop version of theme.
[[File:Html5css3responsive-003.png|300px]]

Second is mobile touchable version.
[[File:Html5css3responsive-001.png|300px]]

Where to start.
[[File:html5-responsive-web-sketch.jpg|300px]]

== Global formatting ==
=== Font ===
<pre>
@import url('../fonts/fonts.css');

* {
font-family: RobotoThin;
}
</pre>

=== File fonts.css inside ===

<pre>
@font-face {
font-family: RobotoThin;
src: url('Roboto-Thin.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: RobotoThinItalic;
src: url('Roboto-ThinItalic.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: RobotoLight;
src: url('Roboto-Light.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: RobotoBold;
src: url('Roboto-Bold.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: RobotoBoldItalic;
src: url('Roboto-BoldItalic.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ArialNarrowItalic;
src: url('ARIALNBI.TTF');
font-weight: normal;
font-style: normal;
}
</pre>

=== Clean properties ===
<pre>
* {
margin: 0;
padding: 0;
}
</pre>

=== H1, H2, H3, P, A ===
<pre>
h1 {
font-family: RobotoThin;
font-size: 30px;
color: white;
padding-bottom: 30px;
}

h2 {
font-family: RobotoBold;
font-size: 20px;
color: #9fa4c1;
padding-top: 30px;
padding-bottom: 10px;
}

h3 {
font-family: RobotoBoldItalic;
font-size: 20px;
color: #9fa4c1;
padding-top: 30px;
padding-bottom: 10px;
}

p {
font-size: 15px;
color: white;
padding-bottom: 30px;
line-height: 1.5em;
word-spacing: 0.1em;
}

a {
font-size: 15px;
}

</pre>

== Desktop view ==
=== Centering website DIV ===
<pre>
#strona {
min-width:480px;
max-width:1600px;
margin: auto;
background-color: #394263;
}
</pre>

=== HEADER ===
<pre>
header{
font-family: RobotoThin;
color: #394263;
background-color: white;
padding: 0 20px;
}

header img{
height: 100px;
padding-top: 20px;
float: left;
}

header h1{
font-size:34px;
color: #394263;
padding-bottom: 50px;
padding-top: 50px;
padding-left: 100px;

}
</pre>

=== NAV ===
<pre>
nav {
float:left;
width: 18%;
padding: 20px 30px;
}

nav a{
display:block;
font-family: RobotoBold;
font-size: 15px;
color: #9fa4c1;
text-decoration: none;
}

nav a:hover{
text-decoration: underline;
color: white;
}

#highlighted {
color: white;
}
</pre>

=== MAIN ===
<pre>
main {
float: left;
width: 50%;
background-color: #394263;
color: white;
padding: 30px 20px;
}

main p {
margin: 0;
text-align: justify;
}
</pre>
=== ASIDE ===
<pre>
aside {
float:right;
width:22%;
background-color: #4c5781;
}

aside p {
margin: 0;
padding:15px;
}
</pre>

=== FOOTER and TIME ===
<pre>
footer {
clear: both;
background-color: #4c5781;
color: white;
text-align: center;
padding-top: 26px;
padding-bottom: 26px;

}

footer p a{
font-family: ArialNarrowItalic;
font-size: 30px;
text-decoration: none;
color: white;
}

footer p, time{
font-family: RobotoThinItalic;
padding-bottom: 20px;
font-size: 20px;
}

footer p a:hover{
color: #9FA4C1;
}

footer img {
height: 30px;
padding: 20px 20px;
}
</pre>

== Mobile view formatting element ==
<pre>
@media all and (max-width:1080px) {

/* Insert element for mobile view */

}
</pre>

Clear properties from desktop view.
<pre>
nav, main, aside {
float: none;
width: auto;
}
</pre>

=== HEADER ===
<pre>
header {
text-align: center;
}

header img {
height: 200px;
padding-top: 100px;
float:none;
}

header h1{
font-size: 50px;
padding-bottom:100px;
color: #394263;
display:block;
padding-left: 0px;
}
</pre>

=== NAV ===
<pre>
nav {
text-align: center;
padding: 0;
background-color: #4c5781;
}

nav img{
height: 80px;
padding-top: 86px;
display: inline;
}

nav a{
font-family: RobotoBold;
font-size: 35px;
padding: 20px;
display: block;
border-top: 1px solid #394263;
border-bottom: 1px solid #394263;
margin-bottom: -1px;
color: #9fa4c1;
text-decoration: none;
}
</pre>

=== ASIDE ===
<pre>
aside {
display: none;
}
</pre>

=== FOOTER and TIME ===
<pre>
footer p, time, footer p a{
font-size: 30px;
text-decoration: none;
color: white;
}

footer a img {
height: 50px;
padding: 0 20px;
}
</pre>

== Hidding and show mobile menu ==
=== making menu ===
<pre>
/* Ukrywa check box-a */
nav input, input#_1 + div {
display:none;
}

input#_1:checked + div {
display:block;
}
#highlighted {
background-color: #576496;
color: white;
}

nav a:hover{
background-color: #394263;
text-decoration: none;
}

nav label img {
padding-bottom: 66px;
}
</pre>

== Formatting extra elements ==
=== BLACKQUOTE ===
<pre>
blockquote, q {
margin-right: 50px;
text-align: right;
font-family: RobotoThinItalic;
}
</pre>

=== Q ===
<pre>
q {
font-size: 15px;
}
</pre>

=== UL, OL, LI ===
<pre>
ul {
margin-left: 40px;
padding-bottom: 15px;
}

ol {
padding-left: 20px;
padding-top: 15px;

}

li a, li {
font-family: RobotoBold;
text-decoration: none;
color: white;
}

li a:hover{
text-decoration: underline;
}
</pre>

=== DT, DD ===
<pre>
dt {
font-family: RobotoBold;
font-size: 20px;
color: #9fa4c1;
padding-top: 30px;
}

dd {
padding-left: 30px;
padding-bottom: 30px;
}
</pre>

== Image and captions ==
=== IMG ===
<pre>
main img {
border: 0px;
object-fit: cover;
width: 100%;
height: 300px;
padding: 0;
}
</pre>

=== FIGURE ===
<pre>
figure {
margin-bottom: 15px;
margin-top: 15px;
}
</pre>

=== FIGCAPTION ===
<pre>
figcaption {
font-family: RobotoThinItalic;
font-size: 13px;
text-align: right;
}
</pre>

== Table ==
<pre>
table {
width: 100%;
marin: auto;
}
</pre>
oraz HTML
<pre>
<table border="0" cellpadding="0" cellspacing="0">
</pre>

=== TH, TR, TD, CAPTION ===

<pre>
th {
background-color: #D1B255
padding: 30px 50px;
font-size: 30px;
}

tr:nth-of-type(1) {
background-color: #394263;
}

tr:nth-of-type(2n+3),tr:nth-of-type(2n+4) {
background-color: #4c5781;
}

td {
padding: 20px 30px;
font-family: RobotoBold;
font-size: 15px;
border-bottom: 1px solid #394263;
color: #9fa4c1;
}

caption {
padding: 30px 20px;
text-align: left;
}
</pre>

=== add table ===
<pre>
td ul {
margin-left: 15px;
}

td ul li{
color: #9fa4c1;
}

td.cover {
padding: 0;
}
</pre>

Formatting table in mobile view.
<pre>
th {
font-size: 40px;
}

td, caption {
font-size: 25px;
}

li {
padding-bottom: 20px;
}
</pre>

== Audio and Video ==
<pre>
video {
object-fit: contain;
width: 100%;
}
</pre>

== Forms ==
<pre>
input[type="text"],
textarea[name="text"],
input[type="date"],
input[type="submit"] {
display: block;
margin-bottom: 20px;
padding: 10px 20px;
font-family: RobotoBold;
font-size: 16px;
color: black;
}

</pre>
Formating forms in mobile view.

<pre>
input[type="text"],
textarea[name="text"],
input[type="date"],
input[type="submit"] {
margin:auto;
margin-bottom: 20px;
width: 90%;
}

input[type="submit"],
input[type="date"]{
width: 20%;
}
</pre>

HTML5 and CSS3 responsive web - Revision history

178.214.29.48: /* BLACKQUOTE */