mate-academy · pushkalov · Jan 19, 2022 · Jan 19, 2022 · Jan 19, 2022
diff --git a/.bemlintrc.json b/.bemlintrc.json
@@ -0,0 +1,16 @@
+{
+  "elementDivider": "__",
+  "modifierDivider": "--",
+  "ignore": [
+    "node_modules",
+    "dist"
+  ],
+  "rules": {
+    "one-block": true,
+    "one-element": true,
+    "element-inside-parent-block": true,
+    "no-double-element": true,
+    "no-neighbour-parent-block": true,
+    "modifiable-class": true
+  }
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,5 +19,11 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm start & sleep 5 && npm test
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ node_modules
 # Generated files
 backstop_data
 dist
+.cache
diff --git a/.linthtmlrc.json b/.linthtmlrc.json
@@ -1,49 +1,3 @@
 {
-  "attr-bans": [
-    "align",
-    "background",
-    "bgcolor",
-    "border",
-    "frameborder",
-    "style"
-  ],
-  "attr-name-ignore-regex": "viewBox",
-  "attr-no-dup": true,
-  "attr-quote-style": "double",
-  "attr-req-value": true,
-  "class-no-dup": true,
-  "doctype-first": true,
-  "doctype-html5": true,
-  "fig-req-figcaption": true,
-  "head-req-title": true,
-  "html-req-lang": true,
-  "id-class-style": false,
-  "id-no-dup": true,
-  "img-req-src": true,
-  "img-req-alt": "allownull",
-  "indent-width": 2,
-  "indent-style": "spaces",
-  "indent-width-cont": true,
-  "input-radio-req-name": true,
-  "spec-char-escape": true,
-  "tag-bans": [
-    "b",
-    "i",
-    "u",
-    "center",
-    "style",
-    "marquee",
-    "font",
-    "s"
-  ],
-  "tag-name-lowercase": true,
-  "tag-name-match": true,
-  "tag-self-close": "never",
-  "tag-close": true,
-  "text-ignore-regex": "&",
-  "title-no-dup": true,
-  "line-end-style": "lf",
-  "attr-new-line": 2,
-  "attr-name-style": "dash",
-  "attr-no-unsafe-char": true
+  "extends": "@mate-academy/linthtml-config"
 }
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/yM
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/Digits/).
+  [DEMO LINK](https://pushkalov.github.io/Digits/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/dist/Graphic2.b1ba6bef.png b/dist/Graphic2.b1ba6bef.png
diff --git a/dist/Halyard Display Medium.47ef59a2.ttf b/dist/Halyard Display Medium.47ef59a2.ttf
diff --git a/dist/Halyard Text Regular.25fdd8c1.ttf b/dist/Halyard Text Regular.25fdd8c1.ttf
diff --git a/dist/arrow-down.b00d3383.png b/dist/arrow-down.b00d3383.png
diff --git a/dist/card1.89fc75be.png b/dist/card1.89fc75be.png
diff --git a/dist/card1.967586a9.png b/dist/card1.967586a9.png
diff --git a/dist/card2.441746e4.png b/dist/card2.441746e4.png
diff --git a/dist/card2.84b95e44.png b/dist/card2.84b95e44.png
diff --git a/dist/card3.197b0aeb.png b/dist/card3.197b0aeb.png
diff --git a/dist/cube.61336a05.png b/dist/cube.61336a05.png
diff --git a/dist/ellipse1.02d2ae12.png b/dist/ellipse1.02d2ae12.png
diff --git a/dist/ellipse2.f79b52d9.png b/dist/ellipse2.f79b52d9.png
diff --git a/dist/face.2b26126e.png b/dist/face.2b26126e.png
diff --git a/dist/graphic_all.dcc2fb90.png b/dist/graphic_all.dcc2fb90.png
diff --git a/dist/icon-dribbble.f41d04f0.png b/dist/icon-dribbble.f41d04f0.png
diff --git a/dist/icon-envato.7630e502.png b/dist/icon-envato.7630e502.png
diff --git a/dist/icon-facebook.86eb40da.png b/dist/icon-facebook.86eb40da.png
diff --git a/dist/icon-instagram.0970cd14.png b/dist/icon-instagram.0970cd14.png
diff --git a/dist/icon-twitter.b35aa93f.png b/dist/icon-twitter.b35aa93f.png
diff --git a/dist/icon1.27545e44.png b/dist/icon1.27545e44.png
diff --git a/dist/icon2.317e0b36.png b/dist/icon2.317e0b36.png
diff --git a/dist/icon3.4867c354.png b/dist/icon3.4867c354.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en" class="page">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>digits</title>
+    <link rel="stylesheet" href="/main.48b3db1d.css">
+  <script src="/main.48b3db1d.js"></script></head>
+  <body class="page__body">
+    <header class="header">
+      <div class="header__space">
+        <a href="#burger" class="header__digits"></a>
+        <div class="header__menu">
+          <a href="#homepage" class="header__menu--item">Homepages</a>
+          <a href="#products" class="header__menu--item">Products</a>
+          <div class="header__menu--item header__menu--item-company">Company
+            <a href="#" class="header__menu--button"></a>
+          </div>
+          <a href="pricing" class="header__menu--item">Pricing</a>
+          <a href="#blog" class="header__menu--item">Blog</a>
+        </div>
+      </div>
+      <div class="header__contacts">
+        <a href="tel:00 123 456 789" class="header__contacts--tel">+00 123 456 789</a>
+        <a href="#" class="header__contacts--button">Contact Us</a>
+      </div>
+    </header>
+    <nav class="burgerMenu" id="burger">
+      <div class="burgerMenu__all">
+        <a href="#" class="burgerMenu__all-digits"></a>
+        <ul class="burgerMenu__all-box">
+          <li><a class="burgerMenu__all-box--item" href="#about-us">Homepages</a></li>
+          <li><a class="burgerMenu__all-box--item" href="#services">Products</a></li>
+          <li>
+            <div class="burgerMenu__all-box--item burgerMenu__all-box--item-company">Company
+              <form action="#">
+                <button class="burgerMenu__all-box--button"></button>
+              </form>
+            </div>
+          </li>
+          <li><a class="burgerMenu__all-box--item" href="#testimonials">Pricing</a></li>
+          <li><a class="burgerMenu__all-box--item" href="#contact-us">Blog</a></li>
+        </ul>
+      </div>
+    </nav>
+    <section class="titlePage">
+      <div class="titlePage__title">Good design meets <br>
+        great user experience
+      </div>
+      <div class="titlePage__text">For everyone, from beginners to experts</div>
+      <div class="titlePage__menu">
+        <a href="#" class="titlePage__menu--buy">Buy digits</a>
+        <a href="#" class="titlePage__menu--see">See the Features</a>
+      </div>
+      <div class="titlePage__images">
+        <div class="titlePage__images--layer1">
+          <div class="titlePage__images--layer1--1"></div>
+          <div class="titlePage__images--layer1--2"></div>
+          <div class="titlePage__images--layer1--3"></div>
+          <div class="titlePage__images--layer1--4"></div>
+        </div>
+        <div class="titlePage__images--layer2">
+          <div class="titlePage__images--layer2--4"></div>
+          <div class="titlePage__images--layer2--1"></div>
+          <div class="titlePage__images--layer2--2"></div>
+          <div class="titlePage__images--layer2--3"></div>
+          <div class="titlePage__images--layer2--5"></div>
+        </div>
+      </div>
+      <div class="titlePage__trust">Trusted by forward-thinking software teams around the world</div>
+      <div class="titlePage__sites">
+        <a href="https://www.netflix.com/" target="_blank" class="titlePage__sites--1">
+        </a>
+        <a href="https://drawkit.com/" target="_blank" class="titlePage__sites--2">
+        </a>
+        <a href="https://www.figma.com" target="_blank" class="titlePage__sites--3">
+        </a>
+        <a href="https://www.cinemax.com/" target="_blank" class="titlePage__sites--4">
+        </a>
+        <a href="https://stripe.com/" target="_blank" class="titlePage__sites--5">
+        </a>
+        <a href="https://www.google.com.ua/" target="_blank" class="titlePage__sites--6">
+        </a>
+        <a href="https://www.disney.com" target="_blank" class="titlePage__sites--7">
+        </a>
+      </div>
+    </section>
+    <section class="help">
+      <div class="help__title">
+        Whatever work you do,<br> we're able to help
+      </div>
+      <div class="help__people">
+        <div class="help__people--photos"></div>
+        <div class="help__people--description">
+          <div class="help__people--description-resume">
+            <div class="help__people--description-resume--icon help__people--description-resume--icon-1"></div>
+            <div class="help__people--description-resume--text">
+              <a href="#" class="help__people--description-resume--text-1">Design and Assets</a>
+              <div class="help__people--description-resume--text-2">Make your brand stand out with pixel-perfect design crafted to perfection.</div>
+            </div>
+          </div>
+          <div class="help__people--description-resume">
+            <div class="help__people--description-resume--icon help__people--description-resume--icon-2"></div>
+            <div class="help__people--description-resume--text">
+              <a href="#" class="help__people--description-resume--text-1">Easy Content</a>
+              <div class="help__people--description-resume--text-2">Import your demos or build pages visually. Bonus: All images and illustrations included!</div>
+            </div>
+          </div>
+          <div class="help__people--description-resume">
+            <div class="help__people--description-resume--icon help__people--description-resume--icon-3"></div>
+            <div class="help__people--description-resume--text">
+              <a href="#" class="help__people--description-resume--text-1">Fast and Reliablet</a>
+              <div class="help__people--description-resume--text-2">No heavy-weight plugins. No builders. No unneccesary file loading. Pure WordPress.</div>
+            </div>
+          </div>
+          <div class="help__people--description-content"></div>
+          <div class="help__people--description-fast"></div>
+        </div>
+      </div>
+    </section>
+    <section class="design">
+      <div class="design__title">Simplicity meets innovative design</div>
+      <div class="design__text">It's really easy to start using Digits. <br>
+        Install the theme, choose a demo and <br>
+        start designing the future of your business!
+      </div>
+      <a href="#" target="_blank" class="design__button">Buy Digits
+      </a>
+      <div class="design__sertificates">
+      </div>
+    </section>
+    <section class="talk">
+      <div class="talk__title">What others are saying</div>
+      <div class="talk__cards">
+        <div class="talk__card">
+          <div class="talk__card--text">Completely beautiful website and amazing support! This is my second website from this author and I love both of the sites so much and she has helped me so well when I needed it!</div>
+          <a href="#" class="talk__card--photo talk__card--photo-1"></a>
+          <div class="talk__card--name">Happy User</div>
+          <a href="#" class="talk__card--work">tempy.club</a>
+        </div>
+        <div class="talk__card">
+          <div class="talk__card--text">Really easy to use and customize. easy to understand. Darinka helped me with my site! She answers very quickly, a good service! Thank you very much!</div>
+          <a href="#" class="talk__card--photo talk__card--photo-2"></a>
+          <div class="talk__card--name">Happy User</div>
+          <a href="#" class="talk__card--work">tempy.club</a>
+        </div>
+        <div class="talk__card">
+          <div class="talk__card--text">Really pleasing to look at! Documentation (including installation instructions) are clear and that is coming from a relatively new WordPress user.</div>
+          <a href="#" class="talk__card--photo talk__card--photo-3"></a>
+          <div class="talk__card--name">Happy User</div>
+          <a href="#" class="talk__card--work">tempy.club</a>
+        </div>
+      </div>
+    </section>
+    <section class="ready">
+      <div class="ready__content">
+        <div class="ready__title">Ready to launch <br>
+          your next website?
+        </div>
+        <div class="ready__connect">
+          <a href="#" class="ready__connect--button">Get in touch now</a>
+          <div class="ready__connect--text">Or, take a peek inside our <a href="#" class="ready__connect--text-studio">design studio</a></div>
+        </div>
+      </div>
+    </section>
+    <section class="footer">
+      <div class="footer__top">
+        <div class="footer__top--digits">
+          <a href="#" class="footer__top--digits-title"></a>
+          <div class="footer__top--digits-text">
+            Digits is a website template built to work seamlesly with the WordPress block editor to create beautifully designed pages in minutes.
+          </div>
+        </div>
+        <div class="footer__top--pages">
+          <div class="footer__top--pages-title">Pages</div>
+          <div class="footer__top--pages-text">
+            <a href="#" class="footer__top--pages-link">Home</a>
+            <a href="#" class="footer__top--pages-link">About</a>
+            <a href="#" class="footer__top--pages-link">News</a>
+            <a href="#" class="footer__top--pages-link">Pricing</a>
+            <a href="#" class="footer__top--pages-link">Contact</a>
+          </div>
+        </div>
+        <div class="footer__top--pages">
+          <div class="footer__top--pages-title">Demos</div>
+          <div class="footer__top--pages-text">
+            <a href="#" class="footer__top--pages-link">Classic</a>
+            <a href="#" class="footer__top--pages-link">Boxy</a>
+            <a href="#" class="footer__top--pages-link">Gradient</a>
+            <a href="#" class="footer__top--pages-link">Minimal</a>
+            <a href="#" class="footer__top--pages-link">Night</a>
+          </div>
+        </div>
+        <div class="footer__top--pages">
+          <div class="footer__top--pages-title">Resources</div>
+          <div class="footer__top--pages-text">
+            <div class="footer__top--pages-network">
+              <a href="#" class="footer__top--pages-network--1"></a>
+              <a href="#" class="footer__top--pages-network--2"></a>
+              <a href="#" class="footer__top--pages-network--3"></a>
+              <a href="#" class="footer__top--pages-network--4"></a>
+              <a href="#" class="footer__top--pages-network--5"></a>
+            </div>
+            <a href="#" class="footer__top--pages-link">Download now</a>
+            <a href="#" class="footer__top--pages-link">Documentation</a>
+          </div>
+        </div>
+      </div>
+      <div class="footer__bottom">
+        <div class="footer__bottom--left">Copyright © 2020 tempy.club</div>
+        <div class="footer__bottom--right">
+          <a href="#" class="footer__bottom--right-link">Privacy Policy</a>
+          <a href="#" class="footer__bottom--right-link">Terms of Use</a>
+          <a href="#" class="footer__bottom--right-link">GDPR</a>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/dist/logo-1.60cd8b1b.png b/dist/logo-1.60cd8b1b.png
diff --git a/dist/logo-2.8e08b1d0.png b/dist/logo-2.8e08b1d0.png
diff --git a/dist/logo-3.7f27f1e7.png b/dist/logo-3.7f27f1e7.png
diff --git a/dist/logo-4.818c8707.png b/dist/logo-4.818c8707.png
diff --git a/dist/logo-5.a4f7950b.png b/dist/logo-5.a4f7950b.png
diff --git a/dist/logo-6.038958a3.png b/dist/logo-6.038958a3.png
diff --git a/dist/logo-7.22cb7de1.png b/dist/logo-7.22cb7de1.png
diff --git a/dist/logo.86da442c.png b/dist/logo.86da442c.png
diff --git a/dist/logo.b6c3db61.svg b/dist/logo.b6c3db61.svg
diff --git a/dist/mail.a724387c.png b/dist/mail.a724387c.png
diff --git a/dist/main.4d2fda15.css b/dist/main.4d2fda15.css
diff --git a/dist/main.4d2fda15.css.map b/dist/main.4d2fda15.css.map
diff --git a/dist/sert_all.474b721f.png b/dist/sert_all.474b721f.png
diff --git a/dist/triangle.efed7dc0.png b/dist/triangle.efed7dc0.png
diff --git a/dist/ui.c5bb37c1.png b/dist/ui.c5bb37c1.png
diff --git a/dist/woman.fbc4457f.png b/dist/woman.fbc4457f.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ node_modules @@
     # Generated files
     backstop_data
     dist
+    .cache