Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:

I have completed my Personal Portfolio project. It is showing well on my page. But the page is not displaying well on my Android phone. Image scattered, etc.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
<main>
  <div class="navbar" id="navbar">
  <a href="#work-together">Contact</a>
<a href="#projects">Work</a>
<a href="#welcome-section">About</a>
</div>
<section id="welcome-section">
<h1>
  <div class="container">
        <div class="main">Hi, I am Vincent</div>
        <div class="sub">a Frontend Developer</div>
  <i class="fas fa-globe globe-icon"></i> <!-- Added new class for the globe icon -->      
    </div>
    </h1>
</section>

<section id="projects">
    <h2>These are some of my projects</h2>

 <div class="project-tile" data-label="Survey form">
  <a href="https://codebeta-surveyform.netlify.app/" target="_blank">
    <img src="https://res.cloudinary.com/dplinyj3o/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1687867908/surveyform-image_dzjul6.jpg" alt="Project Preview">
  </a>
</div>
    
<div class="project-tile" data-label="Tribute page">
  <a href="https://codepen.io/Vincent-Eniserije/full/KKraNRv" target="_blank">
    <img src="https://res.cloudinary.com/dplinyj3o/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1687867909/Tribute-image_govez8.jpg" alt="Project Preview">
  </a>
</div>
</section>

<section id="projects2">
<div class="project-tile" data-label="Technical documentation">
  <a href="https://codebeta-techdoc.netlify.app/" target="_blank">
    <img src="https://res.cloudinary.com/dplinyj3o/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1687867909/techdoc-image_eqesun.jpg" alt="Project Preview">
  </a>
</div>

<div class="project-tile" data-label="Product landing page">
  <a href="https://codebeta-landingpage.netlify.app/" target="_blank">
    <img src="https://res.cloudinary.com/dplinyj3o/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1687867908/Prodlanding-page-image_cpqo8u.jpg" alt="Project Preview">
  </a>
</div>
</section>

<section id="work-together">
<h1>
  <div class="container">
        <div class="main">Lets us work together...</div>
        <div class="sub2">What time are you free to talk?</div>
    </div>

<div class="social-links">
  <a href="https://www.facebook.com" target="_blank">
    <i class="fab fa-facebook"></i> Facebook
  </a>
  <a href="https://api.whatsapp.com/send?phone=2348090601149" target="_blank">
    <i class="fab fa-whatsapp"></i> WhatsApp
  </a>
  <a href="https://github.com" target="_blank">
    <i class="fab fa-github"></i> GitHub
  </a>
  <a href="https://twitter.com" target="_blank">
    <i class="fab fa-twitter"></i> Twitter
  </a>
  <a href="mailto:vincent.eniserije@gmail.com.com">
    <i class="fas fa-envelope"></i> Send a mail
  </a>
  <a href="tel:+2348090601149">
    <i class="fas fa-phone"></i> Call me
  </a>
</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>


    </h1>
 <a id="profile-link" href="https://app.netlify.com/teams/vincent-eniserije/sites" target="_blank">Visit my netlify profile</a>
</section>

<footer>
  
<a href="https://app.netlify.com/teams/vincent-eniserije/sites">Visit my profile</a>
        <span>© Copy Right 2023</span>
    </footer>

</main>
  </body> 
  

** end of undefined **

** start of undefined **

 
    body {
      margin: 0;
      padding: 0;
      background-color: pink;
    }


    .navbar {
  background-color: #8C001A;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  margin-right: 40px;
}

.navbar a {
  float: right;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  height: 50px;
  font-weight: bold;
  font-size: 30px;
  margin-right: 40px;
  margin-top: 20px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

    
    #welcome-section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: lightblue;
      
    }

  .main {
   font-weight: bold;
   font-size: 70px;
   
 }

  .sub {
    text-align: center;
    margin-bottom: 50px;
    color: #8C001A;
    font-style: italic;
    font-weight: bold;
   font-size: 40px;
  }

    #projects {
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      background-color: pink;
      margin-bottom: 40px;
    }

  #projects2 {
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      background-color: pink;
    }

.project-tile {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

.project-tile img {
  width: 70%;
  height: 60%;
  border: 20px solid black;
  margin-left: 90px;
  aspect-ratio: 1.5 / 1;
}

#projects2 .project-tile img {
  margin-top: 90px;
}

img {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.project-tile {
  position: relative;
}

.project-tile::after {
  content: attr(data-label);
  position: absolute;
  bottom: -30px;
  left: 100;
  right: 0%;
  width: 73%;
  height: 40px;
  background-color: gray;
  color: black;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  line-height: 40px;
}


h2 {
  width: 100%;
  text-align: center;
  margin-top: 80px;
  text-decoration-thickness: 2px;
  font-weight: bold;
  font-size: 50px;
   font-family: "Rockwell Extra Bold", Arial, sans-serif;
    position: relative;
   }

     h2::after {
  content: "";
  position: absolute;
  left: 480;
  bottom: -3px;
  width: 43%;
  height: 4px;
  background-color: black;
}

 #work-together {
      height: 100vh;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      background-color: #E3E4FA;
      
    }

#work-together a#profile-link {
  display: none;
}

.sub2 {
    text-align: center;
    margin-bottom: 50px;
    color: Black;
    font-style: italic;
    font-weight: bold;
   font-size: 40px;
  }

 .social-links {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 30px;
  
}

.social-links > a {
  margin-right: 30px;
  
}

.social-links {
  transition: transform 0.3s;
}

.social-links:hover {
  transform: scale(1.2);
}


#profile-link {
  display: inline-block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: px;
}

#profile-link:hover {
  background-color: #555;
}

@media (max-width: 600px) {
  .navbar {
    width: 100%;
  }

  .navbar a {
    float: none;
    display: block;
    text-align: center;
    padding: 10px;
  }

  .project-tile {
    width: 100%;
    padding: 5px;
  }

  h2 {
    margin-top: 100px;
  }
}

    footer {
  text-align: right;
  bottom: 0;
  right: 0;
  padding: 10px;
  margin-right: 100px;
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 20px;
}

   footer a {
     margin-right: 30px;
          
   }

.container {
  position: relative; /* Add relative positioning to the container */
}

.globe-icon {
  position: fixed;
  top: 30px;
  right: 30px;
  margin-top: 120;
  color: #000; /* Set the color of the icon */
  font-size: 50px; /* Adjust the size of the icon */
  animation: spin 3s linear infinite; /* Animation property for spinning */
  z-index: 9999; /* Ensure the icon appears above other elements */
}

@keyframes spin {
  from {
    transform: rotate(0deg); /* Start position */
  }
  to {
    transform: rotate(360deg); /* End position */
  }
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

You need to understand the default behavior for flexbox.

CSS-TRICKS: A Complete Guide to Flexbox

Also, I would not use absolute positioning unless absolutely necessary. For example, why do you need it on h2::after?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.