Creating Website in React JS

Index.js

import ReactDOM from "react-dom/client";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Layout from "./Layout";

import Home from "./Home";

import Blogs from "./Blogs";

import Contact from "./Contact";

import NoPage from "./NoPage";

import './index.css';

export default function App() {

return (

</Route>

</Routes>

</BrowserRouter>

);

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

Home.js

const Home = () => {

return <div class="container" >

<div>

</div>

<br/>

</div>

<h2 class="myskills">Career Objective</h2>

<br/>

<p class="skills">To work in a professional environment</p>

</div>

<br/>

<h2 class="myskills">Technical skills</h2>

<br/>

<li>Front end language - HTML,CSS,Javascript,React Js</li>

<li>Backend language - C,C++,java,Python</li>

<li>Database - Mysql,Mongodb</li>

</ul>

</div>

<h2 class="myskills">Internship Certificate</h2>

<br/>

<li>I have done Web development</li>

</ul>

<br/>

<h2 class="myskills">my projects</h2>

<br/>

<thead>

<tr>

<th>

Project Domain

</th>

<th>Programming language</th>

<th>Project</th>

<th>Project link</th>

</tr>

<tr>

<th>

C language

</th>

<th>Array</th>

<th>Snake game</th>

<th>graphics</th>

</tr>

<tr>

<th>

C++

</th>

<th>Template</th>

<th>String</th>

</tr>

</thead>

</table>

<h2 class="myskills">Major projects</h2>

<div class="col-md-6 well ">Projects</div>

<div class="col-md-6 well ">Language</div>

<div class="col-md-6 well ">IOT using Robots</div>

<div class="col-md-6 well ">Rasperry pi</div>

<div class="col-md-6 well ">AI using Robots</div>

<div class="col-md-6 well ">Python</div>

</div>

<div >

<span class="footer-title">Product</span>

</li>

<a class="nav-link" href="#">Product 1</a>

</li>

<a class="nav-link" href="#">Product 2</a>

</li>

<a class="nav-link" href="#">Plans & Prices</a>

</li>

<a class="nav-link" href="#">Frequently asked questions</a>

</li>

</ul>

</div>

<span class="footer-title">Company</span>

</li>

<a class="nav-link" href="#">About us</a>

</li>

<a class="nav-link" href="#">Job postings</a>

</li>

<a class="nav-link" href="#">News and articles</a>

</li>

</ul>

</div>

<span class="footer-title">Contact & Support</span>

</li>

</li>

</li>

<a class="nav-link" href="#"><i class="fas fa-envelope"></i>Contact us</a>

</li>

<a class="nav-link" href="#"><i class="fas fa-star"></i>Give feedback</a>

</li>

</ul>

</div>

</span>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

<a href="#">Privacy Policy</a>

</li>

<a href="#">Terms of Use</a>

</li>

</ul>

</div>

</footer>

</div>

};

export default Home;

Blogs.js

const Blogs = () => {

return <div class="container" >

<h1>About Us</h1>

<h2> Company Info</h2>

<h3>186,West street</h3>

<h3>Andipatti</h3>

<br/>

<h4> For a remarkable About Us page, you simply need to figure out your organization's one-of-a-kind personality and afterward share it with the rest of the world. Easy, correct? Certainly not.

Your "About Us" page is perhaps the main page on your site, and it should be well crafted. This page likewise can also turn out to be the most disregarded pages, which is why you should make it stick out.

Wouldn't it be easier if you could look at About Us page examples to create a killer About Us page? Well, truth be told, there are a few organizations out there with astounding "About Us" pages, the components of which you can imitate on your own site.

We've done the job for you and put together the best About Us page examples to get your imaginative gears rolling. But before we jump onto the best about us page examples, let’s have a look at what is an about us page and why it’s important to create one.</h4>

</div>

};

export default Blogs;

Layout.js

import './Layout.css';

import { Outlet, Link } from "react-router-dom";

const Layout = () => {

return (

<br/>

<a class="navbar-brand"> <Link to="/blogs">Blogs</Link></a>

<a class="navbar-brand"><Link to="/contact">Contact</Link></a>

</div>

</div></div>

</nav>

</>

)

};

export default Layout;

Contact.js

const Contact = () => {

return <div class="container" >

<h1>Contact Us</h1>

<label for="uname">Phone Number</label>

</div>

<label for="pwd">Password</label>

</div>

<input class="form-check-input" type="checkbox" name="remember" required/>I agree the Terms and Condition

</label>

</div>

</div>

</form>

</div>

};

export default Contact;

index.css

body {

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background-color: aquamarine;

}

code {

font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

monospace;

}

button{

background-color: orange;

}

color: white;

font-size: larger;

font-weight: bolder;

}

h1{

text-align:center;

background-color: yellow;

color: black;

border-style: solid;

border-color:red;

}

input{

text-align:center;

}

App{

background-color: violet;

color: blue;

}

App.css

.App {

text-align: center;

color: slateblue;

text-shadow: #282c34;

background-color: tomato;

}

.App-logo {

height: 40vmin;

pointer-events: none;

}

@media (prefers-reduced-motion: no-preference) {

.App-logo {

animation: App-logo-spin infinite 20s linear;

}

.App-header {

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;

}

.App-link {

color: #61dafb;

}

h1{

color: #a2b9a2;

}

@keyframes App-logo-spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

Output

FullStackPages

React Js

Tags

Creating Website in React JS

No comments:

Post a Comment

Bootstrap

Python

Blog Archive

React JS

Bootstrap

Links

Python

Contact Us