Hello there! I am looking to create a responsive layout without using bootstrap or any other framework..... I want to build it from scratch.
https://i.stack.imgur.com/GAOkh.png
I am aiming for responsive blocks that collapse into one column when the page is resized, along with a fixed yet adaptable menu.
While I have my navbar and menu set up, I am facing difficulties in organizing the blocks effectively.
This is my current progress:
html
<div class="container">
<div class="navbar">
...
</div><!-- navbar -->
<div class="menu-left" id="menu-left">
...
</div><!-- menu left -->
<div class="blocks">
<div class="column-one">
<div class="column-one-first-block"></div>
<div class="column-one-second-block"></div>
</div>
<div class="column-two">
<div class="column-two-first-block"></div>
<div class="column-two-second-block"></div>
</div>
<div class="column-three">
<div class="column-three-first-block"></div>
<div class="column-three-second-block"></div>
</div>
</div>
</div><!-- container -->
css
body{
margin: 0;
background-color: #EAEAEA;
}
.navbar{
background-color: #009EE0;
width: 100%;
height: 54px;
}
#menu-left{
float: left;
position: absolute;
height: 100%;
width: 230px;
background-color: #FFF;
}
I am still working on figuring out the styling for the blocks...
Thank you!