diff --git a/prepros.config b/prepros.config
new file mode 100644
index 0000000..c44f768
--- /dev/null
+++ b/prepros.config
@@ -0,0 +1,914 @@
+{
+  "version": "7",
+  "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
+  "config": {
+    "proxy": {
+      "enable": false,
+      "target": "",
+      "useLocalAssets": false
+    },
+    "reload": {
+      "enable": true,
+      "delay": 0,
+      "animate": true,
+      "afterUpload": false
+    },
+    "sync": {
+      "enable": false,
+      "mouse": true,
+      "keyboard": true,
+      "form": true,
+      "scroll": true
+    },
+    "watcher": {
+      "enable": true,
+      "maxFiles": 2000,
+      "usePolling": false,
+      "pollingInterval": 500,
+      "extensions": [
+        ".html",
+        ".htm",
+        ".php"
+      ],
+      "ignore": {
+        "patterns": [
+          ".*",
+          "wp-admin",
+          "wp-includes",
+          "node_modules",
+          "Prepros Export",
+          "bower_components"
+        ],
+        "exceptions": []
+      }
+    },
+    "exporter": {
+      "ignore": {
+        "patterns": [
+          ".*",
+          "desktop.ini",
+          "prepros.cfg",
+          "node_modules",
+          "Prepros Export",
+          "prepros.config",
+          "prepros-6.config",
+          "*-original.jpg",
+          "*-original.jpeg",
+          "*-original.png",
+          "*-original.svg",
+          "*.scss",
+          "*.sass",
+          "*.less",
+          "*.pug",
+          "*.jade",
+          "*.styl",
+          "*.haml",
+          "*.slim",
+          "*.coffee",
+          "*.kit",
+          "*.turf",
+          "*.ts"
+        ],
+        "exceptions": []
+      }
+    },
+    "uploader": {
+      "remotePath": "",
+      "timeout": 20000,
+      "autoUpload": false,
+      "reuseConnection": true,
+      "connectionType": "ftp",
+      "history": []
+    },
+    "packages": {
+      "createPackageLock": true
+    },
+    "images": {
+      "preserveOriginal": true
+    },
+    "tasks": {
+      "autoprefixer": {
+        "cascade": true,
+        "add": true,
+        "remove": true,
+        "supports": true,
+        "flexbox": true,
+        "grid": "autoplace",
+        "browsers": [
+          "> 2%",
+          "not dead"
+        ],
+        "sourceMap": false
+      },
+      "babel": {
+        "sourceMap": false,
+        "presets": {
+          "@babel/preset-env": {
+            "enable": true,
+            "options": {
+              "targets": [
+                "> 2%",
+                "not dead"
+              ],
+              "preserveImports": false,
+              "polyfills": false
+            }
+          },
+          "@babel/preset-react": true,
+          "@babel/preset-flow": false
+        },
+        "plugins": {
+          "@babel/plugin-proposal-class-properties": false,
+          "@babel/plugin-proposal-decorators": {
+            "enable": false,
+            "options": {
+              "decoratorsBeforeExport": true
+            }
+          },
+          "@babel/plugin-proposal-export-namespace-from": false,
+          "@babel/plugin-proposal-function-sent": false,
+          "@babel/plugin-proposal-nullish-coalescing-operator": false,
+          "@babel/plugin-proposal-numeric-separator": false,
+          "@babel/plugin-proposal-optional-chaining": false,
+          "@babel/plugin-proposal-private-methods": false,
+          "@babel/plugin-proposal-throw-expressions": false
+        },
+        "customPresets": [],
+        "customPlugins": []
+      },
+      "bundle-js": {
+        "sourceMap": false,
+        "exclude": [
+          "node_modules",
+          "bower_components"
+        ],
+        "devMode": true,
+        "globals": [],
+        "externals": [],
+        "babel": {
+          "enable": true,
+          "options": {
+            "sourceMap": false,
+            "presets": {
+              "@babel/preset-env": {
+                "enable": true,
+                "options": {
+                  "targets": [
+                    "> 2%",
+                    "not dead"
+                  ],
+                  "preserveImports": false,
+                  "polyfills": false
+                }
+              },
+              "@babel/preset-react": true,
+              "@babel/preset-flow": false
+            },
+            "plugins": {
+              "@babel/plugin-proposal-class-properties": false,
+              "@babel/plugin-proposal-decorators": {
+                "enable": false,
+                "options": {
+                  "decoratorsBeforeExport": true
+                }
+              },
+              "@babel/plugin-proposal-export-namespace-from": false,
+              "@babel/plugin-proposal-function-sent": false,
+              "@babel/plugin-proposal-nullish-coalescing-operator": false,
+              "@babel/plugin-proposal-numeric-separator": false,
+              "@babel/plugin-proposal-optional-chaining": false,
+              "@babel/plugin-proposal-private-methods": false,
+              "@babel/plugin-proposal-throw-expressions": false
+            },
+            "customPresets": [],
+            "customPlugins": []
+          }
+        },
+        "css": {
+          "enable": true
+        },
+        "fonts": {
+          "enable": true
+        }
+      },
+      "coffeescript": {
+        "header": false,
+        "bare": false,
+        "sourceMap": false
+      },
+      "command": {
+        "command": "",
+        "rootDir": ""
+      },
+      "concat-js": {
+        "sourceMap": false,
+        "rootDir": ""
+      },
+      "copy": {
+        "sourceMap": false
+      },
+      "dart-sass": {
+        "indentType": "space",
+        "indentWidth": 2,
+        "linefeed": "lf",
+        "sourceMap": false
+      },
+      "haml": {
+        "doubleQuoteAttributes": true
+      },
+      "jpg": {
+        "quality": 90
+      },
+      "less": {
+        "javascriptEnabled": false,
+        "strictImports": false,
+        "insecure": false,
+        "math": "always",
+        "strictUnits": false,
+        "dumpLineNumbers": false,
+        "sourceMap": false
+      },
+      "markdown": {
+        "githubFlavored": true,
+        "wrapWithHtml": false
+      },
+      "minify-css": {
+        "sourceMap": false
+      },
+      "minify-html": {
+        "caseSensitive": false,
+        "collapseBooleanAttributes": true,
+        "collapseInlineTagWhitespace": false,
+        "collapseWhitespace": true,
+        "conservativeCollapse": false,
+        "decodeEntities": false,
+        "html5": true,
+        "includeAutoGeneratedTags": true,
+        "keepClosingSlash": false,
+        "minifyCSS": true,
+        "minifyJS": true,
+        "preserveLineBreaks": false,
+        "preventAttributesEscaping": false,
+        "processConditionalComments": false,
+        "removeAttributeQuotes": false,
+        "removeComments": true,
+        "removeEmptyAttributes": false,
+        "removeEmptyElement": false,
+        "removeOptionalTags": false,
+        "removeRedundantAttributes": false,
+        "removeScriptTypeAttributes": false,
+        "removeStyleLinkTypeAttributes": false,
+        "removeTagWhitespace": false,
+        "sortAttributes": false,
+        "sortClassName": false,
+        "useShortDoctype": true
+      },
+      "minify-js": {
+        "parse": {
+          "bare_returns": false
+        },
+        "compress": {
+          "arrows": true,
+          "arguments": false,
+          "booleans": true,
+          "booleans_as_integers": false,
+          "collapse_vars": true,
+          "comparisons": true,
+          "computed_props": true,
+          "conditionals": true,
+          "dead_code": true,
+          "directives": true,
+          "drop_console": false,
+          "drop_debugger": true,
+          "evaluate": true,
+          "expression": false,
+          "global_defs": [],
+          "hoist_funs": false,
+          "hoist_props": true,
+          "hoist_vars": false,
+          "if_return": true,
+          "inline": 3,
+          "join_vars": true,
+          "keep_fargs": true,
+          "keep_infinity": false,
+          "loops": true,
+          "negate_iife": true,
+          "properties": true,
+          "pure_funcs": [],
+          "pure_getters": false,
+          "reduce_vars": true,
+          "sequences": true,
+          "side_effects": true,
+          "switches": true,
+          "top_retain": [],
+          "typeofs": true,
+          "unsafe": false,
+          "unsafe_arrows": false,
+          "unsafe_comps": false,
+          "unsafe_Function": false,
+          "unsafe_math": false,
+          "unsafe_proto": false,
+          "unsafe_regexp": false,
+          "unsafe_undefined": false,
+          "unused": true
+        },
+        "mangle": {
+          "eval": false,
+          "reserved": []
+        },
+        "output": {
+          "ascii_only": false,
+          "braces": false,
+          "comments": "none",
+          "inline_script": true,
+          "keep_numbers": false,
+          "keep_quoted_props": false,
+          "preamble": null,
+          "quote_keys": false,
+          "quote_style": 0,
+          "semicolons": true,
+          "shebang": true,
+          "webkit": false,
+          "wrap_iife": false,
+          "wrap_func_args": true
+        },
+        "sourceMap": false,
+        "toplevel": false,
+        "ie8": false,
+        "keep_classnames": false,
+        "keep_fnames": false,
+        "safari10": false
+      },
+      "node-sass": {
+        "indentType": "space",
+        "indentWidth": 2,
+        "linefeed": "lf",
+        "outputStyle": "expanded",
+        "precision": 10,
+        "sourceMap": false,
+        "sourceComments": false
+      },
+      "png": {
+        "quality": 90
+      },
+      "postcss-import": {
+        "ignoreKeywords": [],
+        "sourceMap": false
+      },
+      "postcss-preset-env": {
+        "stage": 2,
+        "browsers": [
+          "> 2%",
+          "not dead"
+        ],
+        "sourceMap": false
+      },
+      "pug": {
+        "pretty": true
+      },
+      "slim": {
+        "indent": "space",
+        "indentSize": 2,
+        "pretty": true
+      },
+      "stylus": {
+        "useNib": true,
+        "sourceMap": false,
+        "linenos": false
+      },
+      "svg": {
+        "cleanupAttrs": true,
+        "removeDoctype": true,
+        "removeXMLProcInst": true,
+        "removeComments": true,
+        "removeMetadata": true,
+        "removeTitle": true,
+        "removeDesc": true,
+        "removeUselessDefs": true,
+        "removeEditorsNSData": true,
+        "removeEmptyAttrs": true,
+        "removeHiddenElems": true,
+        "removeEmptyText": true,
+        "removeEmptyContainers": true,
+        "removeViewBox": false,
+        "cleanupEnableBackground": true,
+        "convertStyleToAttrs": true,
+        "convertColors": true,
+        "convertPathData": true,
+        "convertTransform": true,
+        "removeUnknownsAndDefaults": true,
+        "removeNonInheritableGroupAttrs": true,
+        "removeUselessStrokeAndFill": true,
+        "removeUnusedNS": true,
+        "cleanupIDs": true,
+        "cleanupNumericValues": true,
+        "moveElemsAttrsToGroup": true,
+        "moveGroupAttrsToElems": true,
+        "collapseGroups": true,
+        "removeRasterImages": false,
+        "mergePaths": true,
+        "convertShapeToPath": true,
+        "sortAttrs": true,
+        "removeDimensions": true
+      },
+      "turf": {
+        "rootDir": ""
+      },
+      "typescript": {
+        "allowJs": false,
+        "allowSyntheticDefaultImports": true,
+        "allowUmdGlobalAccess": false,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "alwaysStrict": false,
+        "charset": "utf8",
+        "checkJs": false,
+        "declaration": false,
+        "disableSizeLimit": false,
+        "downlevelIteration": false,
+        "emitBOM": false,
+        "emitDecoratorMetadata": false,
+        "experimentalDecorators": false,
+        "forceConsistentCasingInFileNames": false,
+        "importHelpers": false,
+        "jsx": "React",
+        "keyofStringsOnly": false,
+        "lib": [],
+        "maxNodeModuleJsDepth": 0,
+        "module": "ES2015",
+        "moduleResolution": "NodeJs",
+        "newLine": "LineFeed",
+        "noFallthroughCasesInSwitch": false,
+        "noImplicitAny": false,
+        "noImplicitReturns": false,
+        "noImplicitThis": false,
+        "noStrictGenericChecks": false,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noImplicitUseStrict": false,
+        "noLib": false,
+        "noResolve": false,
+        "preserveConstEnums": false,
+        "jsxFactory": "React.createElement",
+        "removeComments": false,
+        "skipLibCheck": false,
+        "sourceMap": false,
+        "strict": false,
+        "strictFunctionTypes": false,
+        "strictBindCallApply": false,
+        "strictNullChecks": false,
+        "strictPropertyInitialization": false,
+        "suppressExcessPropertyErrors": false,
+        "suppressImplicitAnyIndexErrors": false,
+        "target": "ES3",
+        "resolveJsonModule": false,
+        "esModuleInterop": false,
+        "useDefineForClassFields": false
+      }
+    },
+    "fileTypes": {
+      "sass": {
+        "extensions": [
+          ".scss",
+          ".sass"
+        ],
+        "autoCompile": true,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "dart-sass",
+            "enable": true
+          },
+          {
+            "task": "autoprefixer",
+            "enable": true
+          },
+          {
+            "task": "minify-css",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".css",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "scss",
+              "replaceWith": "css"
+            },
+            {
+              "segment": "sass",
+              "replaceWith": "css"
+            }
+          ]
+        }
+      },
+      "less": {
+        "extensions": [
+          ".less"
+        ],
+        "autoCompile": true,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "less",
+            "enable": true
+          },
+          {
+            "task": "autoprefixer",
+            "enable": true
+          },
+          {
+            "task": "minify-css",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".css",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "less",
+              "replaceWith": "css"
+            }
+          ]
+        }
+      },
+      "pug": {
+        "extensions": [
+          ".pug",
+          ".jade"
+        ],
+        "autoCompile": true,
+        "tasks": [
+          {
+            "task": "pug",
+            "enable": true
+          },
+          {
+            "task": "minify-html",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".html",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "pug",
+              "replaceWith": "html"
+            }
+          ]
+        }
+      },
+      "css": {
+        "extensions": [
+          ".css"
+        ],
+        "autoCompile": false,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "copy",
+            "enable": true
+          },
+          {
+            "task": "postcss-import",
+            "enable": false
+          },
+          {
+            "task": "postcss-preset-env",
+            "enable": false
+          },
+          {
+            "task": "autoprefixer",
+            "enable": true
+          },
+          {
+            "task": "minify-css",
+            "enable": true
+          }
+        ],
+        "output": {
+          "extension": ".css",
+          "type": "SOURCE_RELATIVE",
+          "relativePath": "",
+          "suffix": "-dist",
+          "alwaysSuffix": false
+        }
+      },
+      "javascript": {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ],
+        "autoCompile": false,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "copy",
+            "enable": true
+          },
+          {
+            "task": "concat-js",
+            "enable": false
+          },
+          {
+            "task": "babel",
+            "enable": false
+          },
+          {
+            "task": "bundle-js",
+            "enable": false
+          },
+          {
+            "task": "minify-js",
+            "enable": true
+          }
+        ],
+        "output": {
+          "extension": ".js",
+          "type": "SOURCE_RELATIVE",
+          "relativePath": "",
+          "suffix": "-dist",
+          "alwaysSuffix": false
+        }
+      },
+      "stylus": {
+        "extensions": [
+          ".styl"
+        ],
+        "autoCompile": true,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "stylus",
+            "enable": true
+          },
+          {
+            "task": "autoprefixer",
+            "enable": true
+          },
+          {
+            "task": "minify-css",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".css",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "stylus",
+              "replaceWith": "css"
+            },
+            {
+              "segment": "styl",
+              "replaceWith": "css"
+            }
+          ]
+        }
+      },
+      "markdown": {
+        "extensions": [
+          ".md",
+          ".markdown",
+          ".mkd"
+        ],
+        "autoCompile": false,
+        "tasks": [
+          {
+            "task": "markdown",
+            "enable": true
+          },
+          {
+            "task": "minify-html",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".html",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "markdown",
+              "replaceWith": "html"
+            }
+          ]
+        }
+      },
+      "haml": {
+        "extensions": [
+          ".haml"
+        ],
+        "autoCompile": true,
+        "tasks": [
+          {
+            "task": "haml",
+            "enable": true
+          },
+          {
+            "task": "minify-html",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".html",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "haml",
+              "replaceWith": "html"
+            }
+          ]
+        }
+      },
+      "slim": {
+        "extensions": [
+          ".slim"
+        ],
+        "autoCompile": true,
+        "tasks": [
+          {
+            "task": "slim",
+            "enable": true
+          },
+          {
+            "task": "minify-html",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".html",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "slim",
+              "replaceWith": "html"
+            }
+          ]
+        }
+      },
+      "coffeescript": {
+        "extensions": [
+          ".coffee"
+        ],
+        "autoCompile": true,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "coffeescript",
+            "enable": true
+          },
+          {
+            "task": "babel",
+            "enable": false
+          },
+          {
+            "task": "bundle-js",
+            "enable": false
+          },
+          {
+            "task": "minify-js",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".js",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "coffee-script",
+              "replaceWith": "js"
+            },
+            {
+              "segment": "coffeescript",
+              "replaceWith": "js"
+            },
+            {
+              "segment": "coffee",
+              "replaceWith": "js"
+            }
+          ]
+        }
+      },
+      "turf": {
+        "extensions": [
+          ".turf",
+          ".kit"
+        ],
+        "autoCompile": true,
+        "tasks": [
+          {
+            "task": "turf",
+            "enable": true
+          },
+          {
+            "task": "minify-html",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".html",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "turf",
+              "replaceWith": "html"
+            }
+          ]
+        }
+      },
+      "typescript": {
+        "extensions": [
+          ".ts",
+          ".tsx"
+        ],
+        "autoCompile": true,
+        "sourceMap": false,
+        "tasks": [
+          {
+            "task": "typescript",
+            "enable": true
+          },
+          {
+            "task": "babel",
+            "enable": false
+          },
+          {
+            "task": "bundle-js",
+            "enable": false
+          },
+          {
+            "task": "minify-js",
+            "enable": false
+          }
+        ],
+        "output": {
+          "extension": ".js",
+          "type": "REPLACE_SEGMENTS",
+          "segments": [
+            {
+              "segment": "typescript",
+              "replaceWith": "js"
+            },
+            {
+              "segment": "ts",
+              "replaceWith": "js"
+            }
+          ]
+        }
+      },
+      "jpg": {
+        "extensions": [
+          ".jpg",
+          ".jpeg"
+        ],
+        "tasks": [
+          {
+            "task": "jpg",
+            "enable": true
+          }
+        ],
+        "output": {
+          "extension": ".jpg",
+          "type": "SOURCE_RELATIVE",
+          "relativePath": ""
+        }
+      },
+      "png": {
+        "extensions": [
+          ".png"
+        ],
+        "tasks": [
+          {
+            "task": "png",
+            "enable": true
+          }
+        ],
+        "output": {
+          "extension": ".png",
+          "type": "SOURCE_RELATIVE",
+          "relativePath": ""
+        }
+      },
+      "svg": {
+        "extensions": [
+          ".svg"
+        ],
+        "tasks": [
+          {
+            "task": "svg",
+            "enable": true
+          }
+        ],
+        "output": {
+          "extension": ".svg",
+          "type": "SOURCE_RELATIVE",
+          "relativePath": ""
+        }
+      }
+    },
+    "files": []
+  }
+}
diff --git a/public/index.html b/public/index.html
index cc00314..d86b9c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,14 +4,111 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hola Stylus</title>
-  <link rel="stylesheet" href="main.css">
+  <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Open+Sans+Condensed:wght@700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
+  <title>Hola Dubai - Stylus</title>
+  <link rel="stylesheet" href="../src/csses/main.css">
 </head>
 
 <body>
