Valorant-inspired React Website

We’ll build this webpage in 5 main sections.

We’ll create a Home.js component to hold all of this code.

Section 1.

All we’re going to do here is create containers for our product logo & button, and image gallery.

<div className=”section1">  <div className=”container”>    <img src=”./images/reyna.png” alt=”” className=”splash_img” />    <img src=”./images/val-logo.png” alt=”” className=”splash_logo” 
/>
<div className=”sign_up”> <a href=”https://localhost" target=”_blank”
rel=”noreferrer”>Sign Up</a>
</div> </div> <div ref={galleryRef} className=”gallery”> { loaded ? <Deck gallery={gallery} /> : null } </div></div>

Section 2.

For this section we’ll create a container for a grid of items.

function Point(props) {  return (    <div className=”point”>      <div className=”point_icon”>        <img src={props.img} alt=””/>      </div>      <div className=”point_title”>        <div className=”point_name”>In the Crosses</div>        <div className=”point_description”>Rewards accuracy and 
skill</div>
</div> </div> )}
<div className=”section2">  <div className=”marketing_points”>    <Point img=”./images/icons/val-symbol.png” />    <Point img=”./images/icons/bladestorm.png” />    <Point img=”./images/icons/dimensional-drift.png” />    <Point img=”./images/icons/empress.png” />    <Point img=”./images/icons/shock-bolt.png” />    <Point img=”./images/icons/turret.png” />  </div></div>

Section 3.

A simple flexbox of items.

<div className=”section3">  <div className=”accolades”>    <div className=”accolade”>      <i className=”fas fa-award”></i>    </div>    <div className=”accolade”>      <i className=”fas fa-flag”></i>    </div>    <div className=”accolade”>      <i className=”fas fa-gamepad”></i>    </div>  </div></div>

Section 4.

For this section we’ll create a container for a flexbox of items.

<div className=”package” style={{ backgroundColor: props.color }}>  <img src={props.image} alt=”” className=”package_image” />  <div className=”package_information”>    <div className=”package_head”>      <div className=”package_name”>{props.name}</div>      <div className=”package_description”>{props.description}</div>    </div>    <div className=”package_body”>      <div className=”package_price”>{`$${props.price}`}</div>      <div className=”package_purchase”>        <a href=”https://localhost" target=”_blank” 
rel=”noreferrer”>Select</a>
</div> </div> <div className=”package_foot”> Includes all base features: <ul> <li>Feature 1</li> <li>Feature 2</li> <li>Feature 3</li> <li>Feature 4</li> </ul> </div> </div></div>
<div className=”section4">  <div className=”packages_container”>    <Package color=”#2db634" img=”./images/viper.png” />    <Package color=”#fb6c32" img=”./images/phoenix.png” />    <Package color=”#3694f5" img=”./images/jett.png” />  </div></div>

Section 5.

For this section we’ll have a series of unordered lists.

<div className=”section5">  <section className=”contact_section” >    <ul>      <li>Affiliates</li>      <li>Careers</li>      <li>Privacy</li>    </ul>  </section>  <section className=”contact_section” >  <ul>      <li>Telephone <i className=”fas fa-phone-square-alt”></i> 
</li>
<li>Email <i className=”fas fa-envelope-square”></i> </li> </ul> </section> <section className=”contact_section” > <ul> <li>Instagram <i className=”fab fa-instagram-square”></i>
</li>
<li>Twitter <i className=”fab fa-twitter-square”></i> </li> <li>Facebook <i className=”fab fa-facebook-square”></i> </li> </ul> </section></div>

Let’s get our image gallery up and running.

We created this component in a separate tutorial.

<div ref={galleryRef} className=”gallery”>  {    loaded ?      <Deck gallery={gallery} /> : null  }</div>

Let’s implement a navigation bar.

We created this component in a separate tutorial.

There is much more nuance to this project.

Valorant-inspired React Website

--

--

--

Learning to code…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tagged Intersections —  How TypeScript Can Help Keep a Probe into Mars’ Orbit

Bad JavaScript Practices That’s Letting Your Code Down

Frontend tests structure

MVC — Flux — Redux Architectures

Let’s Explore Core: Part 6 — Tooling

Leetcode 352: Data Stream as Disjoint Intervals

Pro tips of using ES6 destructuring assignment and spread operator

How to Build Your Back-end Server with Deno

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
An Object Is A

An Object Is A

Learning to code…

More from Medium

Mantine a clean React UI library

React Js — Create column-level Filter

Color Scheme and Dark/Light Mode Theming in React 17.x using CSS Only — Part 1

How to create websites like shopping cart in React.