Create a beginner-level project Make A Modern Website Using React Js | Hero Section

Today we we will learn how to make A Modern Website Using React Js. However, i think there are many beginner who do not know How to Make A Modern Website Using React Js | Hero Section. Hopefully, this article will help you out.

If you want you can watch the live demo with this link.

App.js

import logo from './logo.svg';
import './App.css';
import backgroundImage from './bg.png';

function App() {
  return (
    <div className="container">
      {/* navbar */}
      <nav>
        <div className="logo_container">
          // paste the svg Link from below Link 
        </div>

        <div className="menu_container">
          <ul>
            <li>
              <a href="www.ziontutorial.com" className="active">Home</a>
            </li>
            <li>
              <a href="www.ziontutorial.com">Why Us</a>
            </li>
            <li>
              <a href="www.ziontutorial.com"> Review</a>
            </li>
            <li>
              <a href="www.ziontutorial.com"> Blog</a>
            </li>
          </ul>
        </div>

        <div className="btn_container">
          <ul>
            <li>
              <a href="www.ziontutorial.com"> Sign In</a>
            </li>
          </ul>
          <button className="btn_register">
            Register
          </button>
        </div>
      </nav>

      {/* hero section */}
      <div className="content">
        <div class="hero-text">
          {/* <p className="content_para">Trusted by over 2800+ companies</p> */}
          <h1>Delievr  <span className="content_span">Your Food </span></h1>
          <h1>Easy And Fast.</h1>
          <p className="content_alice">Vivamus vitae odio quam. Etiam non nibh luctus ligula tristique tristique.</p>
          <form>
            <input type="text" placeholder="Enter delivery address" />
            <button type="submit" className="btn_sec">
            Search
            </button>
          </form>
        </div>
        <div className="hero-image">
          <img className="image" src={backgroundImage} alt="Background" />
        </div>
      </div>
      <p></p>
    </div>
  );
}

export default App;

For App.css Part Visit this page.
Link

All the assets are mention here Like SVG and Logo everything you can get it from here.Link

Conclusion

I hope you enjoyed this little tutorial. Let me know over on

Happy Coding! 😇