.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

gulpfile.js

@@ -0,0 +1,15 @@
+const { src, dest, watch } = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+
+function styles() {
+    return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
+
+  };
+
+
+  function sentinel () {
+    watch('src/styles/*.scss', {ignoreInitial: false}, styles);
+  }
+
+
+  exports.sentinel = sentinel;

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "challenge-tourist-attractions-williamsimao",
+  "version": "1.0.0",
+  "description": "Projeto m3Academmy",
+  "main": "js.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "gulp sentinel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.ecommercetools.com.br/WilliamSimao/challenge-tourist-attractions-WilliamSimao.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.56.1"
+  }
+}

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../dist/main.css">
 
     <title>Tourist Attractions</title>
 </head>
@@ -19,8 +19,6 @@
 
                 <div class="wrapper-input__img">
                     <label class="label-input" for="input__img">
-                        <!-- <span class="span__img">
-                        </span> -->
                     </label>
 
                     <input id="input__img" type="file" data-test="input-image">
@@ -57,7 +55,7 @@
 
     </main>
 
-    <script src="js.js"></script>
+    <script src="../src/scripts/js.js"></script>
 
 </body>
 </html>

src/styles/common/reset.scss

@@ -0,0 +1,5 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }

src/styles/main.scss

@@ -0,0 +1,7 @@
+@import "utils/variables.scss";
+@import "utils/fonts.scss";
+
+@import "common/reset.scss";
+
+@import "partials/form.scss";
+

src/styles/partials/form.scss

@@ -0,0 +1,146 @@
+@import "utils/fonts.scss";
+
+.container-h1-input {
+
+    padding: 40px 130px;
+
+    .page-titulo__tourist {
+        font-family: "Poppins", sans-serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 32px;
+        line-height: 120%;
+      }
+
+      .container-input {
+        display: flex;
+
+        margin: 40px 0 60px;
+
+        .wrapper-input__img label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            color: $grey-500;
+            font-family: "Roboto", sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+            letter-spacing: 0.15px;
+
+            width: 343px;
+            height: 212px;
+
+            margin-right: 20px;
+            border: 2px solid $grey-200;
+            border-radius: 8px;
+
+            cursor: pointer;
+          }
+
+          .wrapper-input__img input {
+            display: none;
+            margin-right: 20px;
+          }
+
+          .wrapper-input__text {
+            display: flex;
+            flex-direction: column;
+
+            .input-text__titulo {
+                display: flex;
+
+                width: 328px;
+                height: 56px;
+
+                margin-bottom: 20px;
+                padding: 16px 0 16px 16px;
+                border: 2px solid $grey-100;
+                border-radius: 8px;
+
+                color: $grey-500;
+                font-family: "Roboto", sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 24px;
+                letter-spacing: 0.15px;
+              }
+
+              .input-text__descricao {
+                display: flex;
+
+                width: 417px;
+                height: 136px;
+
+                margin-bottom: 16px;
+                padding: 40px 0px 72px 20px;
+
+                color: $grey-500;
+                font-family: "Roboto", sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 24px;
+                letter-spacing: 0.15px;
+
+                border: 2px solid $grey-100;
+                border-radius: 8px;
+              }
+
+              .wrapper-button-submit {
+                display: flex;
+                justify-content: end;
+
+                    .button-submit__input {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        width: 121px;
+                        height: 56px;
+
+                        background: $red-500;
+
+                        color: $white-500;
+                        font-family: "Poppins", sans-serif;
+                        font-style: normal;
+                        font-weight: 700;
+                        font-size: 16px;
+
+                        border: 1px solid $red-500;
+                        border-radius: 8px;
+
+                        cursor: pointer;
+
+
+                            &:hover {
+                                background: $red-700;
+                            }
+                    }
+              }
+
+
+          }
+
+      }
+
+      .img-result {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        object-fit: cover;
+      }
+
+      .page-titulo__img__spot {
+        font-family: "Poppins", sans-serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 32px;
+        line-height: 120%;
+      }
+
+  }
+

src/styles/utils/fonts.scss

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");

src/styles/utils/variables.scss

@@ -0,0 +1,13 @@
+
+//colors
+
+$white-500: #ffffff;
+
+
+$grey-100: #d6d6d6;
+$grey-200: #e5e5e5;
+$grey-500: #858585;
+
+
+$red-500: #ff5a5f;
+$red-700: #e93137;

style.css

@@ -1,146 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.container-h1-input {
-  padding: 40px 130px;
-}
-
-.page-titulo__tourist {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 120%;
-}
-
-.container-input {
-  display: flex;
-
-  margin: 40px 0 60px;
-}
-
-.wrapper-input__img label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  color: #858585;
-  font-family: "Roboto", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0.15px;
-
-  width: 343px;
-  height: 212px;
-
-  margin-right: 20px;
-  border: 2px solid #e5e5e5;
-  border-radius: 8px;
-
-  cursor: pointer;
-}
-
-.wrapper-input__img input {
-  display: none;
-  margin-right: 20px;
-}
-
-.img-result {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  object-fit: cover;
-}
-
-.wrapper-input__text {
-  display: flex;
-  flex-direction: column;
-}
-
-.input-text__titulo {
-  display: flex;
-
-  width: 328px;
-  height: 56px;
-
-  margin-bottom: 20px;
-  padding: 16px 0 16px 16px;
-  border: 2px solid #d6d6d6;
-  border-radius: 8px;
-
-  color: #858585;
-  font-family: "Roboto", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0.15px;
-}
-
-.input-text__descricao {
-  display: flex;
-
-  width: 417px;
-  height: 136px;
-
-  margin-bottom: 16px;
-  padding: 40px 0px 72px 20px;
-
-  color: #858585;
-  font-family: "Roboto", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0.15px;
-
-  border: 2px solid #d6d6d6;
-  border-radius: 8px;
-}
-
-.wrapper-button-submit {
-  display: flex;
-  justify-content: end;
-}
-
-.button-submit__input {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 121px;
-  height: 56px;
-
-  background: #ff5a5f;
-
-  color: #ffffff;
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 16px;
-
-  border: 1px solid #ff5a5f;
-  border-radius: 8px;
-
-  cursor: pointer;
-}
-
-.button-submit__input:hover {
-  background: #e93137;
-}
-
-.page-titulo__img__spot {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 120%;
-}