Q: Design DIV using HTML5 and CSS3 with responsive design Please help me to create this image below using HTML5 and CSS3 with responsive design. Thanks guys! 
Cheers :)


A: If you don't want to use Bootstrap, this code example could perform the same effect you need.
Try it in a browser:


<div style="display: block; background-color:#0F0; width:100%; height: 50px;">1</div>

<div style="display: inline-block; background-color:#F00; width:50%; height: 50px;">2</div><div style="display: inline-block; background-color:#E00; width:50%; height: 50px;">3</div>

<div style="display: inline-block; background-color:#110; width:25%; height: 50px;">4</div><div style="display: inline-block; background-color:#220; width:25%; height: 50px;">5</div><div style="display: inline-block; background-color:#330; width:25%; height: 50px;">6</div><div style="display: inline-block; background-color:#440; width:25%; height: 50px;">7</div>

<div style="display: inline-block; background-color:#006; width:12.5%; height: 50px;">8</div><div style="display: inline-block; background-color:#007; width:12.5%; height: 50px;">9</div><div style="display: inline-block; background-color:#008; width:12.5%; height: 50px;">10</div><div style="display: inline-block; background-color:#006; width:12.5%; height: 50px;">11</div><div style="display: inline-block; background-color:#009; width:12.5%; height: 50px;">12</div><div style="display: inline-block; background-color:#006; width:12.5%; height: 50px;">13</div><div style="display: inline-block; background-color:#00A; width:12.5%; height: 50px;">14</div><div style="display: inline-block; background-color:#00B; width:12.5%; height: 50px;">15</div>


Important things:


*

*To put several divs together, you need to specify the style option
display_ inline-block; in each of them 

*Div width must be in %

