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! 😇
Top comments (0)