#Help with Solo Project Please

1 messages · Page 1 of 1 (latest)

shy badge
#

Hi there! 🙂 I finished the Google Clone section and now I am working on my own solo project. It’s one of those bio links websites, where you put the link on your TikTok, insta etc and people can be re-directed to all of your social media pages, blogs, etc.

I have tried everything but can’t get this right! I am trying to get the img on the left, links on the right & of course the border line in the middle, all perfectly aligned. But I have tried a variety of things and can’t get it, could someone help please? The buttons on the right are floating to the top right and aren't algning.

Here is my code, you can see the issue better on VS code I think:

// html

<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<img src="SaludosSelena_Logo_BG.png">
<div class="nav-wrapper">
<button class="link">YouTube</button>
<button class="link">Free Templates</button>
<button class="link">Etsy</button>
<button class="link">Pinterest</button>
</div>

<!--<h2>¡Quiubo!</h2>-->
</body>

</html>

// css

html, body {
margin: 0px;
padding: 0px;
background: #FFF8F8;
}

img {
display:inline-flex;
justify-content: center;
max-height: 400px;
padding: 70px;
margin: 20px;
border-right: 1px solid #D3D3D3;
}

.nav-wrapper {
float: right;
}

.link {
display: block;
text-align: center;
color: #FFF8F8;
border: 1px solid #EF8B8B;
background-color: #EF8B8B;
padding:20px;
margin: 20px;
border-radius: 5px;
width: 500px;
}

Captura_de_Pantalla_2023-09-16_a_las_22.14.46.png
tough kelp
#

My first suggestion would be to take a modern approach to the page layout (e.g. flexbox, grid), which would mean getting rid of the float property. That property is still supported in CSS, but it's a throwback to Web 1.0 pages. I don't believe that there is any Scrimba course that describes it or shows how to use it.

shy badge
tall flax