I am in the process of designing a visually appealing webpage with no text other than captions.
To achieve the desired look, I aim to have each clickable box display in a unique size.
Here is the layout I envision:
__________________________
| | 2 |
| 1 |_______|
| | 3 |
|_________________|_______|
|_4_|_5_| 8 |
|_6_|_7_|_________________|
Currently, I have successfully designed boxes 1, 2, and 3. However, I am facing challenges with boxes 4, 5, 6, and 7. Due to their smaller sizes compared to box 8, they are displaying as follows, disrupting the flow, creating blank spaces, and extending the page beyond one screen:
|_4_|_5_|_6_|_7_|
| 8 |
|_________________|
How should I modify my code to ensure that the layout aligns with my vision?
Below is my current code, utilizing standard foundation framework:
<body class="blackbackground">
<div class="fixed" id="includeHeader"></div>
<div class="fullwidth row collapse">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Contact</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">r3gamers.com</h2>
</div>
</a>
</div>
</div>
<div class="fullwidth row collapse">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Contact</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<div class="fullwidth row collapse large-4">
<div class="fullwidth row collapse large-4">
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
</div>
<div class="fullwidth row collapse large-4">
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>