DEV Community

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

Posted on

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

Image description
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;





Enter fullscreen mode Exit fullscreen mode

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! 😇

Top comments (0)