-  <div>
+  <section class="hero--container">
+    <header class="header">
+
+      <p class="header--text">Let's go Dubai</p>
+
+      <nav class="header__navbar">
+        <ul class="navbar__list">
+          <li class="list--item">About Dubai</li>
+          <li class="list--item">Contact us</li>
+          <li class="list--item">Privacy</li>
+        </ul>
+      </nav>
+
+    </header>
+
+   <div class="title--container">
+    <h1 class="main__title animated pulse">Dubai</h1>
+   </div>
+<center>
+   <section class="main-input">
+    <div class="main-input-container">
+        <span class="search-icon">
+
+        </span>
+        <input  class="search--input" type="text" placeholder="Search more places...">
+        <a class="micro-icon" href=""></a>
+    </div>
+</section>
+</center>
+    
+  </section>
+
+  <!-- <div>
     <h1>¡Hola Stylus!</h1>
-  </div>
+  </div> -->
+  
+  <main class="main">
+    <section class="main--container">
+      <h2 class="subtitle">Enjoy the Magic City</h2>
+      
+      <p>Explore all that the most modern city in the world has to offer. Watch and live luxury at its best, visit the Burj Khalifa, marvel at the 7-star hotel and all the attractions Dubai has for you!</p>
+      <p>Dubai is the most populous city in the United Arab Emirates (UAE) and the capital of the Emirate of Dubai. Located in the eastern part of the Arabian Peninsula on the coast of the Persian Gulf, Dubai aims to be the business hub of Western Asia.</p>
+    </section>
+
+    <section class="images--container">
+      <figure class="item">
+        <img src="https://images.pexels.com/photos/618079/pexels-photo-618079.jpeg?cs=srgb&dl=pexels-aleksandar-pasaric-618079.jpg&fm=jpg" alt="Burj Khalifa">
+      </figure>
+      <figure class="item">
+        <img src="https://images.pexels.com/photos/70441/pexels-photo-70441.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Palacio arabe Dubai">
+      </figure>
+    </section>
+
+    <div class="button--container">
+      <button class="button">See more</button>
+    </div>
+    
+    <div class="map--container">
+      <h3 class="subtitle">About our Location</h3>
+
+      <section class="location">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.178510024316!2d55.2721877144844!3d25.197201837884776!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f43348a67e24b%3A0xff45e502e1ceb7e2!2sBurj%20Khalifa!5e0!3m2!1ses-419!2smx!4v1598156308299!5m2!1ses-419!2smx" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
+      </section>
+
+     <button class="button"><a href="login.html">Login</a></button>
+     <div class="facebook-container"><img src="http://logok.org/wp-content/uploads/2014/10/Facebook-logo-f.png" class="image" alt="Facebook icon">Login with Facebook</div>
+    </div>
+    
+
+  </main>
+
+  <footer class="footer">
+    <ul class="footer-left">
+      <li>
+          <a href="">Publicidad</a>
+      </li>
+      <li>
+          <a href="">Negocios</a>
+      </li>
+      <li>
+          <a href="">Acerca de</a></li>
+      <li>
+          <a href="">Cómo funciona la busqueda</a>
+      </li>
+  </ul>
+
+  <ul class="footer-right">
+      <li>
+          <a href="">Privacidad</a>
+      </li>
+      <li>
+          <a href="">Condiciones</a>
+      </li>
+      <li>
+          <a href="">Referencias</a>
+      </li>
+  </ul>
+</footer>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/login.html b/public/login.html
new file mode 100644
index 0000000..15092bf
--- /dev/null
+++ b/public/login.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../src/csses/main.css">
+    <title>Login - user</title>
+</head>
+<body>
+
+    <section class="register">
+
+        <div class="register__container">
+            <h2 class="register--title">Log into <br> your account</h2>
+            <form class="register__container--form">
+              <!--   <input class="register--input" type="text" name="name" placeholder="Your name"> -->
+                <input class="register--input" type="text" name="email" placeholder="Username/Email">
+                <input class="register--input" type="password" name="password" placeholder="Password">
+                <div class="register__container--remember-me">
+                    <label>
+                        <input type="checkbox" name="Rememberme" id="cbox1" value="checkbox">
+                        Remember me
+                        <a href="/">Forgot password?</a>
+                    </label>
+                </div>
+                <button class="register--button">Log in</button>
+                <div class="facebook-container facebook-container-login"><img src="http://logok.org/wp-content/uploads/2014/10/Facebook-logo-f.png" class="image" alt="Facebook icon">Login with Facebook</div>
+            </form>
+            <a class="login--button" href="iniciar-sesion.html">Sing up</a>
+        </div>
+        
+
+    </section>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/src/csses/main.css b/src/csses/main.css
new file mode 100644
index 0000000..e0d4e7c
--- /dev/null
+++ b/src/csses/main.css
@@ -0,0 +1,343 @@
+/* Animation */
+.animated {
+  animation-duration: 2.5s;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+}
+.pulse {
+  animation-name: pulse;
+  animation-duration: 2.5s;
+}
+body {
+  background-color: #a3a4ff;
+  margin: 0;
+  padding: 0;
+  font-family: 'Robot', sans-serif;
+  font-size: 16px;
+  color: #fff;
+}
+/* Hero section */
+.hero--container {
+  height: 550px;
+  width: 100vw;
+  background: url("https://images.pexels.com/photos/823696/pexels-photo-823696.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat center center fixed;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.header__navbar {
+  width: 50%;
+}
+.header--text {
+  font-size: 1.4rem;
+  font-weight: bold;
+  margin-left: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.15rem;
+}
+.navbar__list {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+}
+.navbar__list .list--item {
+  font-size: 1.4rem;
+  margin: 0 10px;
+}
+.title--container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.main__title {
+  justify-content: center;
+  align-self: center;
+  font-family: 'Open Sans Condensed', sans-serif;
+  font-size: 3.5em;
+  letter-spacing: 0.7em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.main-input-container {
+  width: 50%;
+  border-radius: 100px;
+  border: 2px solid #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  background-color: rgba(255,255,255,0.8);
+  margin-bottom: 28px;
+}
+.main-input input {
+  width: 500px;
+  height: 40px;
+  border: none;
+  outline: none;
+  text-align: center;
+  background-color: rgba(255,255,255,0.4);
+}
+__:hover {
+  box-shadow: 2px 4px 8px 0px 0;
+  border-color: rgba(223,225,229,0);
+}
+.main-input .search--input::placeholder {
+  color: #7d7c7c;
+  font-size: 1.15rem;
+}
+.search-icon {
+  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon_svg.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: 18px;
+  height: 18px;
+  margin-left: 10px;
+  padding-left: 10px;
+}
+.micro-icon {
+  background-image: url("https://image.flaticon.com/icons/svg/54/54541.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+  padding-left: 5px;
+  cursor: pointer;
+}
+/* Main section */
+.main {
+  font-size: 1.25rem;
+  border-radius: 15px;
+  border: 2px solid #fff;
+  padding: 45px;
+}
+.main--container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+p {
+  text-align: justify;
+}
+.images--container {
+  display: flex;
+  justify-content: center;
+}
+.images--container .item {
+  width: 350px;
+}
+.images--container .item img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.button--container {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+.button {
+  width: 15%;
+  height: 40px;
+  border-radius: 25px;
+  border: 2px solid #fff;
+  background-color: #51527f;
+  border: none;
+  color: #fff;
+  font-size: 1.1rem;
+  margin: 15px 0;
+  box-shadow: 2px 4px 8px 0px #3e3c3c;
+}
+.button:hover {
+  background-color: rgba(81,82,127,0.75);
+  cursor: pointer;
+}
+.button a {
+  color: #fff;
+  text-decoration: none;
+}
+.map--container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+.facebook-container {
+  width: 210px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: rgba(0,0,0,0.8);
+  padding: 5px;
+  margin: 15px;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 25px;
+  border: 2px solid #fff;
+  background-color: rgba(255,255,255,0.5);
+  box-shadow: 2px 4px 8px 0px #3e3c3c;
+}
+.facebook-container:hover {
+  background-color: rgba(255,255,255,0.25);
+  color: #fff;
+  cursor: pointer;
+}
+.facebook-container-login {
+  width: 235px;
+  height: 35px;
+}
+.image {
+  width: 50px;
+  justify-self: flex-end;
+}
+/* Footer section */
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  margin-top: 20px;
+}
+.footer-left,
+.footer-right {
+  width: 50%;
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  padding: 5px;
+}
+.footer a {
+  text-decoration: none;
+  color: #7d7c7c;
+}
+.footer a:hover {
+  color: #000;
+}
+/* Login section */
+.register {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  min-height: calc(100vh - p);
+  padding: 0 30px;
+}
+.register__container,
+.register__container--form {
+  display: flex;
+  flex-direction: column;
+}
+.register__container {
+  color: #fff;
+  min-height: 700px;
+  width: 300px;
+  border-radius: 50px;
+  border: 2px solid #fff;
+  background-color: rgba(175,170,170,0.35);
+  justify-content: space-around;
+  align-items: center;
+  padding: 60px 68px 40px;
+}
+.register__container--remember-me {
+  margin: 15px 0;
+}
+.register__container--remember-me label {
+  padding: 2px;
+  display: flex;
+  justify-content: space-around;
+}
+.register__container--remember-me label a {
+  text-decoration: none;
+  font-size: 0.8rem;
+  color: #7d7c7c;
+}
+.register__container--remember-me label a:hover {
+  color: #fff;
+}
+.register h2 {
+  display: flex;
+  align-self: flex-start;
+  background-color: transparent;
+}
+.register--input {
+  background-color: transparent;
+  border-left: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 2px solid #fff;
+  margin-bottom: 16px;
+  height: 5px;
+  outline: none;
+  padding: 20px;
+}
+.register--input:hover {
+  border-bottom: 4px solid #fff;
+}
+.register--button {
+  border-radius: 25px;
+  border: 2px solid #fff;
+  border: none;
+  color: #fff;
+  font-weight: bold;
+  height: 50px;
+  margin: 12px 0;
+  background-color: #51527f;
+  box-shadow: 2px 4px 8px 0px #3e3c3c;
+}
+.register--button:hover {
+  cursor: pointer;
+  text-decoration: underline;
+  background-color: rgba(0,0,0,0.5);
+}
+::placeholder {
+  color: #fff;
+}
+::placeholder:hover {
+  font-weight: bold;
+}
+.login--button {
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+}
+.login--button:hover {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #808080;
+}
+@media screen and (max-width: 768px) {
+  .register__containe {
+    width: 70%;
+    padding: 0;
+  }
+}
+/* div
+  background-color $seconday-color
+  color white
+  padding 1em
+  margin sum(10px, 5)
+  border-radius(15px) */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/styles/main.styl b/src/styles/main.styl
index 9f79dfc..784a457 100644
--- a/src/styles/main.styl
+++ b/src/styles/main.styl
@@ -1,22 +1,340 @@
 $primary-color = #A3A4FF;
 $seconday-color = #51527F;
+$color-font = #ffff;
+$color-secundary = #7d7c7c;
+$Font-text = 'Robot', sans-serif;
+$Font-title = 'Open Sans Condensed', sans-serif;
 
 border-radius(n)
   border-radius n
-  border 1px solid white
+  border 2px solid white
+
+background-input(n)
+  background-color rgba(255,255,255, n) 
+
+background-register(n) 
+  background-color: rgba(175, 170, 170, n);
+
+
+button-color(n)
+  background-color rgba(81, 82, 127, n)
+
+box-shadow(color)
+  box-shadow 2px 4px 8px 0px color
+
+height-login(p)
+    min-height: calc(100vh - p)
+
+min-height(n)
+  min-height: n
+
+
+/* Animation */
+.animated 
+  animation-duration: 2.5s
+  animation-fill-mode: both
+  animation-iteration-count: infinite
+
+@keyframes pulse 
+  0% {transform: scale(1);}
+  50% {transform: scale(1.1);}
+  100% {transform: scale(1);}
+
+
+.pulse 
+  animation-name: pulse;
+  animation-duration: 2.5s;
+
+
+
 
 sum(a, b)
   a + b
 
 body
-  background-color $primary-color
-  margin 0
-  padding 0
-  font-size 16px
+  background-color: $primary-color
+  margin: 0
+  padding: 0
+  font-family: $Font-text
+  font-size: 16px
+  color: $color-font
+
+/* Hero section */
+.hero--container 
+  height: 550px
+  width: 100vw
+  background: url(https://images.pexels.com/photos/823696/pexels-photo-823696.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat center center fixed
+  background-size: cover 
+  display: flex
+  flex-direction: column
+  justify-content: center
+ 
+.header 
+ display: flex
+ flex-direction: row
+ justify-content: space-between
+ &__navbar 
+   width: 50%
+ &--text
+  font-size: 1.4rem
+  font-weight: bold
+  margin-left:10px
+  text-transform: uppercase
+  letter-spacing: 0.15rem
+.navbar__list
+   display: flex
+   justify-content: space-around
+   list-style: none
+   .list--item
+     font-size: 1.4rem
+     margin: 0 10px
+.title--container 
+  height: 100%
+  display: flex
+  justify-content: center
+  align-items: center
+.main__title
+  justify-content: center
+  align-self: center
+  font-family: $Font-title
+  font-size: 3.5em
+  letter-spacing: .7em
+  font-weight: bold
+  text-transform: uppercase
+
+.main-input-container
+  width: 50%
+  border-radius(100px)
+  display: flex
+  justify-content: center
+  align-items: center
+  align-self: center
+  background-input(.8)
+  margin-bottom: 28px 
+.main-input input 
+    width: 500px
+    height: 40px
+    border: none 
+    outline: none
+    text-align: center
+    background-input(.4)
+&__:hover
+    box-shadow: 0 1px 6px #20212447
+    border-color: #dfe1e500 
+
+.main-input .search--input::placeholder
+  color: $color-secundary
+  font-size: 1.15rem
 
-div
+ .search-icon
+    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon_svg.png')
+    background-repeat: no-repeat
+    background-position: center
+    background-size: contain
+    width: 18px
+    height: 18px
+    margin-left: 10px
+    padding-left: 10px
+ .micro-icon
+    background-image: url('https://image.flaticon.com/icons/svg/54/54541.svg')
+    background-repeat: no-repeat
+    background-position: center
+    background-size: contain
+    width: 18px
+    height: 18px
+    margin-right: 10px
+    padding-left: 5px
+    cursor: pointer
+
+
+/* Main section */
+.main 
+  font-size: 1.25rem
+  border-radius(15px)
+  padding: 45px
+  &--container
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+p
+  text-align: justify
+.images--container
+  display: flex
+  justify-content: center
+  .item
+    width: 350px
+    img 
+      display: block
+      height: 100%
+      width: 100%
+      object-fit: cover
+
+.button--container
+  display: flex
+  justify-content: center
+  margin-top: 10px
+
+.button
+  width: 15%
+  height: 40px
+  border-radius(25px)
+  background-color: $seconday-color
+  border: none
+  color: $color-font
+  font-size: 1.1rem
+  margin: 15px 0
+  box-shadow( #3e3c3c)
+  &:hover
+    button-color(.75)
+    cursor pointer
+  & a 
+    color: $color-font
+    text-decoration: none
+
+.map--container 
+  display: flex
+  flex-direction: column
+  justify-content: space-around
+  align-items: center
+
+.facebook-container
+  width: 210px
+  height: 30px
+  display: flex
+  justify-content: center
+  align-items: center
+  text-align: center
+  color: rgba(0,0,0,.8)
+  padding: 5px
+  margin: 15px
+  font-size: 1rem
+  font-weight: bold
+  border-radius(25px) 
+  background-input(.5)
+  box-shadow( #3e3c3c)
+  &:hover
+    background-input(.25)
+    color: $color-font
+    cursor: pointer
+  &-login
+    width: 235px
+    height: 35px 
+
+.image
+  width: 50px
+  justify-self: flex-end
+
+
+/* Footer section */
+.footer
+  width: 100%
+  display: flex
+  justify-content: space-between
+  padding: 10px
+  margin-top: 20px
+  &-left,
+  &-right
+    width: 50%
+    display: flex
+    justify-content: space-around
+    list-style: none
+    padding: 5px
+  & a 
+    text-decoration: none
+    color: $color-secundary
+    &:hover
+      color: black
+
+/* Login section */
+
+.register 
+  display: flex
+  align-items: center
+  justify-content: flex-start
+  flex-direction: column
+  height-login(200px)
+  padding: 0 30px
+  &__container,
+  &__container--form
+    display: flex
+    flex-direction: column
+  &__container  
+    color: $color-font
+    min-height(700px)
+    width: 300px
+    border-radius(50px)
+    background-register(.35)
+    justify-content: space-around
+    align-items: center
+    padding: 60px 68px 40px
+    &--remember-me 
+      margin: 15px 0 
+      label 
+        padding: 2px
+        display: flex
+        justify-content: space-around
+        & a 
+          text-decoration: none
+          font-size: .8rem
+          color: $color-secundary
+          &:hover
+              color: $color-font
+          
+
+  & h2
+      display: flex
+      align-self: flex-start
+      background-color: transparent
+ 
+  &--input 
+    background-color: transparent
+    border-left: 0
+    border-top: 0
+    border-right: 0 
+    border-bottom: 2px solid white
+    margin-bottom: 16px
+    height: 5px
+    outline: none 
+    padding: 20px
+    &:hover
+      border-bottom: 4px solid white
+  &--button
+    border-radius(25px)
+    border: none
+    color: $color-font
+    font-weight: bold
+    height: 50px
+    margin: 12px 0
+    background-color: $seconday-color
+    box-shadow( #3e3c3c)
+
+    &:hover
+      cursor: pointer
+      text-decoration: underline
+      background-color: rgba(0, 0, 0, .5)
+  
+::placeholder
+  color: $color-font
+  &:hover
+    font-weight: bold
+
+.login--button
+  color: $color-font
+  text-decoration: none
+  font-weight: bold
+  &:hover 
+    text-decoration: underline
+    cursor: pointer
+    color: gray
+
+@media screen and (max-width: 768px)
+  .register__containe
+    width: 70%
+    padding: 0
+/* div
   background-color $seconday-color
   color white
   padding 1em
   margin sum(10px, 5)
-  border-radius(15px)
+  border-radius(15px) */
\ No newline at end of file