diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..20af20a --- /dev/null +++ b/css/style.css @@ -0,0 +1,112 @@ +body{ + margin: 0 auto; + padding: 0; + border: 0; + background-color: #f6faf7 ; + +} + +.h1header{ + height: 100px; + line-height: 100px; + background-color: #034956 ; + color: #f6faf7; + text-align: center; + +} + +.cards{ + width: 1200px; + display: grid; + grid-template-columns: auto auto auto; + margin: 0 auto; + +} + + + + +.card { + --card-gradient: rgba(0, 0, 0, 0.8); + --card-gradient: #5e9ad9, #e271ad; + // --card-gradient: tomato, orange; + --card-blend-mode: overlay; + // --card-blend-mode: multiply; + + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45); + padding-bottom: 1rem; + background-image: linear-gradient( + var(--card-gradient), + white max(9.5rem, 27vh) + ); + overflow: hidden; + + img { + border-radius: 0.5rem 0.5rem 0 0; + width: 100%; + object-fit: cover; + // height: max(10rem, 25vh); + max-height: max(10rem, 30vh); + aspect-ratio: 4/3; + mix-blend-mode: var(--card-blend-mode); + // filter: grayscale(100); + + ~ * { + margin-left: 1rem; + margin-right: 1rem; + } + } + + > :last-child { + margin-bottom: 0; + } + + &:hover, + &:focus-within { + --card-gradient: #24a9d5 max(8.5rem, 20vh); + } + } + + /* Additional demo display styles */ + * { + box-sizing: border-box; + } + + body { + display: grid; + /*place-content: center;*/ + justify-items: center; + min-height: 100vh; + margin: 0; + padding: 1rem; + line-height: 1.5; + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, + helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif; + color: #444; + background-color: #e1faf1; + } + + .card h3 { + margin-top: 1rem; + font-size: 1.25rem; + } + + .card a { + color: inherit; + } + + .card-wrapper { + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr)); + grid-gap: 1.5rem; + max-width: 100vw; + width: 120ch; + padding-left: 1rem; + padding-right: 1rem; + } + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e5f3dfa --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + + 3d Detals + + + +
+ +
+ +

Каталог печатных 3д деталей

+
+ + +
+ + + + + + + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e69de29