add webpack
This commit is contained in:
grinikita
parent
0f2c268452
commit
1597b52310
4
.gitignore
vendored
4
.gitignore
vendored
@ -1 +1,3 @@
|
||||
.idea
|
||||
.idea
|
||||
node_modules
|
||||
dist
|
||||
189
dist/index.html
vendored
Normal file
189
dist/index.html
vendored
Normal file
@ -0,0 +1,189 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="index.js"></script></head>
|
||||
<body>
|
||||
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container">
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left">left</button>
|
||||
<button class="button btn-right">right</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
style.css → dist/style.css
vendored
0
style.css → dist/style.css
vendored
1883
package-lock.json
generated
Normal file
1883
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "html",
|
||||
"version": "1.0.0",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=development",
|
||||
"dev": "webpack --mode=development --watch"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"webpack": "^5.98.0",
|
||||
"webpack-cli": "^6.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"html-webpack-plugin": "^5.6.3"
|
||||
}
|
||||
}
|
||||
@ -11,11 +11,11 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../dist/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<a href="../dist/index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
@ -11,11 +11,11 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../dist/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<a href="../dist/index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
@ -18,13 +18,13 @@
|
||||
<body>
|
||||
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
<li><a href="creators.html">creators</a></li>
|
||||
<li><a href="creators.html">Sell</a></li>
|
||||
<li><a href="creators.html">stats</a></li>
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
@ -185,6 +185,5 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,9 @@
|
||||
const name = 'File'
|
||||
|
||||
import { name as name2 } from './index2.js'
|
||||
|
||||
console.log('From index.js log name', name2)
|
||||
|
||||
const btnLeft = document.querySelector('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector('.top-nft .btn-right')
|
||||
const container = document.querySelector('.nft-card-container')
|
||||
@ -25,4 +31,4 @@ btnLeft.addEventListener('click', () => {
|
||||
|
||||
btnRight.addEventListener('click', () => {
|
||||
moveContainer(-285)
|
||||
})
|
||||
})
|
||||
1
src/index2.js
Normal file
1
src/index2.js
Normal file
@ -0,0 +1 @@
|
||||
export const name = "Vasya"
|
||||
177
src/style.css
Normal file
177
src/style.css
Normal file
@ -0,0 +1,177 @@
|
||||
html {
|
||||
--color-dark: #141416;
|
||||
--text-dark: var(--color-dark);
|
||||
--text-light: #FFFFFF;
|
||||
|
||||
--font-poppins: "Poppins", sans-serif;
|
||||
--font-inter: "Inter", sans-serif;
|
||||
|
||||
font-family: var(--font-poppins);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 97px;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: var(--font-poppins);
|
||||
padding: 16px 24px;
|
||||
background-color: var(--color-dark);
|
||||
border-radius: 16px;
|
||||
color: var(--text-light);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
background: #94A3B8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-inter);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: 57px;
|
||||
}
|
||||
|
||||
.header .button {
|
||||
margin-left: auto;
|
||||
font-family: var(--font-inter);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #606060;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: flex;
|
||||
gap: 53px;
|
||||
}
|
||||
|
||||
.header a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.top-nft {
|
||||
padding: 70px 0 90px;
|
||||
background: #F1F1F1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-nft__title {
|
||||
font-weight: 600;
|
||||
font-size: 45px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0;
|
||||
color: #C5C5C5;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.nft-card {
|
||||
width: 282px;
|
||||
padding: 14px 14px 20px;
|
||||
box-shadow: 38.82px 11.76px 58.81px 0px #C7C7C799;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.nft-card__img {
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
.nft-card__content {
|
||||
padding: 0 4px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.nft-card__title {
|
||||
font-family: var(--font-poppins);
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
line-height: 140%;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.nft-card__footer {
|
||||
display: flex;
|
||||
}
|
||||
.nft-card__footer > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nft-card__description {
|
||||
color: #94A3B8;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.12px;
|
||||
vertical-align: middle;
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nft-card__price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
.nft-card__price {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.nft-card__time {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 9px;
|
||||
|
||||
background: #1C1D2059;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #1C1D2014;
|
||||
backdrop-filter: blur(4.7px);
|
||||
box-shadow: 0 4.71px 14.12px 0 #1C1D2014;
|
||||
|
||||
padding: 8px 14px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.nft-card-container {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
|
||||
transition: transform 0.3s linear;
|
||||
}
|
||||
|
||||
.nft-card-container .nft-card {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
24
webpack.config.js
Normal file
24
webpack.config.js
Normal file
@ -0,0 +1,24 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
filename: 'index.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true
|
||||
},
|
||||
module: {},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "./src/index.html"
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{from: "./src/style.css", to: "style.css"},
|
||||
{from: "./src/images", to: "images"},
|
||||
],
|
||||
})
|
||||
]
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user