basic setup with linters,bootstrap, scss

.github/workflows/linters.yml

@@ -0,0 +1,48 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/[email protected]
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev [email protected]
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
+      - name: Webhint Report
+        run: npx hint --telemetry=off .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev [email protected] [email protected] [email protected] stylelint-csstree-validator
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.scss"

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.DS_store
+package-lock.json

.hintrc

@@ -0,0 +1,17 @@
+{
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["**", "!.git/**", "!node_modules/**"]
+    }
+  },
+  "extends": ["development"],
+  "formatters": ["stylish"],
+  "hints": [
+    "button-type",
+    "disown-opener",
+    "html-checker",
+    "meta-charset-utf-8",
+    "meta-viewport"
+  ]
+}

.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+    "extends": [
+        "stylelint-config-standard"
+    ],
+    "plugins": [
+        "stylelint-scss",
+        "stylelint-csstree-validator"
+    ],
+    "rules": {
+        "at-rule-no-unknown": null,
+        "scss/at-rule-no-unknown": true,
+        "csstree/validator": true
+    },
+    "ignoreFiles": [
+        "build/**",
+        "dist/**",
+        "**/reset*.css",
+        "**/bootstrap*.css"
+    ]
+}

assets/css/styles.css

@@ -0,0 +1,200 @@
+.bg-main {
+  background-color: #d35749; }
+
+.bg-color-red-2 {
+  background-color: #e17f64; }
+
+.color-darker {
+  color: rgba(0, 0, 0, 0.404); }
+
+.bg-color-gray {
+  background-color: #99a5a7; }
+
+.color-gray-l {
+  background-color: #7c72729f; }
+
+.color-gray-2 {
+  background-color: #eee; }
+
+.bg-color-blue {
+  background-color: #519bd7; }
+
+.bg-color-white {
+  background-color: white; }
+
+.main-color {
+  color: #d35749; }
+
+.color-gray {
+  color: #99a5a7; }
+
+.color-blue {
+  color: #519bd7; }
+
+@media (min-width: 1024px) {
+  .grid-form {
+    display: grid;
+    grid-template-columns: repeat(7, 14%);
+    grid-template-rows: 100%; } }
+
+.buttons-search {
+  margin: 2rem 0 0 2rem; }
+  @media (min-width: 1024px) {
+    .buttons-search {
+      margin: 1.5rem 0 0 0; } }
+
+.b-s {
+  background-color: #457db4; }
+
+.b-cf {
+  background-color: #e5a957; }
+
+.mal {
+  width: 100%;
+  height: 300px;
+  background-image: url(../images/resultsjpg.jpg);
+  margin: 0 auto; }
+
+.grid-results {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 5px; }
+
+.results-p {
+  border: 1.5px solid gray;
+  font-weight: 500; }
+
+.button-results {
+  margin-left: 80%; }
+
+.info-p {
+  font-weight: 500; }
+
+.map {
+  width: 100%;
+  height: 500px; }
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box; }
+
+.bg-black {
+  background-color: black; }
+
+.bg-img {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover; }
+
+.flex {
+  display: flex; }
+
+.center {
+  margin: 0 auto !important; }
+
+.list {
+  list-style: none; }
+
+.circle {
+  width: 300px;
+  height: 300px; }
+
+.text-500 {
+  font-weight: 500; }
+
+.text-700 {
+  font-weight: 700; }
+
+/* Nav-bar  */
+.nav-brad {
+  justify-content: center; }
+  @media (min-width: 1024px) {
+    .nav-brad {
+      justify-content: left; } }
+
+.links-nav {
+  display: flex;
+  justify-content: space-between; }
+  @media (min-width: 1024px) {
+    .links-nav {
+      width: 70%; } }
+
+.nav-text {
+  font-size: 30px; }
+
+.img-logo {
+  height: 3.438rem; }
+
+/*  Header  */
+.header-img {
+  background-image: url(../images/pexels-artem-beliaikin-1153976.jpg);
+  width: 100%;
+  height: 29rem;
+  filter: brightness(1); }
+
+.position-div {
+  position: relative;
+  top: 80px; }
+
+.form-index-grid {
+  display: grid;
+  grid-template-columns: 90%; }
+  @media (min-width: 768px) {
+    .form-index-grid {
+      grid-template-columns: 60% 20%;
+      padding-left: 5rem; } }
+
+.search-div {
+  width: 85%;
+  margin: 15px 0; }
+
+.form-header {
+  border: 1px solid black; }
+  @media (min-width: 1024px) {
+    .form-header {
+      margin: 0 auto; } }
+
+.input-header {
+  width: 90%; }
+
+.button-search {
+  width: 90%; }
+
+/*  section  */
+.section-one {
+  width: 100%; }
+
+.logo-search {
+  width: 50px;
+  height: 50px;
+  margin-left: 46%; }
+
+.section-two {
+  width: 100%; }
+
+/* section-two */
+.grid-section-two {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto; }
+  @media (min-width: 768px) {
+    .grid-section-two {
+      grid-template-columns: 50% 50%;
+      grid-template-rows: 100%; } }
+
+.s-2-img-1 {
+  background-image: url(../images/school.jpg); }
+
+.s-2-img-2 {
+  background-image: url(../images/find.jpg); }
+
+/*  Footer  */
+.footer-logo {
+  width: 2.625rem; }
+
+.contact-p {
+  color: #e17f64; }
+
+.footer-bottom {
+  height: 65px; }

assets/scss/_colors.scss

@@ -0,0 +1,52 @@
+$color-red: #d35749;
+$color-red-2: #e17f64;
+$color-black: black;
+$color-gray: #99a5a7;
+$color-blue: #519bd7;
+$color-gray-l: #7c72729f;
+$color-gray-2: #eee;
+$color-darker: rgba(0, 0, 0, 0.404);
+
+.bg-main {
+  background-color: $color-red;
+}
+
+.bg-color-red-2 {
+  background-color: $color-red-2;
+}
+
+.color-darker {
+  color: $color-darker;
+}
+
+.bg-color-gray {
+  background-color: $color-gray;
+}
+
+.color-gray-l {
+  background-color: $color-gray-l;
+}
+
+.color-gray-2 {
+  background-color: $color-gray-2;
+}
+
+.bg-color-blue {
+  background-color: $color-blue;
+}
+
+.bg-color-white {
+  background-color: white;
+}
+
+.main-color {
+  color: $color-red;
+}
+
+.color-gray {
+  color: $color-gray;
+}
+
+.color-blue {
+  color: $color-blue;
+}

assets/scss/_results.scss

@@ -0,0 +1,23 @@
+.grid-results {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 5px;
+}
+
+.results-p {
+  border: 1.5px solid gray;
+  font-weight: 500;
+}
+
+.button-results {
+  margin-left: 80%;
+}
+
+.info-p {
+  font-weight: 500;
+}
+
+.map {
+  width: 100%;
+  height: 500px;
+}