HTML CODE
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Ari's Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<!-- Top Navigation Bar -->
<ul class="nav">
<li><a href="/home/index.html">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Projects</a></li>
<li><a href="" class="active">Skills</a></li>
<li><a href="">Contact</a></li>
</ul>
<h1>My Skills</h1>
<!-- Skills -->
<div class="skills">
<!--Skill 1 -->
<div class="skill-1">
<img
src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg">
</div>
<div class="skill-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg">
</div>
</div>
</main>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
body {
margin: 0;
background-color: #ECECEC;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #FFFFFF;
width: 100%;
}
.nav li {
display: inline;
font-size: 1.0625em;
}
.nav a {
display: inline-block;
padding: 2% 1%;
text-decoration: none;
color: #000000;
font-weight: 800;
}
.nav a:hover {
color: #f3ca20;
transition: 0.25s;
}
h1 {
text-align: center;
font-size: 3.125em;
font-weight: 700;
color: #000000;
}
.skills {
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.skill-1 {
background-color: #F7F7F7;
width: 25%;
height: 53%;
border: none;
border-radius: 25px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.skill-1:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: 0.35s;
cursor: pointer;
background-color: #FFFFFF;
}
.skill-1 img {
height: 80%;
width: 80%;
margin-top: 12%;
}
.skill-2 {
background-color: #F7F7F7;
width: 25%;
height: 53%;
border: none;
border-radius: 25px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.skill-2:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: 0.35s;
cursor: pointer;
background-color: #FFFFFF;
}
.skill-2 img {
height: 80%;
width: 80%;
margin-top: 12%;
}
Can you please help me I have tried so much and nothing is working. Thank you!
(IGNORE THIS I AM TYPING THIS BECAUSE STACKOVERFLOW WANTS ME TO TYPE MORE SMH
I am still typing more because my post is mostly code and I need to add more details blah blah blah blah )
It looks like thisenter image description here.
2
Answers
You can use flexbox to center align those divs. Try this –
}
I suggest using Flexbox to display the skills.
If you want to center the skills vertically in the available viewport space, this can be achieved with a few more declarations.
I must also suggest that you learn about Document and website structure. The navigation bar should be separate from the main content and therefore not inside the
<main>
element. The navigation bar should also be inside a<nav>
element. I also suggest using Flexbox for the navigation items instead of changing the display to inline.