I'm in the process of creating a homepage and I'd like it to resemble this design: (not the best quality, but the software I used was subpar (I miss mspaint))
Originally, I used buttons which made linking and customization easy, but I encountered some sizing issues. So, I attempted using a div instead, but I'm struggling to make the entire box clickable as a link. If I can solve that issue, I still need to figure out how to position the boxes in specific places.
The question at hand: How can I create these boxes, arrange them in a grid-like layout, and have them lead to different websites? Is it possible to implement a function where hovering over a "site" displays manual information about it?
Keep in mind, I'm new to all of this, so a thorough explanation would be greatly appreciated! Thanks :P
Edit: Forgot to add any code, here it is:
CSS ("borrowed" from w3)
.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}
.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}
.button1:hover {
background-color: white;
color: #ffbf80;}
HTML:
<a href="https://www.google.com" target="blank" class="button button1">Google</a>
That's just one of the buttons, with others similar but with various links, margins, and colors. Whenever I try using multiple boxes, they stack vertically instead of aligning horizontally. I've played around with different margin settings and searched online for solutions, but nothing seems to correctly position them side by side.