View source for HTML5 and CSS3 responsive web

{{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>