Building a copy of website for practice

HTML-CSS
1

hey so basically i have just started coding and was wondering how would i push the apple logo off the side of the page and have even spacing just like the other text and logos?

Your code so far

<!-- file: index.html -->

<DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebsiteTest:)</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <script src="https://kit.fontawesome.com/9caddf5ba9.js" crossorigin="anonymous"></script>
    </head>





<body>
 
   <header>


<i class="fa-brands fa-apple" style="color:E4E4E4"></i>


<nav>
  <ul>
<li><a href="#Store">Store</a></li>
<li><a href="#Mac">Mac</a></li>
<li><a href="#IPad">IPad</a></li>
<li><a href="#IPhone">IPhone</a></li>
<li><a href="#Watch">Watch</a></li>
<li><a href="#Vision">Vision</a></li>
<li><a href="#AirPods">AirPods</a></li>
<li><a href="#Tv&Home">Tv&Home</a></li>
<li><a href="#Entertainment">Entertainment</a></li>
<li><a href="#Accessories">Accessories</a></li>
<li><a
href="#Support">Support</a></li>
</ul>
  </nav>




<i class="fa-solid fa-magnifying-glass" style="color:E4E4E4"></i>

<i class="fa-solid fa-bag-shopping" style="color:E4E4E4"></i>



<div class="box"></div>


      </header>
 




<img class="image1" src="https://png.pngtree.com/png-clipart/20200701/original/pngtree-single-person-character-in-vector-png-image_5359691.jpg">


</body>



    </html>

/* file: styles.css */





.box{
  position: absolute;
padding: 4vw 100vw;
backdrop-filter:blur(20px) brightness(30%);
z-index: -1;
}


nav {
font-size: 10px;
margin: 0;
padding: 0;

  
}

nav > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block: 0;
  
  
}

nav > ul > li {
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
  
}

nav > ul > li:hover{
  cursor: pointer;
  
  
}


li > a {
  color: #E4E4E4;
  text-decoration: none;
}

li > a:hover {
  color: #E4E4E4;
  text-decoration: none;
}

header{
   position: fixed;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
align-items: center;

}







.image1{
  width: 100%;
  height: 150%;
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2
  • you can use “margin-left” in “icon” element
  • or you could use padding within its “container” element

!image|645x194

happy coding :slight_smile:

3

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