Assignment4

assignment4.markdown

Assignment4

A Pen by Arjun Yadav on CodePen.

License.

index.html

<div class="body">
  <div id="bottom"><span id="heading">The Best Car Company</span></div>
  <div id="menu">
    <h1 id="items">Home</h1>
    <h1 id="items">About</h1>
    <h1 id="items">Cars</h1>
    <h1 id="items">Contact</h1>
  </div>
  <section id="section">
    <div id="left">
      <span id="H1">Explore More</span>
      <div id="item">Our Story</div>
      <div id="item">Car Brands</div>
      <div id="item">Buying Guides</div>
      <div id="item1">Visit Us</div>

    </div>
    <div id="right">
      <h1 id="head">Welcome to The Best Car Company!</h1>
      <div id="photo">
        <div id="img" style="background-image:url(https://images.unsplash.com/photo-1615400369522-eecf20c01535?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBvcmNoZXxlbnwwfHwwfHx8MA%3D%3D);"></div>
        <div id="img" style="background-image:url(https://images.unsplash.com/photo-1617814498691-06b7d44af80b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHBvcmNoZXxlbnwwfHwwfHx8MA%3D%3D)"></div>
        <div id="img" style="background-image:url(https://images.unsplash.com/photo-1617814498655-ea350a397174?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fHBvcmNoZXxlbnwwfHwwfHx8MA%3D%3D)"></div>
      </div>
      <span>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</span>
      <h2>Our featured Cars
      </h2>
      <ul>
        <li><span id="li">BUGATTI</span>: From Molsheim to the racetracks.</li>
        <li><span id="li">BMW</span>: Dive into new worlds with BMW, get inspired, and experience the unknown, the unusual and some useful things, too.</li>
        <li><span id="li"> PORSCHE</span>: German automobile manufacturer specializing in high-performance sports cars.</li>
      </ul>
      <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      Please Check Our <a href="#">About Us</a> page</p>
      <p> Thank you for choosing Our Cars!</p>
    </div>
  </section>
  <div id="bottom"><span>© 2025 The Best Car Comapny. All right reserved.</span></div>
</div>

style.css

body{
  margin:0px;
  padding:0px;
}
.body{
  width:100%;
  height:100%;
}
#heading{
  font-weight:600;
  font-size:20px;
}
#top{
  width:100%;
  height:40px;
  background-color:gray;
  dispaly:flex;
  justify-content: center;
  align-items: center;
}
#heading{
  font-weight:600;
  font-size:20px;
}
#menu{
  width:100%;
  height:30px;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:#dadada;
}
#items{
  margin-left:40px;
  font-size:20px;
}
#section{
  
  display:flex;
}
#left{
  width:20%;
  
  background-color:#d0d0d0;
  padding:20px
}
#H1{
  font-size:30px;
  font-weight:400;
}
#item{
  padding:10px;
  font-size:20px;
  border-bottom:1px solid black;
  
}
#item1{
   padding:10px;
  font-size:20px;
}
#right{
  width:80%;
  hight:100%;
  padding:20px;
  
}
#head{
  font-weight:900;
  
}
#photo{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:10px;
  
}
#img{
  width:250px;
  height:350px;
  background-color:red;
  margin-left:10px;
  background-size:cover;
}
#li{
  
  font-weight:600;
}
#bottom{
  width:100%;
  height:50px;
  background-color:#3d3d3d;
  color:white;
  display:flex;
  justify-content: center;
  align-items: center;
}