diff --git a/package-lock.json b/package-lock.json
index 9570b3c..4143ad6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,9 @@
},
"devDependencies": {
"copy-webpack-plugin": "^13.0.0",
+ "css-loader": "^7.1.2",
"html-webpack-plugin": "^5.6.3",
+ "style-loader": "^4.0.0",
"ts-loader": "^9.5.2",
"typescript": "^5.8.2"
}
@@ -660,6 +662,42 @@
"node": ">= 8"
}
},
+ "node_modules/css-loader": {
+ "version": "7.1.2",
+ "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
+ "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "icss-utils": "^5.1.0",
+ "postcss": "^8.4.33",
+ "postcss-modules-extract-imports": "^3.1.0",
+ "postcss-modules-local-by-default": "^4.0.5",
+ "postcss-modules-scope": "^3.2.0",
+ "postcss-modules-values": "^4.0.0",
+ "postcss-value-parser": "^4.2.0",
+ "semver": "^7.5.4"
+ },
+ "engines": {
+ "node": ">= 18.12.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "@rspack/core": "0.x || 1.x",
+ "webpack": "^5.27.0"
+ },
+ "peerDependenciesMeta": {
+ "@rspack/core": {
+ "optional": true
+ },
+ "webpack": {
+ "optional": true
+ }
+ }
+ },
"node_modules/css-select": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -690,6 +728,19 @@
"url": "https://github.com/sponsors/fb55"
}
},
+ "node_modules/cssesc": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "cssesc": "bin/cssesc"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -1161,6 +1212,19 @@
"entities": "^2.0.0"
}
},
+ "node_modules/icss-utils": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+ "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+ "dev": true,
+ "license": "ISC",
+ "engines": {
+ "node": "^10 || ^12 || >= 14"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
"node_modules/import-local": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -1426,6 +1490,25 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/nanoid": {
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
"node_modules/neo-async": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -1594,6 +1677,119 @@
"node": ">=8"
}
},
+ "node_modules/postcss": {
+ "version": "8.5.3",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+ "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "nanoid": "^3.3.8",
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/postcss-modules-extract-imports": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+ "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+ "dev": true,
+ "license": "ISC",
+ "engines": {
+ "node": "^10 || ^12 || >= 14"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
+ "node_modules/postcss-modules-local-by-default": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+ "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "icss-utils": "^5.0.0",
+ "postcss-selector-parser": "^7.0.0",
+ "postcss-value-parser": "^4.1.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >= 14"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
+ "node_modules/postcss-modules-scope": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+ "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "postcss-selector-parser": "^7.0.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >= 14"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
+ "node_modules/postcss-modules-values": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+ "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "icss-utils": "^5.0.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >= 14"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
+ "node_modules/postcss-selector-parser": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+ "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/postcss-value-parser": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/pretty-error": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -1803,6 +1999,16 @@
"node": ">=0.10.0"
}
},
+ "node_modules/source-map-js": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+ "dev": true,
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/source-map-support": {
"version": "0.5.21",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -1826,6 +2032,23 @@
"node": ">=8"
}
},
+ "node_modules/style-loader": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
+ "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 18.12.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "webpack": "^5.27.0"
+ }
+ },
"node_modules/supports-color": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -2046,6 +2269,13 @@
"browserslist": ">= 4.21.0"
}
},
+ "node_modules/util-deprecate": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/utila": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
diff --git a/package.json b/package.json
index 0d43f48..7df490b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
},
"devDependencies": {
"copy-webpack-plugin": "^13.0.0",
+ "css-loader": "^7.1.2",
"html-webpack-plugin": "^5.6.3",
+ "style-loader": "^4.0.0",
"ts-loader": "^9.5.2",
"typescript": "^5.8.2"
}
diff --git a/src/images/img.png b/src/images/img.png
new file mode 100644
index 0000000..e36142a
Binary files /dev/null and b/src/images/img.png differ
diff --git a/src/images/img_1.png b/src/images/img_1.png
new file mode 100644
index 0000000..903e9b3
Binary files /dev/null and b/src/images/img_1.png differ
diff --git a/src/index.hbs b/src/index.hbs
index 9068be7..c36d3de 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -1,6 +1,7 @@
{{#> views/layout}}
{{> views/header }}
<main>
+ {{> views/main-banner.html }}
{{> views/carusel }}
</main>
{{/views/layout}}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index d844d91..ea01f13 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,6 @@
body {
margin: 0;
+ overflow-x: hidden;
}
html {
@@ -14,7 +15,8 @@ html {
}
.container {
- padding: 0 97px;
+ padding-left: 97px;
+ padding-right: 97px;
}
.button {
@@ -28,7 +30,12 @@ html {
line-height: 24px;
text-transform: uppercase;
cursor: pointer;
- border: none;
+ border: 1.5px solid #000000;
+}
+
+.button-secondary {
+ background-color: white;
+ color: #000000;
}
.button[disabled] {
@@ -40,6 +47,8 @@ html {
display: flex;
align-items: center;
font-family: var(--font-inter);
+ padding-top: 45px;
+ padding-bottom: 45px;
}
.logo {
@@ -99,7 +108,7 @@ html {
border-radius: 24px;
width: 100%;
aspect-ratio: 1;
- background: center / cover no-repeat url('https://s3-alpha-sig.figma.com/img/b82f/55d0/61c522d86567e3c5ea1f39ddf68ae4bc?Expires=1743379200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UlO4-Fsc27zhQo9T9Tl8fhCSVyxM4GHu6DkUtWgi881ggrnY9uHKNdVvhg2GuSS7ItYldxw9FhYRjgcBrwKBvnf4XLjw8YjkZ8584NLVxfH-POsN8O2eh9gyxEBEgaF~AVwwnNmnRpPN2JFnfcRUIihkRrhZA7IjDRxNY1CbPHB5j~AP9wlWhI6P2TqaXaJj~8JRZPx1YBpGWfrSCgLfgQejNNi58FvkkX1Hkvm0aICdebCSqwFrq~sLI6Rbj5H-QgF~2AxU3EGiBzdaCvMXfBx3xpZIvHGkuSeYlhdlU-KFNmjF9u3VPg7c5S~IvPMIOmvWhwX-GguAGxPZe4tksw__'), #F8F8F8;
+ background: center / cover no-repeat url('./images/img.png'), #F8F8F8;
}
.nft-card__content {
@@ -178,4 +187,27 @@ html {
.nft-card-container .nft-card {
flex-shrink: 0;
-}
\ No newline at end of file
+}
+
+.lr-button {
+ width: 166px;
+ height: 69px;
+ box-shadow: 0px 43.12px 34.49px -25.87px #0F0F0F1F;
+ display: flex;
+ align-items: center;
+ background: #FCFCFD;
+ border-radius: 17.25px;
+}
+.lr-button button {
+ width: 100%;
+ border: none;
+ background: none;
+}
+.lr-button-delimiter {
+ width: 2px;
+ height: 25px;
+ background: #E6E8EC;
+ flex-shrink: 0;
+}
+
+@import "views/main-banner.css";
\ No newline at end of file
diff --git a/src/views/header.hbs b/src/views/header.hbs
index 086bbdb..79bec88 100644
--- a/src/views/header.hbs
+++ b/src/views/header.hbs
@@ -1,5 +1,5 @@
<header class="header container">
- <a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
+ <a href="index.html"><img class="logo" src="./images/logo.svg" alt=""></a>
<nav>
<ul class="nav-list">
<li><a href="./discover.html">Discover</a></li>
diff --git a/src/views/main-banner.css b/src/views/main-banner.css
new file mode 100644
index 0000000..949c42f
--- /dev/null
+++ b/src/views/main-banner.css
@@ -0,0 +1,115 @@
+.hero {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ padding-top: 54px;
+ padding-bottom: 143px;
+}
+
+.hero-main {
+ margin-right: 48px;
+}
+
+.hero-line {
+ width: 195px;
+ border-top: 1px solid #201F1F;
+ opacity: 0.2;
+ margin-top: 12px;
+}
+
+.hero-title {
+ margin-top: 10px;
+ margin-bottom: 12px;
+ font-weight: 600;
+ font-size: 75px;
+ line-height: 120%;
+ letter-spacing: -3px;
+}
+
+.hero-description {
+ font-family: var(--font-inter);
+ padding: 0;
+
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 28px;
+ letter-spacing: 0px;
+ text-align: justify;
+}
+
+.hero-description__bold {
+ font-weight: 600;
+}
+
+.hero-buttons {
+ margin-top: 45px;
+ display: flex;
+ gap: 23px;
+}
+
+.hero-cub1 {
+ position: relative;
+ width: 391px;
+ height: 394px;
+ border-radius: 25px;
+ background: center / cover no-repeat url('../images/img.png'), #F8F8F8;
+}
+.hero-cub1::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ border-radius: 25px;
+ background: center / cover no-repeat url('../images/img.png'), #F8F8F8;
+ transform: translateY(25px);
+
+ filter: blur(83.7px);
+}
+
+.hero-cub2 {
+ position: absolute;
+ top: 181px;
+ left: calc(100% + 38px);
+ width: 320px;
+ height: 322px;
+ border-radius: 25px;
+ background: center / cover no-repeat url('../images/img_1.png'), #F8F8F8;
+}
+.hero-cub2::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ border-radius: 25px;
+ background: center / cover no-repeat url('../images/img_1.png'), #F8F8F8;
+ transform: translateY(25px);
+
+ filter: blur(83.7px);
+}
+
+.cub1-arrow {
+ position: absolute;
+ left: calc(100% + 23px);
+ top: 41px;
+ transform: rotate(-3.08deg);
+}
+
+.hero-dots {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: -1;
+}
+
+.hero-cubs {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-self: start;
+}
+
+.hero-cubs .lr-button {
+ margin-top: 71px;
+}
\ No newline at end of file
diff --git a/src/views/main-banner.html b/src/views/main-banner.html
new file mode 100644
index 0000000..7cc39ce
--- /dev/null
+++ b/src/views/main-banner.html
@@ -0,0 +1,203 @@
+<div class="container hero">
+ <div class="hero-main">
+ <div class="hero-line"></div>
+ <h1 class="hero-title">Discover And Create NFTs</h1>
+ <p class="hero-description">Discover, Create and Sell NFTs On Our NFT Marketplace With Over Thousands Of NFTs
+ And Get a <span class="hero-description__bold">$20 bonus</span>.</p>
+ <div class="hero-buttons">
+ <button class="button">Explore More</button>
+ <button class="button button-secondary">create NFT</button>
+ </div>
+ </div>
+ <div>
+ <div class="hero-cubs">
+ <div class="hero-cub1">
+ <svg class="cub1-arrow" width="131" height="136" viewBox="0 0 131 136" fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.6507 43.2949C32.4339 30.7255 51.9743 23.0115 72.683 28.6293C91.3749 33.7001 103.143 49.6308 90.5396 69.3323C84.5735 78.6586 71.8706 85.1866 61.8852 79.874C50.7606 73.9554 59.5288 59.017 66.6505 54.7089C83.2839 44.6468 106.696 49.3237 118.212 68.8676C131.849 92.0121 108.785 103.532 108.769 103.344"
+ stroke="black" stroke-width="3.37884" stroke-miterlimit="1.5" stroke-linecap="round"
+ stroke-linejoin="round"/>
+ <path d="M19.2682 18.3819C19.8774 20.8064 19.5256 23.2335 19.2862 25.677C18.5006 33.7006 15.3552 42.0307 9.71151 47.2931C17.1379 44.0369 27.7921 42.6188 34.5374 48.3345"
+ stroke="black" stroke-width="3.37884" stroke-miterlimit="1.5" stroke-linecap="round"
+ stroke-linejoin="round"/>
+ </svg>
+ <div class="hero-cub2"></div>
+ </div>
+ <div class="lr-button">
+ <button class="lr-button-left"><svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2397 8.39036C10.8023 7.98657 10.1203 8.01384 9.71654 8.45128L6.23402 12.224C5.85287 12.6369 5.85287 13.2733 6.23401 13.6862L9.71653 17.459C10.1203 17.8965 10.8023 17.9237 11.2397 17.5199C11.6772 17.1161 11.7045 16.4342 11.3007 15.9967L9.48802 14.033L19.9611 14.033C20.5565 14.033 21.0391 13.5504 21.0391 12.9551C21.0391 12.3598 20.5565 11.8772 19.9611 11.8772L9.48805 11.8772L11.3007 9.91356C11.7044 9.47612 11.6772 8.79416 11.2397 8.39036Z" fill="#929292"/>
+ </svg>
+ </button>
+ <div class="lr-button-delimiter"></div>
+ <button class="lr-button-right"><svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7603 8.39036C16.1977 7.98657 16.8797 8.01384 17.2835 8.45128L20.766 12.224C21.1471 12.6369 21.1471 13.2733 20.766 13.6862L17.2835 17.459C16.8797 17.8965 16.1977 17.9237 15.7603 17.5199C15.3228 17.1161 15.2955 16.4342 15.6993 15.9967L17.512 14.033L7.03886 14.033C6.44354 14.033 5.96094 13.5504 5.96094 12.9551C5.96094 12.3598 6.44354 11.8772 7.03886 11.8772L17.5119 11.8772L15.6993 9.91356C15.2956 9.47612 15.3228 8.79416 15.7603 8.39036Z" fill="#23262F"/>
+ </svg>
+ </button>
+ </div>
+ </div>
+
+ <svg class="hero-dots" width="120" height="400" viewBox="0 0 120 400" fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <g opacity="0.5">
+ <rect y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="207.423" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="226.36" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="245.3" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="264.238" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="283.176" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="302.114" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="321.052" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="339.989" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="339.991" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="339.991" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="339.991" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="339.991" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="339.991" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="339.991" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="358.929" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="377.866" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="396.805" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="396.806" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="396.806" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="396.806" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="396.806" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="396.806" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="396.806" width="2.83607" height="2.84073" fill="black"/>
+ </g>
+ <g opacity="0.5">
+ <rect width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="37.877" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="113.629" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="132.566" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="132.568" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="132.568" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="132.568" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="132.568" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="132.568" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="132.568" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="151.506" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="170.443" width="2.83607" height="2.84073" fill="black"/>
+ <rect y="189.382" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="18.9062" y="189.383" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="37.8145" y="189.383" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="56.7217" y="189.383" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="75.6279" y="189.383" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="94.5361" y="189.383" width="2.83607" height="2.84073" fill="black"/>
+ <rect x="113.443" y="189.383" width="2.83607" height="2.84073" fill="black"/>
+ </g>
+ </svg>
+
+
+ </div>
+</div>
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 662787c..4e42d06 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,10 +16,17 @@ module.exports = {
rules: [
{ test: /\.(ts|tsx)$/, loader: "ts-loader" },
{
- test: /\.hbs$/,
+ test: /\.hbs|html$/,
loader: 'handlebars-loader',
},
- ]
+ {
+ test: /\.css$/i,
+ use: [
+ { loader: "style-loader" },
+ { loader: "css-loader" },
+ ],
+ },
+ ],
},
plugins: [
new HtmlWebpackPlugin({
@@ -36,7 +43,6 @@ module.exports = {
}),
new CopyPlugin({
patterns: [
- {from: "./src/style.css", to: "style.css"},
{from: "./src/images", to: "images"},
],
})