html body margin height 100 font-family Raleway sans-serif header flex

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
html,body{
margin:0;
height: 100%;
font-family: 'Raleway', sans-serif;
}
header {
flex-basis:100%;
margin:0;
padding:10px;
background-color: #F4A460;
text-align: left;
}
header h1{
font-weight:normal;
margin: 0;
padding-top: 10px;
}
.all{
display:flex;
flex-wrap: wrap;
height: 100%;
}
.left-col{
flex-grow:2;
padding:10px;
background-color: #FFEFD5;
}
.middle-col{
flex-grow:3;
flex-basis:50%;
background-color: #FFE4C4;
padding:0 15px;
}
.right-col{
flex-grow:1;
text-align:left;
background-color: #FAEBD7;
}
.left-col ul{
list-style: none;
text-decoration: none;
color:blue;
}
.text{
background-color: white;
border-radius:10px;
padding:10px;
margin:10px;
}
.text img{
float:left;
padding:5px;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
footer{
bottom: 0;
flex-basis:100%;
margin-top: 0;
background-color: #F4A460;
}
footer h1{
font-weight:normal;
margin: 0;
padding: 10px;
}
@media all and (max-width:320px) {
header{
order:0;
}
.right-col{
order:1;
}
nav, .left-col, .middle-col, footer{
order:2;
}
}
@media all and (max-width:480px){
.left-col li{
display: inline-block;
padding: 10px;
}
}
@media all and (max-width:640px){
.all{
flex:1 auto;
}
.middle-col{
flex-grow:1;
flex-basis:640px;
}
}
@media all and (max-width:960px){
}
@media all and (min-width:600px)
@media all and (min-width:600px)