From e67c872417409ea5d3b9bbd287a8f7e65bbdd97a Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Sat, 22 Aug 2020 20:51:24 -0500 Subject: [PATCH 01/15] Maquetado del header y el hero --- prepros.config | 914 +++++++++++++++++++++++++++++++++++++++++++ public/index.html | 17 +- src/csses/main.css | 35 ++ src/styles/main.styl | 20 + 4 files changed, 984 insertions(+), 2 deletions(-) create mode 100644 prepros.config create mode 100644 src/csses/main.css 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..b2fb57e 100644 --- a/public/index.html +++ b/public/index.html @@ -4,11 +4,24 @@ - Hola Stylus - + Hola Dubai - Stylus + +
+
+

Let's go Dubai

+
+ + +

¡Hola Stylus!

diff --git a/src/csses/main.css b/src/csses/main.css new file mode 100644 index 0000000..9218e82 --- /dev/null +++ b/src/csses/main.css @@ -0,0 +1,35 @@ +body { + background-color: #a3a4ff; + margin: 0; + padding: 0; + font-size: 16px; + color: #fff; +} +.hero--container { + height: 450px; + 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; + background-clip: unset; +} +.header { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.header__navbar { + width: 35%; +} +.header .navbar__list { + display: flex; + justify-content: space-between; + list-style: none; +} +div { + background-color: #51527f; + color: #fff; + padding: 1em; + margin: 15px; + border-radius: 15px; + border: 1px solid #fff; +} diff --git a/src/styles/main.styl b/src/styles/main.styl index 9f79dfc..8ac6d14 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -1,5 +1,6 @@ $primary-color = #A3A4FF; $seconday-color = #51527F; +$color-font = #ffff; border-radius(n) border-radius n @@ -13,6 +14,25 @@ body margin 0 padding 0 font-size 16px + color: $color-font + +.hero--container + height: 450px + 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 + background-clip: unset + + .header + display: flex + flex-direction: row + justify-content: space-between + &__navbar + width: 35% + .navbar__list + display: flex + justify-content: space-between + list-style: none div background-color $seconday-color From e2d14eb73957e89d188fafb9926a715ae9eddd47 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Sat, 22 Aug 2020 22:19:32 -0500 Subject: [PATCH 02/15] Hero section completed --- public/index.html | 12 ++++++++++-- src/csses/main.css | 26 ++++++++++++++++++-------- src/styles/main.styl | 34 +++++++++++++++++++++++----------- 3 files changed, 51 insertions(+), 21 deletions(-) diff --git a/public/index.html b/public/index.html index b2fb57e..0e472fa 100644 --- a/public/index.html +++ b/public/index.html @@ -11,20 +11,28 @@
+

Let's go Dubai

+ +
- - + +
+

Dubai

+
+

¡Hola Stylus!

+ \ No newline at end of file diff --git a/src/csses/main.css b/src/csses/main.css index 9218e82..c5d8ee1 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -11,6 +11,8 @@ body { 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; background-clip: unset; + display: flex; + flex-direction: column; } .header { display: flex; @@ -20,16 +22,24 @@ body { .header__navbar { width: 35%; } -.header .navbar__list { +.navbar__list { display: flex; justify-content: space-between; list-style: none; } -div { - background-color: #51527f; - color: #fff; - padding: 1em; - margin: 15px; - border-radius: 15px; - border: 1px solid #fff; +.title--container { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.main__title { + justify-content: center; + align-self: center; } +/* div + background-color $seconday-color + color white + padding 1em + margin sum(10px, 5) + border-radius(15px) */ diff --git a/src/styles/main.styl b/src/styles/main.styl index 8ac6d14..ae14576 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -22,21 +22,33 @@ body 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 background-clip: unset + display: flex + flex-direction: column - .header +.header + display: flex + flex-direction: row + justify-content: space-between + &__navbar + width: 35% + +.navbar__list + display: flex + justify-content: space-between + list-style: none +.title--container + height: 100% display: flex - flex-direction: row - justify-content: space-between - &__navbar - width: 35% - .navbar__list - display: flex - justify-content: space-between - list-style: none + justify-content: center + align-items: center +.main__title + justify-content: center + align-self: center + -div +/* 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 From 0573f8977a6de9be2b2190021e6fbfa64cfc27a1 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Sat, 22 Aug 2020 23:25:14 -0500 Subject: [PATCH 03/15] Galeria y mapa de Dubai --- public/index.html | 32 ++++++++++++++++++++++++++++++++ src/csses/main.css | 19 ++++++++++++++++++- src/styles/main.styl | 15 ++++++++++++++- 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 0e472fa..6128486 100644 --- a/public/index.html +++ b/public/index.html @@ -33,6 +33,38 @@

Dubai

¡Hola Stylus!

+
+
+

Enjoy the Magic City

+ +

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!

+
+ +
+
+ Burj Khalifa +
+
+ Palacio arabe Dubai +
+
+ + + +
+ +
+ +
+
+ + + + + +
+
+
\ No newline at end of file diff --git a/src/csses/main.css b/src/csses/main.css index c5d8ee1..5e92ea8 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -6,7 +6,7 @@ body { color: #fff; } .hero--container { - height: 450px; + 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; @@ -36,6 +36,23 @@ body { .main__title { justify-content: center; align-self: center; + font-size: 2.5em; +} +.main { + border-radius: 15px; + border: 1px solid #fff; +} +.images--container { + display: flex; +} +.images--container .item { + width: 350px; +} +.images--container .item img { + display: block; + height: 100%; + width: 100%; + object-fit: cover; } /* div background-color $seconday-color diff --git a/src/styles/main.styl b/src/styles/main.styl index ae14576..ea22b8e 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -17,7 +17,7 @@ body color: $color-font .hero--container - height: 450px + 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 @@ -44,8 +44,21 @@ body .main__title justify-content: center align-self: center + font-size: 2.5em +.main + border-radius(15px) + +.images--container + display: flex + .item + width: 350px + img + display: block + height: 100% + width: 100% + object-fit: cover /* div background-color $seconday-color color white From cff4eec71fd4b0b08f7aa77bbdc471528dda7cc5 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Mon, 24 Aug 2020 18:19:50 -0500 Subject: [PATCH 04/15] Agregado de buscador --- public/index.html | 57 +++++++++++++++++++++++++++++++++++--------- src/csses/main.css | 46 +++++++++++++++++++++++++++++++++++ src/styles/main.styl | 47 ++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 6128486..cbd0aa7 100644 --- a/public/index.html +++ b/public/index.html @@ -27,17 +27,30 @@

Dubai

+
+
+
+ + + + + +
+
+
-
+ +

Enjoy the Magic City

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!

+

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.

@@ -49,22 +62,44 @@

Enjoy the Magic City

- + +

About our Location

-
-
- + - - - -
-
+ + + \ No newline at end of file diff --git a/src/csses/main.css b/src/csses/main.css index 5e92ea8..a831b73 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -5,6 +5,7 @@ body { font-size: 16px; color: #fff; } +/* Hero section */ .hero--container { height: 550px; width: 100vw; @@ -13,6 +14,7 @@ body { background-clip: unset; display: flex; flex-direction: column; + justify-content: center; } .header { display: flex; @@ -38,6 +40,50 @@ body { align-self: center; font-size: 2.5em; } +.main-input-container { + width: 50%; + border-radius: 100px; + border: 1px solid #fff; + display: flex; + justify-content: center; + align-items: center; + align-self: center; + background-color: rgba(255,255,255,0.8); +} +.main-input input { + width: 80%; + height: 40px; + border: none; + outline: none; + text-align: center; + background-color: rgba(255,255,255,0.4); +} +__:hover { + box-shadow: 0 1px 6px rgba(32,33,36,0.278); + border-color: rgba(223,225,229,0); +} +.main-input .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; +} +.main-input .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 { border-radius: 15px; border: 1px solid #fff; diff --git a/src/styles/main.styl b/src/styles/main.styl index ea22b8e..93ad07a 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -6,6 +6,9 @@ border-radius(n) border-radius n border 1px solid white +background-input(n) + background-color: rgba(255,255,255, n) + sum(a, b) a + b @@ -16,6 +19,7 @@ body font-size 16px color: $color-font +/* Hero section */ .hero--container height: 550px width: 100vw @@ -24,6 +28,7 @@ body background-clip: unset display: flex flex-direction: column + justify-content: center .header display: flex @@ -46,6 +51,48 @@ body align-self: center font-size: 2.5em +.main-input-container + width: 50% + border-radius(100px) + display: flex + justify-content: center + align-items: center + align-self: center + background-input(.8) +.main-input input + width: 80% + 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-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 border-radius(15px) From 65a03ceb2065a6770ab7b3d242a1a423310e3d54 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Mon, 24 Aug 2020 18:36:01 -0500 Subject: [PATCH 05/15] =?UTF-8?q?Correci=C3=B3n=20de=20seccion=20de=20mapa?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 18 ++++++++++++------ src/csses/main.css | 18 ++++++++++++++++++ src/styles/main.styl | 17 ++++++++++++++++- 3 files changed, 46 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index cbd0aa7..cd5da22 100644 --- a/public/index.html +++ b/public/index.html @@ -62,14 +62,20 @@

Enjoy the Magic City

- +
+ +
+ +
+

About our Location

-

About our Location

-
- -
+
+ +
- + +
+ diff --git a/src/csses/main.css b/src/csses/main.css index a831b73..a5e1251 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -88,8 +88,15 @@ __:hover { border-radius: 15px; border: 1px solid #fff; } +.main--container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} .images--container { display: flex; + justify-content: center; } .images--container .item { width: 350px; @@ -100,6 +107,17 @@ __:hover { width: 100%; object-fit: cover; } +.button--container { + display: flex; + justify-content: center; + margin-top: 10px; +} +.map--container { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} /* div background-color $seconday-color color white diff --git a/src/styles/main.styl b/src/styles/main.styl index 93ad07a..1f055e3 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -95,10 +95,15 @@ body /* Main section */ .main border-radius(15px) - + &--container + display: flex + flex-direction: column + justify-content: center + align-items: center .images--container display: flex + justify-content: center .item width: 350px img @@ -106,6 +111,16 @@ body height: 100% width: 100% object-fit: cover +.button--container + display: flex + justify-content: center + margin-top: 10px + +.map--container + display: flex + flex-direction: column + justify-content: space-around + align-items: center /* div background-color $seconday-color color white From 4eaa2e61e6feeddc1a5e2fc0d37d760bb43bf3c3 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Mon, 24 Aug 2020 18:44:42 -0500 Subject: [PATCH 06/15] Maquetado final footer --- public/index.html | 3 ++- src/csses/main.css | 18 ++++++++++++++++++ src/styles/main.styl | 16 ++++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index cd5da22..57f8c7f 100644 --- a/public/index.html +++ b/public/index.html @@ -79,7 +79,7 @@

About our Location

-
+
+
  • Privacidad diff --git a/src/csses/main.css b/src/csses/main.css index a5e1251..3b570b2 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -118,6 +118,24 @@ __:hover { justify-content: space-around; align-items: center; } +/* Footer section */ +.footer { + width: 100%; + display: flex; + justify-content: space-between; + padding: 10px; +} +.footer-left, +.footer-right { + width: 50%; + display: flex; + justify-content: space-around; + list-style: none; +} +.footer a { + text-decoration: none; + color: #808080; +} /* div background-color $seconday-color color white diff --git a/src/styles/main.styl b/src/styles/main.styl index 1f055e3..807b567 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -121,6 +121,22 @@ body flex-direction: column justify-content: space-around align-items: center + +/* Footer section */ +.footer + width: 100% + display: flex + justify-content: space-between + padding: 10px + &-left, + &-right + width: 50% + display: flex + justify-content: space-around + list-style: none + & a + text-decoration: none + color: gray /* div background-color $seconday-color color white From 35c940489414fcc8eff3a3def6ada1d1707fecae Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Mon, 24 Aug 2020 19:15:04 -0500 Subject: [PATCH 07/15] Estilos de los botones y sombras --- public/index.html | 2 +- src/csses/main.css | 38 ++++++++++++++++++++++++++++++++++---- src/styles/main.styl | 41 +++++++++++++++++++++++++++++++++++++---- 3 files changed, 72 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index 57f8c7f..21b8018 100644 --- a/public/index.html +++ b/public/index.html @@ -12,7 +12,7 @@
    -

    Let's go Dubai

    +

    Let's go Dubai

    +
diff --git a/src/csses/main.css b/src/csses/main.css index a6ac7d2..587478d 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -143,6 +143,30 @@ __:hover { justify-content: space-around; align-items: center; } +.facebook-container { + width: 18%; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: #000; + padding: 5px; + margin: 15px; + 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; +} +.image { + width: 50px; + justify-self: flex-end; +} /* Footer section */ .footer { width: 100%; diff --git a/src/styles/main.styl b/src/styles/main.styl index 168eb80..67f8ce6 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -151,6 +151,29 @@ body justify-content: space-around align-items: center +.facebook-container + width: 18% + height: 30px + display: flex + justify-content: center + align-items: center + text-align: center + color: black + padding: 5px + margin: 15px + border-radius(25px) + background-input(.5) + box-shadow( #3e3c3c) + &:hover + background-input(.25) + color: $color-font + cursor: pointer + +.image + width: 50px + justify-self: flex-end + + /* Footer section */ .footer width: 100% From db922d4c8fde73ed63041fc29e4d6ddec47372b3 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Mon, 24 Aug 2020 22:24:44 -0500 Subject: [PATCH 09/15] Seccion de registro y mejoras del header --- public/login.html | 25 +++++++++++++++++++++++++ src/csses/main.css | 7 ++++--- src/styles/main.styl | 8 +++++--- 3 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 public/login.html diff --git a/public/login.html b/public/login.html new file mode 100644 index 0000000..80ade1e --- /dev/null +++ b/public/login.html @@ -0,0 +1,25 @@ + + + + + + + Login - user + + +
+
+

Sing Up

+
+ + + + +
+ + +
+
+ + + \ No newline at end of file diff --git a/src/csses/main.css b/src/csses/main.css index 587478d..d39a112 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -22,7 +22,7 @@ body { justify-content: space-between; } .header__navbar { - width: 35%; + width: 50%; } .header--text { margin-left: 10px; @@ -57,7 +57,7 @@ body { background-color: rgba(255,255,255,0.8); } .main-input input { - width: 80%; + width: 500px; height: 40px; border: none; outline: none; @@ -144,7 +144,7 @@ __:hover { align-items: center; } .facebook-container { - width: 18%; + width: 200px; height: 30px; display: flex; justify-content: center; @@ -190,6 +190,7 @@ __:hover { .footer a:hover { color: #000; } +/* Login section */ /* div background-color $seconday-color color white diff --git a/src/styles/main.styl b/src/styles/main.styl index 67f8ce6..d11301a 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -44,7 +44,7 @@ body flex-direction: row justify-content: space-between &__navbar - width: 35% + width: 50% &--text margin-left:10px .navbar__list @@ -72,7 +72,7 @@ body align-self: center background-input(.8) .main-input input - width: 80% + width: 500px height: 40px border: none outline: none @@ -152,7 +152,7 @@ body align-items: center .facebook-container - width: 18% + width: 200px height: 30px display: flex justify-content: center @@ -193,6 +193,8 @@ body color: gray &:hover color: black + +/* Login section */ /* div background-color $seconday-color color white From 748942d891f6b80f341d46b90671cd3b29f2b6d3 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Tue, 25 Aug 2020 16:06:18 -0500 Subject: [PATCH 10/15] Estilos de la seccion login --- public/login.html | 3 +++ src/csses/main.css | 63 +++++++++++++++++++++++++++++++++++++++++++ src/styles/main.styl | 64 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 130 insertions(+) diff --git a/public/login.html b/public/login.html index 80ade1e..ec6e648 100644 --- a/public/login.html +++ b/public/login.html @@ -7,7 +7,9 @@ Login - user +
+

Sing Up

@@ -19,6 +21,7 @@

Sing Up

+
diff --git a/src/csses/main.css b/src/csses/main.css index d39a112..694aa2e 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -191,6 +191,69 @@ __: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; + border-radius: 50px; + border: 2px solid #fff; + justify-content: space-around; + align-items: center; + padding: 60px 68px 40px; +} +.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--button { + border: none; + border-radius: 25px; + border: 2px solid #fff; + color: #fff; + font-weight: bold; + height: 50px; + margin: 10px 0; +} +.register--button:hover { + cursor: pointer; + text-decoration: underline; +} +::placeholder { + color: #fff; +} +.login--button { + color: #fff; + text-decoration: none; + font-weight: bold; +} +.login--button:hover { + text-decoration: underline; + cursor: pointer; +} /* div background-color $seconday-color color white diff --git a/src/styles/main.styl b/src/styles/main.styl index d11301a..d1d6234 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -15,6 +15,14 @@ button-color(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 + + + @@ -195,6 +203,62 @@ body 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) + border-radius(50px) + justify-content: space-around + align-items: center + padding: 60px 68px 40px + + & 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 + &--button + border: none + border-radius(25px) + color: $color-font + font-weight: bold + height: 50px + margin: 10px 0 + &:hover + cursor: pointer + text-decoration: underline + +::placeholder + color: $color-font + +.login--button + color: $color-font + text-decoration: none + font-weight: bold + &:hover + text-decoration: underline + cursor: pointer + /* div background-color $seconday-color color white From 8a09c21b31cb94ebeb2f155711ea5bd545a44227 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Tue, 25 Aug 2020 17:18:29 -0500 Subject: [PATCH 11/15] =?UTF-8?q?Maquetado=20y=20correci=C3=B3n=20de=20la?= =?UTF-8?q?=20Rememberme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 2 +- public/login.html | 22 +++++++++++++++------- src/csses/main.css | 33 +++++++++++++++++++++++++++++++-- src/styles/main.styl | 33 +++++++++++++++++++++++++++++++-- 4 files changed, 78 insertions(+), 12 deletions(-) diff --git a/public/index.html b/public/index.html index 27e5fe7..c596937 100644 --- a/public/index.html +++ b/public/index.html @@ -73,7 +73,7 @@

About our Location

- + diff --git a/public/login.html b/public/login.html index ec6e648..448f451 100644 --- a/public/login.html +++ b/public/login.html @@ -11,17 +11,25 @@
-

Sing Up

+

Log into
your account

- - - - + + + +
+ +
+ + - - +
+
diff --git a/src/csses/main.css b/src/csses/main.css index 694aa2e..d651d63 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -163,6 +163,10 @@ __:hover { color: #fff; cursor: pointer; } +.facebook-container-login { + width: 235px; + height: 35px; +} .image { width: 50px; justify-self: flex-end; @@ -207,12 +211,22 @@ __:hover { .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 h2 { display: flex; align-self: flex-start; @@ -229,22 +243,31 @@ __:hover { outline: none; padding: 20px; } +.register--input:hover { + border-bottom: 4px solid #fff; +} .register--button { - border: none; border-radius: 25px; border: 2px solid #fff; + border: none; color: #fff; font-weight: bold; height: 50px; - margin: 10px 0; + margin: 12px 0; + background-color: rgba(0,0,0,0.8); + 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; @@ -254,6 +277,12 @@ __:hover { text-decoration: underline; cursor: pointer; } +@media screen and (max-width: 768px) { + .register__containe { + width: 70%; + padding: 0; + } +} /* div background-color $seconday-color color white diff --git a/src/styles/main.styl b/src/styles/main.styl index d1d6234..c5f7165 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -9,6 +9,10 @@ border-radius(n) 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(255, 192, 75, n) @@ -176,6 +180,9 @@ body background-input(.25) color: $color-font cursor: pointer + &-login + width: 235px + height: 35px .image width: 50px @@ -218,15 +225,25 @@ body &__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 + & h2 display: flex align-self: flex-start background-color: transparent + &--input background-color: transparent border-left: 0 @@ -237,19 +254,27 @@ body height: 5px outline: none padding: 20px + &:hover + border-bottom: 4px solid white &--button - border: none border-radius(25px) + border: none color: $color-font font-weight: bold height: 50px - margin: 10px 0 + margin: 12px 0 + background-color: rgba(0, 0, 0, .8) + 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 @@ -259,6 +284,10 @@ body text-decoration: underline cursor: pointer +@media screen and (max-width: 768px) + .register__containe + width: 70% + padding: 0 /* div background-color $seconday-color color white From 98f9bdf480e68f35a571f223e4691482b02b7f4e Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Tue, 25 Aug 2020 22:03:18 -0500 Subject: [PATCH 12/15] Cambio de fuente y cambio de margen al buscador --- public/index.html | 3 ++- public/login.html | 1 + src/csses/main.css | 17 +++++++++++++---- src/styles/main.styl | 25 ++++++++++++++++++------- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/public/index.html b/public/index.html index c596937..da8b0a1 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,7 @@ + Hola Dubai - Stylus @@ -33,7 +34,7 @@

Dubai

- + diff --git a/public/login.html b/public/login.html index 448f451..15092bf 100644 --- a/public/login.html +++ b/public/login.html @@ -3,6 +3,7 @@ + Login - user diff --git a/src/csses/main.css b/src/csses/main.css index d651d63..81ea79b 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -2,6 +2,7 @@ body { background-color: #a3a4ff; margin: 0; padding: 0; + font-family: 'Robot', sans-serif; font-size: 16px; color: #fff; } @@ -44,7 +45,11 @@ body { .main__title { justify-content: center; align-self: center; - font-size: 2.5em; + 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%; @@ -55,6 +60,7 @@ body { align-items: center; align-self: center; background-color: rgba(255,255,255,0.8); + margin-bottom: 28px; } .main-input input { width: 500px; @@ -68,7 +74,10 @@ __:hover { box-shadow: 2px 4px 8px 0px 0; border-color: rgba(223,225,229,0); } -.main-input .search-icon { +.main-input .search--input::placeholder { + color: #7d7c7c; +} +.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; @@ -78,7 +87,7 @@ __:hover { margin-left: 10px; padding-left: 10px; } -.main-input .micro-icon { +.micro-icon { background-image: url("https://image.flaticon.com/icons/svg/54/54541.svg"); background-repeat: no-repeat; background-position: center; @@ -189,7 +198,7 @@ __:hover { } .footer a { text-decoration: none; - color: #808080; + color: #7d7c7c; } .footer a:hover { color: #000; diff --git a/src/styles/main.styl b/src/styles/main.styl index c5f7165..903f63f 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -1,6 +1,9 @@ $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 @@ -34,10 +37,11 @@ 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 */ @@ -73,7 +77,11 @@ body .main__title justify-content: center align-self: center - font-size: 2.5em + font-family: $Font-title + font-size: 3.5em + letter-spacing: .7em + font-weight: bold + text-transform: uppercase .main-input-container width: 50% @@ -83,6 +91,7 @@ body align-items: center align-self: center background-input(.8) + margin-bottom: 28px .main-input input width: 500px height: 40px @@ -94,7 +103,9 @@ body box-shadow: 0 1px 6px #20212447 border-color: #dfe1e500 -.main-input +.main-input .search--input::placeholder + color: $color-secundary + .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 @@ -205,7 +216,7 @@ body padding: 5px & a text-decoration: none - color: gray + color: $color-secundary &:hover color: black From f12a6c0480c51383e2a336eca49a81206f3add02 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Wed, 26 Aug 2020 21:26:14 -0500 Subject: [PATCH 13/15] Agregado de animaciones al titulo y cambio de font-size --- public/index.html | 2 +- src/csses/main.css | 33 ++++++++++++++++++++++++++++++++- src/styles/main.styl | 27 +++++++++++++++++++++++++-- 3 files changed, 58 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index da8b0a1..d86b9c3 100644 --- a/public/index.html +++ b/public/index.html @@ -26,7 +26,7 @@
-

Dubai

+

Dubai

diff --git a/src/csses/main.css b/src/csses/main.css index 81ea79b..07e5b8b 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -1,3 +1,13 @@ +/* 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; @@ -26,6 +36,7 @@ body { width: 50%; } .header--text { + font-size: 1.4rem; margin-left: 10px; } .navbar__list { @@ -34,6 +45,7 @@ body { list-style: none; } .navbar__list .list--item { + font-size: 1.4rem; margin: 0 10px; } .title--container { @@ -76,6 +88,7 @@ __:hover { } .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"); @@ -100,8 +113,10 @@ __:hover { } /* Main section */ .main { + font-size: 1.25rem; border-radius: 15px; border: 2px solid #fff; + padding: 45px; } .main--container { display: flex; @@ -109,6 +124,9 @@ __:hover { justify-content: center; align-items: center; } +p { + text-align: justify; +} .images--container { display: flex; justify-content: center; @@ -135,6 +153,7 @@ __:hover { background-color: rgba(255,192,75,0.9); border: none; color: #fff; + font-size: 1.1rem; margin: 15px 0; box-shadow: 2px 4px 8px 0px #3e3c3c; } @@ -153,7 +172,7 @@ __:hover { align-items: center; } .facebook-container { - width: 200px; + width: 210px; height: 30px; display: flex; justify-content: center; @@ -162,6 +181,7 @@ __:hover { color: #000; padding: 5px; margin: 15px; + font-size: 1rem; border-radius: 25px; border: 2px solid #fff; background-color: rgba(255,255,255,0.5); @@ -298,3 +318,14 @@ __:hover { 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 903f63f..ca634f4 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -29,6 +29,21 @@ 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; @@ -62,12 +77,14 @@ body &__navbar width: 50% &--text + font-size: 1.4rem margin-left:10px .navbar__list display: flex justify-content: space-around list-style: none .list--item + font-size: 1.4rem margin: 0 10px .title--container height: 100% @@ -105,6 +122,7 @@ body .main-input .search--input::placeholder color: $color-secundary + 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') @@ -129,13 +147,16 @@ body /* 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 @@ -159,6 +180,7 @@ body button-color(.9) border: none color: $color-font + font-size: 1.1rem margin: 15px 0 box-shadow( #3e3c3c) &:hover @@ -175,7 +197,7 @@ body align-items: center .facebook-container - width: 200px + width: 210px height: 30px display: flex justify-content: center @@ -184,6 +206,7 @@ body color: black padding: 5px margin: 15px + font-size: 1rem border-radius(25px) background-input(.5) box-shadow( #3e3c3c) From 6aab6f8f6d06e079ecaac03d206d40c4fbba8660 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Wed, 26 Aug 2020 21:31:15 -0500 Subject: [PATCH 14/15] Solucion al reto CSS --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index d86b9c3..8ee8e27 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ Hola Dubai - Stylus - + From e9c5620f504c253a41bf155bd23e9d3219a9cda0 Mon Sep 17 00:00:00 2001 From: Efrain Hernandez Date: Wed, 26 Aug 2020 22:34:57 -0500 Subject: [PATCH 15/15] Cambio de color de boton y correcion de login --- public/index.html | 2 +- src/csses/main.css | 22 +++++++++++++++++----- src/styles/main.styl | 20 +++++++++++++++----- 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 8ee8e27..d86b9c3 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ Hola Dubai - Stylus - + diff --git a/src/csses/main.css b/src/csses/main.css index 07e5b8b..e0d4e7c 100644 --- a/src/csses/main.css +++ b/src/csses/main.css @@ -22,7 +22,6 @@ body { 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; - background-clip: unset; display: flex; flex-direction: column; justify-content: center; @@ -37,7 +36,10 @@ body { } .header--text { font-size: 1.4rem; + font-weight: bold; margin-left: 10px; + text-transform: uppercase; + letter-spacing: 0.15rem; } .navbar__list { display: flex; @@ -150,7 +152,7 @@ p { height: 40px; border-radius: 25px; border: 2px solid #fff; - background-color: rgba(255,192,75,0.9); + background-color: #51527f; border: none; color: #fff; font-size: 1.1rem; @@ -158,7 +160,7 @@ p { box-shadow: 2px 4px 8px 0px #3e3c3c; } .button:hover { - background-color: rgba(255,192,75,0.75); + background-color: rgba(81,82,127,0.75); cursor: pointer; } .button a { @@ -178,10 +180,11 @@ p { justify-content: center; align-items: center; text-align: center; - color: #000; + 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); @@ -256,6 +259,14 @@ p { 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; @@ -283,7 +294,7 @@ p { font-weight: bold; height: 50px; margin: 12px 0; - background-color: rgba(0,0,0,0.8); + background-color: #51527f; box-shadow: 2px 4px 8px 0px #3e3c3c; } .register--button:hover { @@ -305,6 +316,7 @@ p { .login--button:hover { text-decoration: underline; cursor: pointer; + color: #808080; } @media screen and (max-width: 768px) { .register__containe { diff --git a/src/styles/main.styl b/src/styles/main.styl index ca634f4..784a457 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -17,7 +17,7 @@ background-register(n) button-color(n) - background-color rgba(255, 192, 75, n) + background-color rgba(81, 82, 127, n) box-shadow(color) box-shadow 2px 4px 8px 0px color @@ -65,7 +65,6 @@ body 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 - background-clip: unset display: flex flex-direction: column justify-content: center @@ -78,7 +77,10 @@ body 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 @@ -177,7 +179,7 @@ p width: 15% height: 40px border-radius(25px) - button-color(.9) + background-color: $seconday-color border: none color: $color-font font-size: 1.1rem @@ -203,10 +205,11 @@ p justify-content: center align-items: center text-align: center - color: black + 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) @@ -271,6 +274,12 @@ p padding: 2px display: flex justify-content: space-around + & a + text-decoration: none + font-size: .8rem + color: $color-secundary + &:hover + color: $color-font & h2 @@ -297,7 +306,7 @@ p font-weight: bold height: 50px margin: 12px 0 - background-color: rgba(0, 0, 0, .8) + background-color: $seconday-color box-shadow( #3e3c3c) &:hover @@ -317,6 +326,7 @@ p &:hover text-decoration: underline cursor: pointer + color: gray @media screen and (max-width: 768px) .register__containe