diff --git a/index.html b/index.html new file mode 100644 index 0000000..c4d100a --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + Digital Marketing Projects + + + + +

Digital Marketing

+ +
+
+ +

Newsletter Widget

+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..b3b224f --- /dev/null +++ b/main.js @@ -0,0 +1,5 @@ +"use strict"; + +function onCardClick(path) { + window.open(path, "_self"); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..37f0758 --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "lato", sans-serif; +} + +body { + color: white; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + padding: 60px; + background: linear-gradient(to right bottom, #7ed56f, #28b485); +} + +h1 { + font-size: 3.5rem; + font-weight: 400; + margin-bottom: 5.5rem; + letter-spacing: 0.25rem; + text-align: center; +} + +h4 { + letter-spacing: 0.125rem; +} + +section { + display: grid; + justify-items: start; + grid-auto-rows: 315px; + grid-template-columns: repeat(auto-fill, 500px); +} + +.card { + position: relative; + display: flex; + cursor: pointer; + flex-direction: column; + align-items: center; + gap: 8px; + width: 100%; + height: 100%; + transition: transform 300ms; +} + +iframe { + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 12px; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); +} + +.card::after { + content: ""; + position: absolute; + display: block; + width: 100%; + height: 100%; +} + +.card:hover { + transform: translateY(-1.5rem) scale(1.03); +}