How can I move my skills inline with each other and in the center of my page? HTML and CSS

Ari39sKindaDumb
September 18, 2023
193 views
0 votes
2 Answers

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.

Tags: css html

Answers

- BlakeDavis
- September 12, 2023 at 9:39 pm
- 0 votes
0
You can use flexbox to center align those divs. Try this –
```
.skills {
width: 100%;
height: 100%;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
```
}
Login or Signup to reply.

I suggest using Flexbox to display the skills.

.skills {
  display: flex;
  justify-content: space-evenly;
}

.skill {
  width: 25%;
  padding: 1em;
}

.skill img {
  width: 100%;
}

* {
  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 {
  display: flex;
  justify-content: space-evenly;
}

.skill {
  width: 25%;
  padding: 1em;
  background-color: #F7F7F7;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill: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 img {
  width: 100%;
}

<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>

  <div class="skills">
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5">
    </div>
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="CSS3">
    </div>
  </div>  
</main>

If you want to center the skills vertically in the available viewport space, this can be achieved with a few more declarations.

html, body, main {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
}

.skills {
  margin-block: auto;
}

* {
  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;
}

html, body, main {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
}

.skills {
  display: flex;
  justify-content: space-evenly;
  margin-block: auto;
}

.skill {
  width: 25%;
  padding: 1em;
  background-color: #F7F7F7;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill: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 img {
  width: 100%;
}

<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>

  <div class="skills">
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5">
    </div>
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="CSS3">
    </div>
  </div>  
</main>

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.

* {
  font-family: 'Montserrat', sans-serif;
}

html,
body,
main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  margin: 0;
  background-color: #ECECEC;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 1em 0;
  background-color: #FFFFFF;  
}

nav a {
  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 {
  display: flex;
  justify-content: space-evenly;
  margin-block: auto;
}

.skill {
  width: 25%;
  padding: 1em;
  background-color: #F7F7F7;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill: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 img {
  width: 100%;
}

<nav>
  <!-- Top Navigation Bar -->
  <ul>
    <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>
</nav>

<main>
  <h1>My Skills</h1>

  <section class="skills">
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5">
    </div>
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="CSS3">
    </div>
  </section>  
</main>

Please signup or login to give your own answer.

Click here to cancel reply.