HTML5 and CSS3 responsive web: Difference between revisions
Jump to navigation
Jump to search
(No difference)
|
Latest revision as of 07:40, 4 April 2016
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;
}
/* 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%;
}
