This portion goes behind the navbar as a gap filler. Remove it if not necessary.
This is the main section. You can add multiple main sections. Frames are responsive by default.
<div class="fr w_80Per m_a"> <!--Starting: frame no.1-->
<span> <!--Gap balancer for nav-->
This portion goes behind the navbar as a gap filler.
</span>
<div class="frTs_1"> <!--Starting: main section-->
<p>
This is the main section.
</p>
</div> <!--Ending: main section-->
Middle section type: 1 - left part.
In this middle section the left and right parts are divided equally.
<div class="frMs_1_1"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 1 - left part.
</p>
</div> <!--Ending: mid section - left-->
Middle section type: 1 - right part.
Adding more {divs} here, will result in more middle section.
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 1 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 2 - left part.
In this middle section the left and right parts are divided 2:1.
<div class="frMs_2_1"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 2 - left part.
</p>
</div> <!--Ending: mid section - left-->
Middle section type: 2 - right part.
Adding more {divs} here, will result in more middle section.
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 2 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 3 - left part.
In this middle section the left and right parts are divided 1:2.
<div class="frMs_1_2"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 3 - left part.
</p>
</div> <!--Ending: mid section - left-->
Middle section type: 3 - right part.
Adding more {divs} here, will result in more middle section.
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 3 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 4 - left part.
In this middle section the left and right parts are divided 3:1.
<div class="frMs_3_1"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 4 - left part.
</p>
</div> <!--Ending: mid section - left-->
Middle section type: 4 - right part.
Adding more {divs} here, will result in more middle section.
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 4 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 5 - left part.
In this middle section the left and right parts are divided 1:3.
<div class="frMs_1_3"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 5 - left part.
</p>
</div> <!--Ending: mid section - left-->
Middle section type: 5 - right part.
Adding more {divs} here, will result in more middle section.
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 5 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 6 - left part.
In this middle section 3 sub sections are divided equally.
<div class="frMs_1_1_1"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 6 - left part.
</p>
</div> <!--Ending: mid section - left-->
Middle section type: 6 - middle part.
This will convert to 1 part per row in mobile size & 2 parts per row in tablet size by default.
<div> <!--Starting: mid section - middle-->
<p>
Middle section type: 6 - middle part.
</p>
</div> <!--Ending: mid section - middle-->
Middle section type: 6 - right part.
Adding more {divs} here, will result in more middle section.
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 6 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 7 - left part.
Middle section type: 7 - right part.
In this middle section the left side has a circle with the radius of 100px & the right side is (rest of the screen size - 100px) by default.
<div class="frMs_R100px_1"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 7 - left part.
</p>
</div> <!--Ending: mid section - left-->
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 7 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 8 - left part.
In this middle section the right side has a circle with the radius of 100px & the left side is (rest of the screen size - 100px) by default.
<div class="frMs_1_R100px"> <!--Starting: mid section-->
<div> <!--Starting: mid section - left-->
<p>
Middle section type: 8 - left part.
</p>
</div> <!--Ending: mid section - left-->
<div> <!--Starting: mid section - right-->
<p>
Middle section type: 8 - right part.
</p>
</div> <!--Ending: mid section - right-->
</div> <!--Ending: mid section-->
Middle section type: 8 - right part.
Middle section type: 9 - first element.
In this middle section 3 sub sections are divided into 1:2. But its special because the 1st element created inside this class will stay on the left part whereas the 2nd and 3rd elements will stack on top of each other in the right part.
<div class="frMs_1_s2"> <!--Starting: mid section-->
<div> <!--Starting: mid section - 1st element-->
<p>
Middle section type: 9 - left part.
</p>
</div> <!--Ending: mid section - 1st element-->
Middle section type: 9 - second element.
This will convert to 1 part per row in mobile size.
<div> <!--Starting: mid section - 2nd element-->
<p>
Middle section type: 9 - right part - top.
</p>
</div> <!--Ending: mid section - 2nd element-->
Middle section type: 9 - third element.
Adding more {divs} here, will not hold the structure. It is recommended that you restart a new parent div after the third child.
<div> <!--Starting: mid section - 3rd element-->
<p>
Middle section type: 9 - right part - bottom.
</p>
</div> <!--Ending: mid section - 3rd element-->
</div> <!--Ending: mid section-->
Middle section type: 10 - first element.
In this middle section 3 sub sections are divided into 2:1. But its special because the 3rd element created inside this class will stay on the right part whereas the 1st and 2nd elements will stack on top of each other in the left part.
<div class="frMs_s2_1"> <!--Starting: mid section-->
<div> <!--Starting: mid section - 1st element-->
<p>
Middle section type: 10 - left part - top.
</p>
</div> <!--Ending: mid section - 1st element-->
Middle section type: 10 - second element.
This will convert to 1 part per row in mobile size.
<div> <!--Starting: mid section - 2nd element-->
<p>
Middle section type: 10 - left part - bottom.
</p>
</div> <!--Ending: mid section - 2nd element-->
Middle section type: 10 - third element.
Adding more {divs} here, will not hold the structure. It is recommended that you restart a new parent div after the third child.
<div> <!--Starting: mid section - 3rd element-->
<p>
Middle section type: 10 - right part.
</p>
</div> <!--Ending: mid section - 3rd element-->
</div> <!--Ending: mid section-->
Middle section type: 11. This is a single container similar to main section.
<div class="frMs_1"> <!--Starting: mid section-->
<div>
<p>
Middle section type: 11.
</p>
</div>
</div> <!--Ending: mid section-->
This is the footer section.
<div class="frBs_1"> <!--Starting: footer section-->
<p>
This is the footer section.
</p>
</div> <!--Ending: footer section-->
</div> <!--Ending: frame no.1-->