I'm currently making a website and am trying to put a picture within a column. On the left, there is some text. The website only displays a broken image:
This is my code so far:
import React from "react";
function Home() {
return (
<div className="home">
<div class="container">
<div class="row align-items-center mb-2">
<div class="col-lg-5 my-5">
<h1 class="font-weight-light ">Home</h1>
<p>redacted</p>
</div>
<div class="col-lg-7 my-5">
<img src="/Users/megan/meganwebsite/src/components/20220502_144614.jpg" alt="photo" class="rounded float-end img-fluid"/>
</div>
</div>
</div>
</div>
);
}
export default Home;
You can change with a way:
import image from './src/components/20220502_144614.jpg'
<img src={image} alt="photo" class="rounded float-end img-fluid"/>
Related
Below, I have a code that is eventually rendered as a route in a react, single page, app. What I was hoping to get, was that depending on what div was clicked, each applying a 'filter', that the component variable, will change components, based off what was imported.
import React from "react";
import { useState } from 'react';
import UpperLevel from "./UpperLevel";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridHome from "./GridHome";
import GridGym from "./GridGym";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
function ExercisesLauncher() {
const component=<Grid/>;
function applyCardio() {
const component=<GridCardio/>
}
function applyGym() {
alert( "GymClicked" );
}
function applyHome() {
alert( "HomeClicked" );
}
function applyUpper() {
alert( "UpperClicked" );
}
function applyLower() {
alert( "LowerClicked" );
}
return (<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" onClick={applyGym} class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" onClick={applyHome} class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" onClick={applyUpper} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" onClick={applyLower} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
//THIS WILL CHANGE BASED ON CLICKS
{component};
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
}
export default ExercisesLauncher;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
So far, I added alerts to make sure the server recognized these div elements being clicked, now, I just wish to apply the respective component to the body after a div is clicked. The main grid component does load where {component} is, which is perfect, I just do not know why the GridCardio component is not switching out the Grid component
Rather than loading Grid into a component, that is loaded into another component, I used in my App2 to load the page(compiled everything pertaining to this page) and came up with this script, which was a lot easier than I thought it would be. I learned that I had to rerender my components! This does exactly what I needed! I had a lot of unnecessary components and this was the best approach in my opinion. I am also trying to get my mind used to using arrow notation, so do not mind the "function's
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyGym} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyHome} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyUpper} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyLower} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;
You're tripping up on the way you're using your component variable. You don't want to re-declare the variable, you just want to assign a new value
function ExercisesLauncher() {
var component=<Grid/>;
function applyCardio() {
component=<GridCardio/>;
}
...
I am building a react app that is using routes. To better work on a single "page", I use a code playground to mess with the code and aim to implement it into the final react app. However using routes complicates things and I want to know how to implement the script I know works. In the single page react app, my index.js (last snippet) checks elements in the html of one page (the 2 div's in the first code snippet) and will render components (second code snippet) based off the conditional. On my final react app, having multiple of these pages, I am not sure where or how to include the script, as the html document it uses is, itself, a component (first snippet).
//This div is the component that, on click, applies a component to be returned via jsx function. This is a component called ExercisesLauncher.jsx
<div id="Gym/Home/Upper/Lower/Cardio" class="col-lg-4 d-flex align-items-stretch">
<div
style={cursorPointer}
class="card w-100 mb-4 rounded-3 shadow-sm filter"
>
<div class="card-heading py-1">
<h1 class="normal-heading">Gym/Home/Upper/Lower/Cardio</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
//This div is created later in the same file, loading UpperLevel component, root was originally used in the html file (single page) to load components seen later in the question.
<div id="root" class="container">
<UpperLevel />
</div>
//This is the component that is to be loaded, and included are the other components I wish to swap out depending on if a div is clicked. UpperLevel is used in the ExercisesLauncher component
import React from "react";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridGym from "./GridGym";
import GridHome from "./GridHome";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";
function UpperLevel() {
return (
<div class="album py-5 container">
<GridCardio />
</div>
);
}
export default UpperLevel;
//This code was used for the single page not using routes, in the playground, the DOM references refer to the divs above, that are now in a .jsx file, not an HTML file
var gym = document.getElementById("Gym");
var home = document.getElementById("Home");
var upper = document.getElementById("Upper");
var lower = document.getElementById("Lower");
var cardio = document.getElementById("Cardio");
document.addEventListener("click", function (event) {
if (gym.contains(event.target)) {
ReactDOM.render(<GridGym />, document.getElementById("root"));
} else if (home.contains(event.target)) {
ReactDOM.render(<GridHome />, document.getElementById("root"));
} else if (upper.contains(event.target)) {
ReactDOM.render(<GridUpper />, document.getElementById("root"));
} else if (lower.contains(event.target)) {
ReactDOM.render(<GridLower />, document.getElementById("root"));
} else if (cardio.contains(event.target)) {
ReactDOM.render(<GridCardio />, document.getElementById("root"));
} else {
ReactDOM.render(<Grid />, document.getElementById("root"));
}
});
So far, I tried to paste the script inside the ExercisesLauncher component, as well as importing the necessary components, but the corresponding path just loads a white screen.
Instead of using unnecesarry components, I simply used the jsx code inside the App2 component that is used directly in my index file. I came up with a script that rerenders my grid component upon function call, which is triggered via click. I simply used hooks, useState, to do what I needed to do. Much easier than I thought!
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyGym} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyHome} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyUpper} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyLower} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;
This should do it:
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function Grid() {
const routes = [
{ path: "", name: "Gym", element: <GridGym /> },
{ path: "home", name: "Home", element: <GridHome /> },
{ path: "upper", name: "Upper", element: <GridUpper /> },
{ path: "lower", name: "Lower", element: <GridLower /> },
{ path: "cardio", name: "Cardio", element: <GridCardio /> }
];
return (
<>
<nav>
{routes.map((route) => (
<Link to={route.path} key={route.path}>
Grid{route.name}
</Link>
))}
</nav>
<Routes>
{routes.map((route) => (
<Route {...route} key={route.path} />
))}
</Routes>
</>
);
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="grid/">Grid</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="grid/*" element={<Grid />} />
</Routes>
</BrowserRouter>
);
}
I removed the irrelevant parts (e.g imports, etc...).
A full working example here: https://codesandbox.io/s/hungry-davinci-bgmswd?file=/src/App.js
Main takeaway: in React you don't check DOM. DOM renders according to model: you change the model and DOM reflects the change.
I want to display a bootstrap card multiple times dynamically in React using TypeScript. What I did was in the functional component I Wrapped the Return in a For Loop but that ain't working. If I'm doing it wrong, can you suggest other ways to loop over an entire functional component in react to show it multiple times?
Error in Index.tsx :
'Body' cannot be used as a JSX component.
Its return type 'Element | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'
Body.tsx
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
function Body() {
var arr=["one", "two", "three", "four"];
for (let index = 0; index < arr.length; index++) {
return (
<div className="container-fluid col-7 ">
<br/>
<div className="card shadow p-3 mb-5 bg-white rounded">
<div className="card-body">
<div className="row mb-1">
<div className=" text-styles">Q</div>
<div className="col-11 text-styles pr-n15">Why is good UI design so hard for some Developers? How to Improve this some content?</div>
</div>
<br/>
<div className="row mt-n4">
<div className="col-12">
<p><span className="text-style-grey ml-3">#Finance | Lodging & Food Services | may 15, 5.56 PM</span></p>
<ol className="steps">
<li className="step1 current"><span>Submitted</span></li>
<li className="step2"><span>.</span></li>
<li className="step3"><span>.</span></li>
<li className="step4"><span>.</span></li>
<li className="step4"><span>.</span></li>
</ol>
</div>
<hr/>
</div>
<div className="row mb-n4">
<div className="col-11"></div>
<div className="col-1"><i className="fa fa-ellipsis-h"></i></div>
</div>
</div>
</div>
</div>
);
}
}
export default Body;
Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Body from './Body';
import Header from './Header';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Sidebars from './Sidebars';
ReactDOM.render(
<React.StrictMode>
<Header />
<Body />
{/* <Sidebars /> */}
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Use map function instead of for loop
return (
<> {["one", "two", "three", "four"].map((item,i)=>
<div className="container-fluid col-7" key={i}>
{item}
<br/>
<div className="card shadow p-3 mb-5 bg-white rounded">
<div className="card-body">
<div className="row mb-1">
<div className=" text-styles">Q</div>
<div className="col-11 text-styles pr-n15">
Why is good UI design so hard for some Developers?
How to Improve this some content?</div>
</div>
<br/>
<div className="row mt-n4">
<div className="col-12">
<p><span className="text-style-grey ml-3">
#Finance | Lodging & Food Services |
may 15, 5.56 PM</span></p>
<ol className="steps">
<li className="step1 current"><span>Submitted</span></li>
<li className="step2"><span>.</span></li>
<li className="step3"><span>.</span></li>
<li className="step4"><span>.</span></li>
<li className="step4"><span>.</span></li>
</ol>
</div>
<hr/>
</div>
<div className="row mb-n4">
<div className="col-11"></div>
<div className="col-1"><i className="fa fa-ellipsis-h"></i></div>
</div>
</div>
</div>
</div>
)}
</>
);
I created an array in which I pushed the HTML code n Number of times and then displayed the row in the return function
Body.tsx
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
function Body() {
var rows = [];
for (var i = 0; i < 3; i++) {
rows.push(<div className="container-fluid col-7 mt-2 ">
<div className="card shadow p-3 mb-5 bg-white rounded">
<div className="card-body">
<div className="row mb-1">
<div className=" text-styles">Q</div>
<div className="col-11 text-styles pr-n15">Why is good UI design so hard for some Developers? How to Improve this some content?</div>
</div>
<br/>
<div className="row mt-n4">
<div className="col-12">
<p><span className="text-style-grey ml-3">#Finance | Lodging & Food Services | may 15, 5.56 PM</span></p>
<ol className="steps">
<li className="step1 current"><span>Submitted</span></li>
<li className="step2"><span>.</span></li>
<li className="step3"><span>.</span></li>
<li className="step4"><span>.</span></li>
<li className="step4"><span>.</span></li>
</ol>
</div>
<hr/>
</div>
<div className="row mb-n4">
<div className="col-11"></div>
<div className="col-1"><i className="fa fa-ellipsis-h"></i></div>
</div>
</div>
</div>
</div> );
}
return (
<div>{rows}</div>
);
}
export default Body;
I'm new to react and I'm trying to make my component load an image.
I have the following structure:
src/components/menu/myFile.js
src/images/logo.png
Here is myFile.js where I try to load the logo.png
const myFile = (props) => (
<Aux>
<header class="header_main">
<section class="container">
<section class="row">
<section class="col-xs-12 col-sm-6 col-md-6">
<figure class="logo"><img src="../../images/logo.png" alt=""/></figure>
</section>
<section class="col-xs-12 col-sm-6 col-md-6">
<ul class="nav_main pull-right">
<li>Help</li>
<li>About</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</section>
</section>
</section>
</header>
</Aux>
);
It is not loading the logo.png and when I check it in the browser using firebug, it says "Could not load the image"
import logo from "../../images/logo.png"
Inside image
<img src={logo} />
this will work
First Import the image like:
import logo from '../../images/logo.png';
then plug it in like :
<img src={logo} />
Hello I am making a React App and am not getting my content displaying within certain sections for localhost:3000. I believe it has to do with folders like CSS/JSS/Images being in the Public folder and not rendering properly to the SRC folder.
Even possibly when parts of code are within a . But I am struggling to find the reason for this.
My classes were all changed to 'className', but still same issue
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return (
<div className="App">
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<nav className="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target" id="ftco-navbar">
<div className="container">
<a className="navbar-brand" href="index.html">Digi<span>Lab</span></a>
<button className="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span className="oi oi-menu"></span> Menu
</button>
<div className="collapse navbar-collapse" id="ftco-nav">
<ul className="navbar-nav nav ml-auto">
<li className="nav-item"><span>Home</span></li>
<li className="nav-item"><span>Services</span></li>
<li className="nav-item"><span>Projects</span></li>
<li className="nav-item"><span>About</span></li>
<li className="nav-item"><span>Testimony</span></li>
<li className="nav-item"><span>Blog</span></li>
<li className="nav-item"><span>Contact</span></li>
</ul>
</div>
</div>
</nav>
<section id="home-section" className="hero">
<h3 className="vr">Welcome to DigiLab</h3>
<div className="home-slider js-fullheight owl-carousel">
<div className="slider-item js-fullheight">
<div className="overlay"></div>
<div className="container-fluid p-0">
<div className="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(./bg_1.jpg);">
<div className="overlay"></div>
</div>
<div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<div className="text">
<span className="subheading">Welcome to the digilab</span>
<h1 className="mb-4 mt-3">Small Details Make A Big <span>Impression</span></h1>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>
<p>Get in touch</p>
</div>
</div>
</div>
</div>
</div>
<div className="slider-item js-fullheight">
<div className="overlay"></div>
<div className="container-fluid p-0">
<div className="row d-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(images/bg_2.jpg);">
<div className="overlay"></div>
</div>
<div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<div className="text">
<span className="subheading">Welcome to the digilab</span>
<h1 className="mb-4 mt-3"><span>Strategic</span> Design And <span>Technology</span> Agency</h1>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>
<p>Get in touch</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
}
This is what I am aiming to achieve:
enter image description here
And this is what I am getting in return:
enter image description here