Skip to content

Commit 7078890

Browse files
ibrahimhc19ibrahimhc19
committed
Comenzando NavBar hecha en React.
1 parent 2c0bf58 commit 7078890

9 files changed

Lines changed: 187 additions & 0 deletions

File tree

‎01-NavBar - React/apple-icon-60x60.png‎

6.9 KB
Loading

‎01-NavBar - React/ms-icon-32x32.png‎

2.74 KB
Loading

‎01-NavBar - React/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "react",
3+
"version": "1.0.0",
4+
"description": "React example starter project",
5+
"keywords": [
6+
"react",
7+
"starter"
8+
],
9+
"main": "src/index.js",
10+
"dependencies": {
11+
"loader-utils": "3.2.1",
12+
"react": "18.2.0",
13+
"react-dom": "18.2.0",
14+
"react-scripts": "5.0.1"
15+
},
16+
"devDependencies": {
17+
"@babel/runtime": "7.13.8",
18+
"typescript": "4.1.3"
19+
},
20+
"scripts": {
21+
"start": "react-scripts start",
22+
"build": "react-scripts build",
23+
"test": "react-scripts test --env=jsdom",
24+
"eject": "react-scripts eject"
25+
},
26+
"browserslist": [
27+
">0.2%",
28+
"not dead",
29+
"not ie <= 11",
30+
"not op_mini all"
31+
]
32+
}

‎01-NavBar - React/public/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
11+
manifest.json provides metadata used when your web app is added to the
12+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13+
-->
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
25+
<title>Nav Bar</title>
26+
</head>
27+
28+
<body>
29+
<noscript>
30+
You need to enable JavaScript to run this app.
31+
</noscript>
32+
<div id="root"></div>
33+
<!--
34+
This HTML file is a template.
35+
If you open it directly in the browser, you will see an empty page.
36+
37+
You can add webfonts, meta tags, or analytics to this file.
38+
The build step will place the bundled scripts into the <body> tag.
39+
40+
To begin the development, run `npm start` or `yarn start`.
41+
To create a production bundle, use `npm run build` or `yarn build`.
42+
-->
43+
</body>
44+
</html>

‎01-NavBar - React/src/App.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import "./styles.css";
2+
import Navbar from "./components/Navbar";
3+
4+
export default function App() {
5+
return (
6+
<div className="App">
7+
<Navbar />
8+
</div>
9+
);
10+
}

‎01-NavBar - React/src/components/Navbar.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import "./NavbarStyles.css";
2+
function Navbar() {
3+
return (
4+
<>
5+
<nav>
6+
<a href="index.html">
7+
<h1>The Nav Bar</h1>
8+
</a>
9+
<div>
10+
<ul>
11+
<li>
12+
<a href="index.html">Home</a>
13+
</li>
14+
<li>
15+
<a href="index.html">About me</a>
16+
</li>
17+
<li>
18+
<a href="index.html">Contact</a>
19+
</li>
20+
<li>
21+
<a href="index.html">CV</a>
22+
</li>
23+
</ul>
24+
</div>
25+
</nav>
26+
</>
27+
);
28+
}
29+
30+
export default Navbar;

‎01-NavBar - React/src/components/NavbarStyles.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
nav {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-around;
5+
background: linear-gradient(217deg, #ee6fca, rgba(255, 0, 0, 0) 70.71%),
6+
linear-gradient(127deg, #67bad4, rgba(0, 255, 0, 0) 70.71%),
7+
linear-gradient(336deg, #24b6e7, rgba(0, 0, 255, 0) 70.71%);
8+
min-height: 5rem;
9+
box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1);
10+
width: 100%;
11+
}
12+
13+
ul {
14+
display: flex;
15+
user-select: none;
16+
}
17+
18+
li a {
19+
margin: 0;
20+
cursor: pointer;
21+
font-size: 1.2rem;
22+
transition: all 1s;
23+
border-radius: 5px;
24+
letter-spacing: 2px;
25+
font-weight: normal;
26+
padding: 0.4rem 0.8rem;
27+
text-transform: uppercase;
28+
}
29+
li a:hover {
30+
background: #ffc3fc48;
31+
}
32+
33+
h1 {
34+
font-size: 1.5rem;
35+
user-select: none;
36+
font-weight: normal;
37+
letter-spacing: 1px;
38+
text-transform: uppercase;
39+
}

‎01-NavBar - React/src/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
4+
import App from "./App";
5+
6+
const rootElement = document.getElementById("root");
7+
const root = createRoot(rootElement);
8+
9+
root.render(
10+
<StrictMode>
11+
<App />
12+
</StrictMode>
13+
);

‎01-NavBar - React/src/styles.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300&display=swap");
2+
3+
.App {
4+
font-family: "Ubuntu", sans-serif;
5+
}
6+
* {
7+
margin: 0;
8+
padding: 0;
9+
color: #f9f5f6;
10+
list-style: none;
11+
text-decoration: none;
12+
box-sizing: border-box;
13+
-webkit-tap-highlight-color: transparent;
14+
}
15+
16+
body,
17+
html {
18+
background-color: #dbcce9;
19+
}

0 commit comments

Comments
 (0)