Social links profile

Community feedback

• 

  P

  awwsalah•290

  @awwsalahPosted 8 months ago

  Hello kacabibrahim

  first try to name you html file index.html and your main css to style.css . in your html code first before you write your html open the image design and plan what kind of tag it needs,

  Practice to use, Semantic HTML elements

  like

  <nav>, <aside>, <main>, <header>, and <footer>

  are important for accessibility. They give screen readers contextual information about the different parts of a page. It gives assistive technology a better understanding of the different parts of a page

  so in this challenge use <main> and add class="container" or "card" this explaination i will use container

  <main class="container">
    <article class="card">
      <div class="card-title">
        <img src="images/avatar-jessica.jpeg" alt="" />
        <div>
  
  
          <h4>Jessica Randall</h4>
          <h5>London, United Kingdom</h5>
  
  
        </div>
  
  
        <p>"Front-end developer and avid reader."</p>
  
  
      </div>
  
  
      <div class="card-btns">
  
  
        <button>GitHub</button>
        <button>Frontend Mentor</button>
        <button>LinkedIn</button>
        <button>Twitter</button>
        <button>Instagram</button>
  
  
      </div>
  
  
    </article>
  </main>
  

  in the css code we can use this

  :root{

  --background-color: hsl(0, 0%, 8%);
  --forground-color: hsl(0, 0%, 12%);
  --btn-color: hsl(0, 0%, 20%);
  --secondary-color: hsl(75, 94%, 57%);
  --text-color:hsl(0, 0%, 100%);
  

  }

  body{

  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Inter", sans-serif;
  width: 100%;
  height: 100dvh;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  

  }

  .container{

  width: 300px;
  height: 450px;
  text-align: center;
  margin-bottom: 60px;
  

  }

  .card{

  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 20px;
  background-color: var(--forground-color);
  border-radius: 15px;
  

  }

  .card-title{

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  

  }

  .card-btns{

  display: flex;
  flex-direction: column;
  gap: 1rem;
  

  }

  button{

  height: 40px;
  width: auto;
  background-color: var(--btn-color);
  border: none;
  border-radius: 6px;
  color: var(--text-color);
  font-weight: 600;
  transition: 1s; /* this slow the hover animations into 1 second */
  

  }

  button:hover{ /* :hover it can change the behaviour of the button when u hover over it */

  background-color: var(--secondary-color);
  color: var(--btn-color);
  cursor: pointer; /* this change when you hover on the button, this code change the cursor*/
  

  }

  sorry i cant explain every detail but if u have any question in certain area of the code let me know.

  Marked as helpful

  1