Best Fruit Shop Landing Page with HTML and CSS

Hello friends, welcome to this new blog post. Today we have created a beautiful fruit shop landing page for you which is quite amazing. If you are learning coding now, then this project is absolutely right for you. Making this project is quite easy because we have made this fruit shop landing page with the help of html and css.

If you have even a little knowledge of html css, then you can make this type of landing page very easily. We have used very normal coding for this landing page like we have used some tags, input tag, image tag, all of these, which is quite easy. It is useful if you have a lot of knowledge of CSS then you can also use animation in this landing page, which will make this landing page look very good. Any user can use this landing page. Even if you do not have knowledge of coding, you can use it. By using this project you will get very good knowledge of coding.

Fruit Shop Landing Page Html Code

This is the html code of our landing page, using which we have created the structure of this landing page and I would like to tell you that using the HTML code you can only create the structure of any project, which does not look good at all, then to make the landing page beautiful you will have to use CSS, the code of which we have given below.

				
					<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">

<div class="main">
  <div class="left-col">
    <img decoding="async" src="https://i.postimg.cc/J7gH2kHY/logo.png" class="logo">
    <div class="content-box">
      <img decoding="async" src="https://i.postimg.cc/QNpk1myk/rating.png" class="rating">
      <h1>Pico de Gallo Fruit Salad</h1>
      <p>Attractively arrange the vegetable and fruit slices on a serving platter. Sprinkle with salt and chile powder to taste. Serve with lime wedges to squeeze over all.</p>
      <button type="button">View Ingredients<img decoding="async" src="https://i.postimg.cc/KYktzDTT/arrow.png"></button>
    </div>
  </div>

  <div class="right-col">
    <div class="navbar">
      <div class="search-box">
        <input type="text" placeholder="Find recipes, videos and more">
        <img decoding="async" src="https://i.postimg.cc/cLJRqS4X/search.png">
      </div>
      <ul>
        <li><a href="https://github.com/bilalcapripio" target="_blank" rel="noopener"><img decoding="async" src="https://i.postimg.cc/ZqRyQFHg/fill-tag.png" target="_Bilal">Saves</a></li>
        <li><a href="https://dev.to/bilalcapripio" target="_blank" rel="noopener">Sign Up</a></li>
      </ul>
    </div>
    <div class="more-items">
      <img decoding="async" src="https://i.postimg.cc/9Qw6Yv5N/fruit1.png">
      <img decoding="async" src="https://i.postimg.cc/9Qw6Yv5N/fruit1.png">
      <img decoding="async" src="https://i.postimg.cc/9Qw6Yv5N/fruit1.png">
    </div>
  </div>

  <img decoding="async" src="https://i.postimg.cc/yxB1M7Bd/fruits.png" class="main-img">

</div>

Fruit Shop Landing Page Css Code

				
					* {
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
}
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.left-col {
  flex-basis: 50%;
  background: repeating-radial-gradient(circle at 0 0, #eee, #ccc 50px);
  position: relative;
}
.right-col {
  flex-basis: 50%;
  /*     background: #ff7878; */
  position: relative;
  background: #ff7979;
}
.logo {
  width: 80px;
  margin: 30px 80px;
}
.content-box {
  width: 290px;
  position: absolute;
  top: 170px;
  left: 80px;
}
.rating {
  width: 90px;
}
.content-box h1 {
  font-size: 58px;
  margin: 15px 0 30px;
}
.content-box p {
  font-size: 13px;
  color: #949494;
  line-height: 15px;
  margin-bottom: 80px;
}

.content-box button {
  background: #ff7878;
  color: #fff;
  display: flex;
  align-items: center;
  border: 0;
  outline: none;
  border-radius: 4px;
  padding: 13px 25px;
  cursor: pointer;
}
.content-box button img {
  width: 25px;
  margin-left: 20px;
}

.navbar {
  width: 80%;
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
  padding: 7px 15px;
  border-radius: 20px;
}
.search-box input {
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
}
::placeholder {
  color: #fff;
  font-size: 9px;
}
.search-box img {
  width: 13px;
  margin-left: 20px;
}
.navbar ul {
  display: flex;
}

.navbar ul li {
  list-style: none;
  margin-left: 50px;
}
.navbar ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.navbar ul li img {
  width: 15px;
  margin-right: 15px;
}

.more-items {
  width: 220px;
  display: block;
  position: absolute;
  bottom: 35px;
  right: 100px;
}

.more-items img {
  width: 220px;
  margin: 10px 0;
}
.main-img {
  width: 450px;
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -45%);
}

Live Preview:

See the Pen Fruit Website Using HTML and CSS by Bilal.Rizwaan (@Bilal1909) on CodePen.

Best Fruit Shop Landing Page with HTML and CSS

Table of Contents