xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />6
<meta name="viewport" content="width=device-width, initial-scale=1" />7
<meta name="theme-color" content="#000000" />8
<meta9
name="description"10
content="Web site created using create-react-app"11
/>12
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />13
<link14
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"15
rel="stylesheet"16
/>17
<link18
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"19
rel="stylesheet"20
/>21
22
<!--23
manifest.json provides metadata used when your web app is installed on a24
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/25
-->26
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />27
<!--28
Notice the use of %PUBLIC_URL% in the tags above.29
It will be replaced with the URL of the `public` folder during the build.30
Only files inside the `public` folder can be referenced from the HTML.31
32
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will33
work correctly both with client-side routing and a non-root public URL.34
Learn how to configure a non-root public URL by running `npm run build`.35
-->36
<title>MDBReact5 Template App</title>37
</head>38
<body>39
<noscript>You need to enable JavaScript to run this app.</noscript>40
<div id="root"></div>41
<!--42
This HTML file is a template.43
If you open it directly in the browser, you will see an empty page.44
45
You can add webfonts, meta tags, or analytics to this file.46
The build step will place the bundled scripts into the <body> tag.47
48
To begin the development, run `npm start` or `yarn start`.49
To create a production bundle, use `npm run build` or `yarn build`.50
-->51
</body>52
</html>xxxxxxxxxx1
body {2
margin: 0;3
font-family: Roboto, Helvetica, Arial, sans-serif;4
-webkit-font-smoothing: antialiased;5
-moz-osx-font-smoothing: grayscale;6
}7
8
code {9
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',10
monospace;11
}12
13
/* Responsive header styling */14
15
/* Color of the links BEFORE scroll */16
.navbar-scroll .nav-item .nav-link,17
.navbar-scroll .navbar-toggler .fas {18
color: rgb(37, 175, 255);19
}20
21
/* Color of the links AFTER scroll */22
.navbar-scrolled .nav-item .nav-link,23
.navbar-scrolled .navbar-toggler .fas {24
color: #4f4f4f;25
}26
27
/* Color of the navbar AFTER scroll */28
.navbar-scrolled {29
background-color: #fff;30
}31
32
/* An optional height of the navbar AFTER scroll */33
.fixed-top.navbar.navbar-scroll.navbar-scrolled {34
padding-top: 10px;35
padding-bottom: 10px;36
}37
38
/* Dropdown on main navbar */39
.mainDropdown {40
z-index: 1030 !important;41
border-radius: 0 !important;42
}43
44
.dropdown-item {45
border-radius: 0 !important;46
}xxxxxxxxxx1
import React from 'react';2
import { createRoot } from 'react-dom/client';3
import './index.css';4
import 'mdb-react-ui-kit/dist/css/mdb.min.css';5
import App from './App';6
7
const container = document.getElementById("root");8
const root = createRoot(container);9
10
root.render(11
<React.StrictMode>12
<App />13
</React.StrictMode>14
);15
16
17
18
19
20
21
22
23
import React from 'react';24
import { MDBContainer } from 'mdb-react-ui-kit';25
import Header from './components/Header'26
27
function App() {28
return (29
<Header />30
);31
}32
33
export default App;34
35
36
37
38
39
40
import React, { useState } from 'react';41
import {42
MDBAnimatedNavbar,43
MDBContainer,44
MDBNavbarToggler,45
MDBIcon,46
MDBNavbarNav,47
MDBNavbarLink,48
MDBNavbarItem,49
MDBNavbarBrand,50
MDBDropdown,51
MDBDropdownToggle,52
MDBDropdownMenu,53
MDBDropdownItem,54
MDBDropdownLink,55
} from 'mdb-react-ui-kit';56
57
export default function Header() {58
const [activeLink, setActiveLink] = useState('');59
60
const handleActive = (e) => {61
setActiveLink(e.target.name);62
};63
64
return (65
<>66
<header>67
<MDBAnimatedNavbar expand="lg" fixed="top">68
<MDBContainer fluid>69
<MDBNavbarToggler70
aria-controls="mainNavbar"71
aria-expanded="false"72
aria-label="Toggle navigation"73
>74
<MDBIcon fas icon="bars" />75
</MDBNavbarToggler>76
<div className="collapse navbar-collapse" id="mainNavbar">77
<MDBNavbarBrand>78
<img79
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"80
height="30"81
alt=""82
loading="lazy"83
/>84
</MDBNavbarBrand>85
<MDBNavbarNav right fullWidth={false} className="mb-2 mb-lg-0">86
<MDBNavbarItem>87
<MDBNavbarLink88
name="home"89
active={activeLink === 'home'}90
onClick={handleActive}91
>92
Home93
</MDBNavbarLink>94
</MDBNavbarItem>95
96
<MDBNavbarItem>97
<MDBDropdown>98
<MDBDropdownToggle tag="a" className="nav-link">99
Meal Delivery Services100
</MDBDropdownToggle>101
<MDBDropdownMenu className="mainDropdown" dark>102
<MDBDropdownItem>103
<MDBDropdownLink>Item</MDBDropdownLink>104
</MDBDropdownItem>105
<MDBDropdownItem>106
<MDBDropdownLink>Item</MDBDropdownLink>107
</MDBDropdownItem>108
<MDBDropdownItem>109
<MDBDropdownLink>Item</MDBDropdownLink>110
</MDBDropdownItem>111
</MDBDropdownMenu>112
</MDBDropdown>113
</MDBNavbarItem>114
115
<MDBNavbarItem>116
<MDBNavbarLink117
name="reviews"118
active={activeLink === 'reviews'}119
onClick={handleActive}120
>121
Reviews122
</MDBNavbarLink>123
</MDBNavbarItem>124
<MDBNavbarItem>125
<MDBNavbarLink126
name="contact"127
active={activeLink === 'contact'}128
onClick={handleActive}129
>130
Contact131
</MDBNavbarLink>132
</MDBNavbarItem>133
</MDBNavbarNav>134
135
<MDBNavbarNav fullWidth={false} className="flex-row ms-auto">136
<MDBNavbarItem>137
<MDBNavbarLink className="pe-2">138
<MDBIcon fab icon="youtube" />139
</MDBNavbarLink>140
</MDBNavbarItem>141
<MDBNavbarItem>142
<MDBNavbarLink className="nav-link px-2">143
<MDBIcon fab icon="facebook-f" />144
</MDBNavbarLink>145
</MDBNavbarItem>146
<MDBNavbarItem>147
<MDBNavbarLink className="nav-link px-2">148
<MDBIcon fab icon="twitter" />149
</MDBNavbarLink>150
</MDBNavbarItem>151
<MDBNavbarItem>152
<MDBNavbarLink className="nav-link ps-2">153
<MDBIcon fab icon="github" />154
</MDBNavbarLink>155
</MDBNavbarItem>156
</MDBNavbarNav>157
</div>158
</MDBContainer>159
</MDBAnimatedNavbar>160
161
<div162
id="intro"163
className="bg-image"164
style={{165
backgroundImage:166
'url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp)',167
height: '100vh',168
}}169
>170
<div171
className="mask text-white"172
style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}173
>174
<div className="container d-flex align-items-center text-center h-100">175
<div>176
<h1 className="mb-5">Some title here</h1>177
<p>178
Lorem ipsum dolor sit, amet consectetur adipisicing elit.179
Nobis quam minima perspiciatis eos tenetur. Praesentium180
dolores at quos aperiam sed, sint provident consectetur181
incidunt, nostrum porro earum commodi, ex architecto.182
</p>183
</div>184
</div>185
</div>186
</div>187
</header>188
189
<div className="container my-5">190
<p>191
{' '}192
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam193
minima perspiciatis eos tenetur. Praesentium dolores at quos aperiam194
sed, sint provident consectetur incidunt, nostrum porro earum commodi,195
ex architecto.196
</p>197
</div>198
</>199
);200
} Console errors: 0