For farmers
Tags: photoshop, beginners, html, css
Published: 2023-08-12 04:23:29

```
<html>
<head>
<style>
.header {
  padding: 80px;
  text-align: center;
  text-color:white;
  background-image: url("https://th.bing.com/th/id/R.f98936d507b50b7f68f8f7704e686b7d?rik=kLK0LX4E48r%2bvw&riu=http%3a%2f%2fcuddlesanctuary.com%2fwp-content%2fuploads%2f2018%2f02%2fman-and-woman-handshake.jpg&ehk=ngbB6S4mJxEKvUWmDPVIC9H4Qwpsxfi5wyGvEzu3%2bJQ%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1");
  background-color: white;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

  background: #1abc9c;

  color: black;
}

.header h1 {
  font-size: 40px;
}



}
.navbar {
  overflow: hidden;
 

  background-color: #333;
}


.navbar a {
  float: left;
  

  display: block;

  color: black;

  text-align: center;

  padding: 14px 20p;

  text-decoration: none;
}

.navbar a.right {
  float: right;
  
}

.navbar a:hover {
  background-color: #ddd;
  

  color: black;
}

* {
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
}

.side {
  flex: 30%;

  background-color: #f1f1f1;

  padding: 20px;
}

.main {
  flex: 70%;

  background-color: white;

  padding: 20px;
}

.footer {
  padding: 20px;

  text-align: center;
  background: #ddd;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #04AA6D;
  color: white;
}

.round {
  border-radius: 50%;
}
<style>
</head>

<body>

  <div class="header">
    <h1>THE-HELPER</h1>
    <p>A website created by FRIENDS.</p>
  </div>

  <div class="navbar">
    <a href="#">HOME</a>

    <a href="#">MENU</a>
    <a href="#">ABOUT</a>
    <a href="#" class="right">INFO</a>
  </div>

  <div class="row">
    <div class="side">
      <h2>About Me;</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>More Text</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div>
    </div>
    <div class="main">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Buy what you don’t have yet, or what you really want, which can be mixed with what you already own. Buy only because something excites you, not just for the simple act of shopping.</p>
      <br>
      <h2>THE HELPER</h2>
      <h5>FOR CONSUMER HELP</h5>
      <img src="modaliyar/IMG-20210223-WA0028.jpg" alt="chinuu" title="HELPER">
      <p>SHOPPING.</p>
      <p>the way of onine shopping is complete based retail platforms that makes coustmer to buy easily in any palce by their own and conn't depends on other.</p>
    </div>
  </div>

  <div class="footer">
    <h2>Footer</h2>
  </div>

</body>

</html>

</body>
<a href="#" class="previous" class="right">&laquo; Previous</a>
<a href="#" class="next" class="right">Next &raquo;next</a>

</html>
```