Responsive Web Design Projects - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I was wondering why my center project div changed shape once I linked an image to it the outer divs are just who I want them, but the center div is not.
Describe your issue in detail here.

   **Your code so far**

/* file: index.html */
<DOCTYPE! html>
 <html>
  <head>
    <style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap');
</style>
    <title>Nacho Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/31d3042267.js" crossorigin="anonymous"></script>
  </head>

<nav id='navbar'>
   <a class='links' href='#'>About</a>
   <a class='links' href='#'>Contact</a>
   <a class='links' href='#'>Portfolio</a>
</nav>
<body>
   <section id='welcome-section'>
    <h1 class='title'>Hi they call me Nacho</h1>   
    <p class='intro'> Developer in Progress</p>
</section>
<section id='projects'>
 <h2>Here are some of my projects</h2>
 <div class='projects'> 
  <a href='https://codepen.io/ignacio530/pen/wvmeaqx' target='_blank' class='project-tile'>
    <img src='https://hosting.photobucket.com/images/i/Ignacio1530/Screenshot_(20).png'> Product Landing Page
  </a>

  <a href='https://codepen.io/ignacio530/pen/abEXNag' class='project-tile2'>
    <img src='https://hosting.photobucket.com/images/i/Ignacio1530/Screenshot_(19)_-_Copy.png'> 
    Survey Page
   </a>


 <a href='https://codepen.io/ignacio530/pen/abEXNag' class='project-tile-3'>
   <img src='https://hosting.photobucket.com/images/i/Ignacio1530/Screenshot_(21)_-_Copy.png'> Tribute Page

   </a>
 </div>
</section>

<section class='info'>
<div class='contact-infi'>Contact - Info </div>
</p>
 <div>
  <a class='contact-links' href='#'>
    <i id='icons' class="fa-brands fa-square-facebook"> Facebook</i></a>
  <a class='contact-links' href='#'>
    <i id='icons' class="fa-brands fa-square-instagram"> Instagram</i></a>
  <a class='contact-links' href='#'>
    <i id='icons' class="fa-brands fa-square-github"> Github</i>
    </a>

  <a class='contact-links' id='icons' href='#'><i id='icons' class="fa-solid fa-square-phone"></i> Contact</a>

 </div>

  <footer>
 
  </footer>
 </section>
</body>  
</html>

/* file: styles.css */
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 text-decoration: none;
 list-style: none;
}


body {
 background-color: red;
 text-align: center;
}



#navbar { 
 position: fixed;
 width: 100%;
 height: 80px;
 display: flex;
 align-items: center;
 background-color: green;
 justify-content: flex-end;
}

.links {
 color: black;
 margin: 20px;
 font-size: 26px; 
 font-family: 'Bebas Neue';
 font-weight: bold;
}

.title {
 font-family: Lobster;
 font-size: 72px;
}


.intro {
 font-family: 'Bebas Neue';
 font-size: 32px;
}


#welcome-section {
 height: 100vh;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

#projects {
 background-color: green;
}
.projects {
 display: flex;
 width: 100%;
 height: 350px;
 background-color: green;
 justify-content: center; 
 align-items: center;
 
}

.project-tile {
 width: 250px;
 height: 250px;
 background-color: black;
 margin: 0 20px;
}


.project-tile-2 {
 width: 250px;
 height: 250px;
 background-color: black;
 margin: 0 20px;
}


.project-tile-3 {
 width: 250px;
 height: 250px;
 background-color: black;
 margin: 20px;
}



h2 {
 font-family: 'Bebas Neue';
 font-size: 42px;
 padding-top: 30px;
}



img {
 height: 200px;
 width: 250px;
}




.info {
 display: flex;
 width: 100%;
 height: 80vh;
 flex-direction: column;
 align-items: center;
 justify-content: center;

}


.contact-infi {
 font-size: 42px;
 font-family: 'Bebas Neue';
 padding-bottom: 20px;
}


.begging {
 font-size: 24px; 
}


.contact-links {
 margin: 30px;
}


footer {
 padding-top: 100px;
}


#icons { 
 font-size: 32px;
 color: black;
}

   **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Personal Portfolio Webpage

Link to the challenge:

2

Are you missing a ‘-’ in your class assignment in the HTML for that center DIV?

3

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