├── .gitattributes ├── assets └── home1.png ├── public ├── assets │ ├── home1.png │ ├── brand │ │ ├── logo.png │ │ ├── complete.webp │ │ └── underline.svg │ ├── images │ │ └── hero.jpeg │ └── icons │ │ └── hamburger.svg └── vite.svg ├── vite.config.js ├── src ├── App.scss ├── App.jsx ├── main.jsx ├── components │ ├── Hero │ │ ├── Hero.jsx │ │ └── Hero.scss │ └── Header │ │ ├── Header.scss │ │ └── Header.jsx ├── provider │ └── Provider.jsx ├── index.scss └── assets │ └── react.svg ├── package.json ├── index.html ├── .gitignore └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /assets/home1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardofierropro/Avatar-the-way-of-water/HEAD/assets/home1.png -------------------------------------------------------------------------------- /public/assets/home1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardofierropro/Avatar-the-way-of-water/HEAD/public/assets/home1.png -------------------------------------------------------------------------------- /public/assets/brand/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardofierropro/Avatar-the-way-of-water/HEAD/public/assets/brand/logo.png -------------------------------------------------------------------------------- /public/assets/images/hero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardofierropro/Avatar-the-way-of-water/HEAD/public/assets/images/hero.jpeg -------------------------------------------------------------------------------- /public/assets/brand/complete.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardofierropro/Avatar-the-way-of-water/HEAD/public/assets/brand/complete.webp -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | .Main{ 2 | padding: 4.5rem 0 0; 3 | 4 | @media screen and (max-width:75em){ 5 | padding: 9rem 0 0; 6 | } 7 | @media screen and (max-width:49em){ 8 | padding: 4.5rem 0 0; 9 | } 10 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.scss' 2 | import { Header } from './components/Header/Header' 3 | import { Hero } from './components/Hero/Hero' 4 | 5 | const App = () => { 6 | 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 |
14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.scss' 5 | import { Provider } from './provider/Provider' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "avatar-the-way-of-water", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "uuid": "^9.0.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.24", 18 | "@types/react-dom": "^18.0.8", 19 | "@vitejs/plugin-react": "^2.2.0", 20 | "sass": "^1.56.1", 21 | "vite": "^3.2.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /public/assets/brand/underline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Avatar: The way of Water 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import { GlobalContext } from '../../provider/Provider' 3 | import './Hero.scss' 4 | 5 | export const Hero = () => { 6 | const { hero } = useContext(GlobalContext) 7 | const { buttons , claim } = hero 8 | 9 | return ( 10 |
11 |
12 |

13 | 14 |

15 |

{ claim }

16 | 24 |
25 |
26 | ) 27 | } 28 | 29 | const Boton = ({ title , href = "#" }) => { 30 | return ( 31 | { title } 32 | ) 33 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/provider/Provider.jsx: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid' 2 | import { createContext } from "react" 3 | 4 | const bbdd = { 5 | header : { 6 | 7 | menu : [ 8 | { id : uuidv4() , title : "Home" , href :"#"}, 9 | { id : uuidv4() , title : "Movies " , href :"#"}, 10 | { id : uuidv4() , title : "Games" , href :"#"}, 11 | { id : uuidv4() , title : "Experiences " , href :"#"}, 12 | { id : uuidv4() , title : "Experiences" , href :"#"}, 13 | { id : uuidv4() , title : "Community" , href :"#"}, 14 | { id : uuidv4() , title : "Publishing" , href :"#"}, 15 | { id : uuidv4() , title : "Partnerships" , href :"#"}, 16 | { id : uuidv4() , title : "Our Team" , href :"#"}, 17 | ] , 18 | rrss : [ 19 | { id : uuidv4() , title : 'Facebook' , href : '#' , icono : 'facebook'}, 20 | { id : uuidv4() , title : 'Twitter' , href : '#' , icono : 'twitter'}, 21 | { id : uuidv4() , title : 'Instagram' , href : '#' , icono : 'instagram'}, 22 | { id : uuidv4() , title : 'Youtube' , href : '#' , icono : 'youtube'}, 23 | ] 24 | }, 25 | hero : { 26 | h2 : 'Avatar the way of water', 27 | claim : 'Watch the brand-new trailer and experience Avatar: The Way of Water in 3D on December 16.' 28 | , 29 | buttons : [ 30 | { id : uuidv4() , title : 'Get tickets' , href : '#'}, 31 | { id : uuidv4() , title : 'Watch Trailer' , href : '#'}, 32 | ] 33 | } 34 | } 35 | 36 | export const GlobalContext = createContext() 37 | 38 | export const Provider = ({ children }) => { 39 | return( 40 | 41 | { children } 42 | 43 | ) 44 | } -------------------------------------------------------------------------------- /src/components/Hero/Hero.scss: -------------------------------------------------------------------------------- 1 | .Hero{ 2 | 3 | min-height: 40vw; 4 | background: url('assets/images/hero.jpeg') no-repeat center center / cover ; 5 | padding: 23vh 0 3vh; 6 | position: relative; 7 | 8 | display: flex; 9 | flex-flow: column nowrap; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | color:white; 14 | text-align: center; 15 | 16 | &::after{ 17 | content: ''; 18 | display: block; 19 | width: 100%; 20 | height: 80%; 21 | background: rgb(24,24,24); 22 | background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); 23 | position: absolute; 24 | bottom: 0; 25 | left:0; 26 | z-index: 1; 27 | } 28 | 29 | .Wrapper{ z-index: 2; } 30 | 31 | &-h2{ 32 | max-width: 25rem; 33 | margin: auto; 34 | } 35 | &-logo{} 36 | &-p{ 37 | width: 80%; 38 | margin: 1em auto 2em; 39 | line-height: 1.4em; 40 | } 41 | &-ul{ 42 | display: flex; 43 | flex-flow: row nowrap; 44 | justify-content: center; 45 | align-items: center; 46 | gap: 2em; 47 | 48 | @media screen and (max-width:49em){ 49 | flex-direction: column; 50 | } 51 | } 52 | &-li{ 53 | 54 | } 55 | 56 | &-btn{ 57 | background-color: rgba(36,59,83,0.8); 58 | border:2px solid #38E1F4; 59 | color:#38E1F4; 60 | padding: .6em 3.2em; 61 | text-transform: uppercase; 62 | font-weight: 800; 63 | border-radius: 1.5em 0 1.5em 0; 64 | font-family: 'Montserrat', sans-serif; 65 | transition: all .5s ease; 66 | 67 | &:hover{ 68 | border-color: white; 69 | background-color: white; 70 | color:black; 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | :root{ 2 | --negro : #393939; 3 | 4 | --tipo-principal : Helvetica, Arial, sans-serif; 5 | --tipo-secundaria : Verdana; 6 | } 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | box-sizing: border-box; 12 | vertical-align: baseline; 13 | } 14 | 15 | img , picture , video , iframe , figure{ 16 | max-width: 100%; 17 | width: 100%; 18 | display: block; 19 | object-fit: cover; 20 | } 21 | a { 22 | display: block; 23 | text-decoration: none; 24 | color:inherit; 25 | font-size:inherit; 26 | } 27 | p a { 28 | display: inline; 29 | } 30 | 31 | li { 32 | list-style-type: none; 33 | } 34 | 35 | html { 36 | scroll-behavior: smooth; 37 | } 38 | 39 | h1 , h2 , h3 , h4 , h5 , h6 , p ,span , a , strong , blockquote , i , b , u , em { 40 | font-size: 1em; 41 | font-weight: inherit; 42 | font-style: inherit; 43 | text-decoration: none; 44 | color:inherit; 45 | } 46 | blockquote:before, blockquote:after, q:before, q:after { 47 | content: ''; 48 | content: none; 49 | } 50 | 51 | ::selection { 52 | background-color: var(--negro); 53 | color: var(--blanco); 54 | } 55 | 56 | form , input, textarea, select , button , label{ 57 | font-family: inherit; 58 | font-size: inherit; 59 | hyphens: auto; 60 | background-color: transparent; 61 | color:inherit; 62 | display: block; 63 | } 64 | 65 | table , tr , td { 66 | border-collapse: collapse; 67 | border-spacing: 0; 68 | } 69 | 70 | svg{ 71 | width: 100%; 72 | display: block; 73 | fill: currentColor; 74 | } 75 | body { 76 | min-height : 100vh; 77 | font-size : 100%; 78 | font-family : var(--tipo-principal); 79 | color : var(--negro); 80 | font-smooth: always; 81 | -webkit-font-smoothing: antialiased; 82 | -moz-osx-font-smoothing: grayscale; 83 | } 84 | 85 | .Wrapper{ 86 | width: 94%; 87 | max-width: 100rem; 88 | margin: auto; 89 | } -------------------------------------------------------------------------------- /src/components/Header/Header.scss: -------------------------------------------------------------------------------- 1 | .Header{ 2 | width: 100%; 3 | padding: .8em 0; 4 | color:#015ca1; 5 | background-color: white; 6 | box-shadow: 0 0 1em rgba(0,0,0,0.2); 7 | position: fixed; 8 | top: 0; 9 | z-index: 2; 10 | 11 | .Wrapper{ 12 | display: flex; 13 | flex-flow: row wrap; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | &-h1{ 18 | max-width: 10.3em; 19 | } 20 | &-logo{} 21 | &-img{} 22 | 23 | &-nav{ 24 | @media screen and (max-width:75em){ 25 | order: 2; 26 | width: 100%; 27 | border-top: 1px solid #015ca1; 28 | margin: 1em 0 0; 29 | padding: 1em 0; 30 | } 31 | @media screen and (max-width:49em){ 32 | display: none; 33 | } 34 | } 35 | &-ul{ 36 | display: flex; 37 | flex-flow: row nowrap; 38 | justify-content: center; 39 | align-items: center; 40 | gap:1em; 41 | } 42 | &-li{} 43 | &-a{ 44 | position: relative; 45 | &.isActive{ 46 | font-weight: 600; 47 | &::before{ 48 | content: ''; 49 | display: block; 50 | position: absolute; 51 | width: 100%; 52 | height: 3px; 53 | background: url('assets/brand/underline.svg') no-repeat center center / auto ; 54 | bottom: -0.3125rem; 55 | left: 0; 56 | transition: transform .4s ease; 57 | transform: scaleX(1); 58 | } 59 | &:hover::before{ 60 | transform: scaleX(1.4); 61 | } 62 | } 63 | } 64 | &-rrss{ 65 | display: flex; 66 | flex-flow: row nowrap; 67 | justify-content: center; 68 | align-items: center; 69 | gap:1em; 70 | @media screen and (max-width:75em){ 71 | order: 1; 72 | } 73 | } 74 | &-li{} 75 | &-rs{ 76 | padding: .4375em; 77 | border-radius: 50%; 78 | background-color: #015ca1; 79 | color:white; 80 | } 81 | &-social{ 82 | width: 1.2em; 83 | height: 1.2em; 84 | } 85 | &-btn{ 86 | display: none; 87 | } 88 | &-svg{} 89 | } 90 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Serverless directories 108 | .serverless/ 109 | 110 | # FuseBox cache 111 | .fusebox/ 112 | 113 | # DynamoDB Local files 114 | .dynamodb/ 115 | 116 | # TernJS port file 117 | .tern-port 118 | 119 | # Stores VSCode versions used for testing VSCode extensions 120 | .vscode-test 121 | 122 | # yarn v2 123 | .yarn/cache 124 | .yarn/unplugged 125 | .yarn/build-state.yml 126 | .yarn/install-state.gz 127 | .pnp.* 128 | -------------------------------------------------------------------------------- /public/assets/icons/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4050FBD1-D616-4B4F-BAAE-107F33215314@2x 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import { GlobalContext } from './../../provider/Provider' 3 | import './Header.scss' 4 | 5 | export const Header = () => { 6 | return( 7 |
8 |
9 | 10 | 11 |
14 |
15 | ) 16 | } 17 | 18 | const Logo = () => { 19 | return ( 20 |

21 | 22 | Avatar 23 | 24 |

25 | ) 26 | } 27 | const Nav = () => { 28 | 29 | const { header } = useContext(GlobalContext) 30 | const { menu } = header 31 | 32 | return ( 33 | 49 | ) 50 | } 51 | const Rrss = () => { 52 | const { header } = useContext(GlobalContext) 53 | const { rrss } = header 54 | return ( 55 | 64 | ) 65 | } 66 | const Hamburger = () => { 67 | return ( 68 | 71 | ) 72 | } 73 | const Icono = ({ nombre , clase = '' }) => { 74 | return ( 75 | <> 76 | { nombre === 'facebook' && } 77 | { nombre === 'twitter' && } 78 | { nombre === 'instagram' && } 79 | { nombre === 'youtube' && } 80 | 81 | 82 | ) 83 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Imagen del proyecto](https://github.com/eduardofierropro/avatar-the-way-of-water/blob/main/public/assets/home1.png) 2 | 3 | # Copycat: Avatar The way of water (Proceso) 4 | 5 | Este es el copycat de la web de Avatar The way of water en Youtube. 6 | 7 | [![Original website](https://img.shields.io/static/v1?label=&message=Original%20Site&color=4d94b3&style=for-the-badge)](https://www.avatar.com) 8 | [![Github Repository](https://img.shields.io/static/v1?label=&message=Github%20Repository&color=000000&style=for-the-badge&logo=github&logoColor=white)](https://github.com/eduardofierropro/avatar-the-way-of-water) 9 | [![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://www.youtube.com/watch?v=NXNGW6AAyP4) 10 | 11 | ## Tecnologías usadas 12 | 13 | ![ViteJS](https://img.shields.io/static/v1?label=&message=ViteJS&color=purple&logo=vite&logoColor=white&style=for-the-badge) 14 | ![SASS](https://img.shields.io/static/v1?label=&message=SASS&color=CC6699&logo=sass&logoColor=white&style=for-the-badge) 15 | ![SUIT Methodology](https://img.shields.io/static/v1?label=&message=suitcss&color=lightblue&logo=suit&logoColor=white&style=for-the-badge) 16 | ![ReactJS](https://img.shields.io/static/v1?label=&message=reactjs&color=17A1E6&logo=react&logoColor=white&style=for-the-badge) 17 | 18 | > Aclaraciones: 19 | > 20 | > No ha sido probado para tener soporte crossbrowsing 21 | > 22 | > El diseño de la web original puede variar 23 | > 24 | > Ha sido programado con fines de entretenimiento 25 | > 26 | > No lo uses en tu propio portfolio sino como referencia o práctica 27 | 28 | ## 🔴 Vídeos y repositorios de otras programaciones 29 | 30 | | Nombre | Youtube | Github | Github Pages | 31 | |--|--|--|--| 32 | |Playlist de todas las webs |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20playlist&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://www.youtube.com/playlist?list=PLJpymL0goBgETNW1I1rmuTUl-yoaRDUe5)|-|-| 33 | |Avatar 2022 *(Proceso)* |-|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Avatar-the-way-of-water/)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/Avatar-the-way-of-water/)| 34 | |The Game Awards 2022 *(Proceso)* |-|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/the-game-awards-2022/)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/the-game-awards-2022/)| 35 | |Forbes para Jordi Wild, Nate Gentile y Oscar Dorta |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/RbrVM1acWx8)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Forbes-con-Jordi-Wild--Nate-Gentile-y-Oscar-Dorta/)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://forbes-eduardofierropro.netlify.app/)| 36 | |God of war: Ragnarok |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://www.youtube.com/watch?v=YV8PON9MVl8)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/God-of-war-ragnarok)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/God-of-war-ragnarok/)| 37 | |The Crown of Wu |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://www.youtube.com/watch?v=zR3B_5uduec)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/The-Crown-Wu)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/The-Crown-Wu/)| 38 | |MadCool 2022 |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/mozRjGUSOm8)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Madcool-2022)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/Madcool-2022/)| 39 | |Tinder |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/L6u094Hrzyo)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Tinder)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/Tinder/)| 40 | |Google Stadia |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/LtyWVeFE4uM)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Google-Stadia)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/Google-Stadia/)| 41 | |DC Shoes USA |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/nUu--X0mmlo)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/DC-Shoes-USA)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/DC-Shoes-USA/)| 42 | |Netflix |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/WCUASu4V258)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Netflix-desde-cero)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Netflix-desde-cero)| 43 | |Portfolio de Timmy |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/XAwXz2w3vlg)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Portfolio-desde-cero)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/Portfolio-desde-cero/)| 44 | |Yodagram |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtu.be/JWV2rgTnbFQ)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/Yodagram)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/Yodagram/)| 45 | |TwitterRap |[![Youtube](https://img.shields.io/static/v1?label=&message=ver%20en%20youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://www.youtube.com/watch?v=NhSlsFV86Z8)|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/TwitterRap)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/TwitterRap/)| 46 | |RockaCo |-|[![github](https://img.shields.io/static/v1?label=&message=ver%20repo&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro/rockaco)|[![github](https://img.shields.io/static/v1?label=&message=ver%20pages&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://eduardofierropro.github.io/rockaco/)| 47 | 48 | 49 | 50 | ## 👨🏻‍🏫 Eduardo Fierro Pro 51 | 52 | ¡Qué pasa cruck! Soy profesor de programación tanto en escuelas como en Bootcamps y en mis tiempos libres programo por Twitch y en Youtube. 53 | 54 | [![Youtube](https://img.shields.io/static/v1?label=&message=youtube&color=FF0000&logo=youtube&logoColor=white&style=for-the-badge)](https://youtube.com/EduardoFierroPro?sub_confirmation=1) 55 | [![twitch](https://img.shields.io/static/v1?label=&message=twitch&color=6441a5&logo=twitch&logoColor=white&style=for-the-badge)](https://twitch.tv/eduardofierropro) 56 | [![tiktok](https://img.shields.io/static/v1?label=&message=tiktok&color=ff0050&logo=tiktok&logoColor=white&style=for-the-badge)](https://www.tiktok.com/@eduardofierro.pro?) 57 | [![instagram](https://img.shields.io/static/v1?label=&message=instagram&color=5B51D8&logo=instagram&logoColor=white&style=for-the-badge)](https://instagram.com/eduardofierro.pro) 58 | [![linkedin](https://img.shields.io/static/v1?label=&message=linkedin&color=0e76a8&logo=linkedin&logoColor=white&style=for-the-badge)](https://www.linkedin.com/in/eduardofierropro) 59 | [![discord](https://img.shields.io/static/v1?label=&message=discord&color=7289da&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/t4Txush) 60 | [![twitter](https://img.shields.io/static/v1?label=&message=twitter&color=1DA1F2&logo=twitter&logoColor=white&style=for-the-badge)](https://twitter.com/edfierropro) 61 | [![github](https://img.shields.io/static/v1?label=&message=github&color=171515&logo=github&logoColor=white&style=for-the-badge)](https://github.com/eduardofierropro) 62 | [![colaboración](https://img.shields.io/static/v1?label=&message=MIS%20CURSOS&color=blue&logo=teach&logoColor=white&style=for-the-badge)](http://colaboracion.eduardofierro.pro) 63 | 64 | 65 | ## 📄 Licencia 66 | 67 | MIT Public License v3.0 68 | No puede usarse comercialmente 69 | 70 | --------------------------------------------------------------------------------