HTML5 and CSS3 responsive web

What We Do

We making a website in two different themes

One is desktop version of theme.

Second is mobile touchable version.

Where to start.

Global formatting

Font

@import url('../fonts/fonts.css');

* {
	font-family: RobotoThin;
}

File fonts.css inside

@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;
}

Clean properties

* {
	margin: 0;
	padding: 0;	
}

H1, H2, H3, P, A

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;
}

Desktop view

Centering website DIV

#strona {
        min-width:480px;
        max-width:1600px;
	margin: auto;
	background-color: #394263;
}

HEADER

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;
		
}

NAV

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;
}

MAIN

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

main p {
        margin: 0;
	text-align: justify;
}

ASIDE

aside {
        float:right;
        width:22%;
        background-color: #4c5781;
}

aside p {
        margin: 0;
        padding:15px;
}

FOOTER and TIME

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;
}

Mobile view formatting element

@media all and (max-width:1080px) {


  /* Insert element for mobile view */

}

Clear properties from desktop view.

	nav, main, aside {
          float: none; 
          width: auto;
	}

HEADER

	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;
	}

NAV

	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;
	}

ASIDE

	aside {
		display: none;
	}

FOOTER and TIME

	footer p, time, footer p a{ 
		font-size: 30px; 
		text-decoration: none; 
		color: white; 
	}	
	
	footer a img {
		height: 50px; 
		padding: 0 20px;
	}		

Hidding and show mobile menu

making menu

	/* 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;
	}

Formatting extra elements

BLACKQUOTE

blockquote, q {
	margin-right: 50px;
	text-align: right;
	font-family: RobotoThinItalic;
}

Q

q {
	font-size: 15px;
}

UL, OL, LI

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;
}	

DT, DD

dt {
	font-family: RobotoBold;
	font-size: 20px;
	color: #9fa4c1;
	padding-top: 30px;
}
	
dd {
	padding-left: 30px;
	padding-bottom: 30px;
}

Image and captions

IMG

main img {
	border: 0px;
	object-fit: cover;
	width: 100%;
	height: 300px;
	padding: 0;
}

FIGURE

figure {
	margin-bottom: 15px;
	margin-top: 15px;
}

FIGCAPTION

figcaption {
	font-family: RobotoThinItalic;	
	font-size: 13px;
	text-align: right;
}

Table

table {
	width: 100%;
	marin: auto;
}

oraz HTML

 <table border="0" cellpadding="0" cellspacing="0">

TH, TR, TD, CAPTION

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;
}

add table

td ul {
	margin-left: 15px;
}
	
td ul li{ 
	color: #9fa4c1;	
}	
	
td.cover {
	padding: 0;
}

Formatting table in mobile view.

	th {
		font-size: 40px; 
	}
	
	td, caption { 
		font-size: 25px; 
	} 
	
	li { 
		padding-bottom: 20px; 
	}

Audio and Video

video {
	object-fit: contain;
	width: 100%;
}

Forms

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;
}

Formating forms in mobile view.

	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%;
	}