diff --git a/300x600/background.jpg b/300x600/background.jpg new file mode 100644 index 0000000..4fa0476 Binary files /dev/null and b/300x600/background.jpg differ diff --git a/300x600/badge.png b/300x600/badge.png new file mode 100644 index 0000000..e5492d8 Binary files /dev/null and b/300x600/badge.png differ diff --git a/300x600/index.html b/300x600/index.html new file mode 100644 index 0000000..7f37991 --- /dev/null +++ b/300x600/index.html @@ -0,0 +1,52 @@ + + + + N.E.B.E. + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+ 5 year warranty +
+
+ +
+
€
+
+ +
+
+ + +
+ +
+
+
+ + +
+ + + + + + + diff --git a/300x600/logo.png b/300x600/logo.png new file mode 100644 index 0000000..707e583 Binary files /dev/null and b/300x600/logo.png differ diff --git a/300x600/style.scss b/300x600/style.scss new file mode 100644 index 0000000..d1dffa0 --- /dev/null +++ b/300x600/style.scss @@ -0,0 +1,168 @@ +@import '../assets/main'; + +$width: 300px; +$height: 600px; + +.wrapper { + width: $width; + height: $height; + overflow: hidden; + font-family: DINProBold, sans-serif; + + &:hover { + .cta { + transform: scale(1.1); + } + } +} + +.background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(180deg, rgba(106,228,168,1) 0%, rgba(195,244,220,1) 100%); +} + +.content { + width: 286px; + position: absolute; + top: 5px; + left: 6px; + height: 190px; + text-align: center; + padding: 0 20px; +} + +.headline { + max-height: 2.4em; + margin-top: 20px; + font-family: CallingCodeBold, sans-serif; + color: #22a875; + font-size: 26px; + font-weight: 700; + line-height: 1.2; + overflow: hidden; +} + +.subheadline { + font-family: DINProBold, sans-serif; + color: #4f46de; + font-size: 22px; + font-weight: 400; + margin-top: 30px; +} + +.product-wrapper { + position: relative; + top: 180px; + left: calc((300px - 150px) / 2); + width: 150px; + height: 160px; +} + +.product { + position: absolute; + top: 5px; + width: 100%; + height: 100%; + + &__price { + position: absolute; + top: 340px; + right: 0; + font-family: DINProBold, sans-serif; + font-size: 27px; + font-weight: 800; + line-height: 1; + background-image: url("../assets/flag-orange.svg"); + background-size: cover; + background-position: left; + background-repeat: no-repeat; + padding: 10px 10px 10px 30px; + color: $color-white; + overflow: hidden; + white-space: nowrap; + backface-visibility: hidden; + } + + &__badge { + position: absolute; + top: 20px; + left: -50px; + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + border-radius: 50%; + background: url("badge.png"); + background-size: contain; + overflow: hidden; + padding: 25px; + text-align: center; + z-index: 3; + + &-text { + font-size: 12px; + font-weight: 700; + letter-spacing: -0.025em; + line-height: 1.2; + text-transform: uppercase; + color: $color-white; + } + } +} + +.countdown { + position: absolute; + top: 405px; + left: 50%; + transform: translateX(-50%); + min-width: 230px; + color: #1c0c3e; + font-family: CallingCodeBold, sans-serif; + text-align: center; + + &__description { + font-size: 18px; + font-weight: bold; + } + + &__timer { + display: inline-block; + margin-top: 5px; + min-width: 220px; + font-size: 22px; + white-space: nowrap; + } +} + +.cta { + position: absolute; + top: 490px; + left: calc((300px - 160px) / 2); + width: 160px; + z-index: 1; + transition: transform 0.4s ease-in-out; + will-change: transform; + + &__inner { + position: relative; + width: 100%; + height: 48px; + background-color: #4f46de; + display: inline-block; + text-align: center; + line-height: 48px; + font-weight: 700; + color: $color-white; + } +} + +.logo { + position: absolute; + bottom: 10px; + right: 20px; +} diff --git a/README.md b/README.md index f2d5bf2..3cbfa4a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ -# image - +# Ukázková šablona pro image kreativy diff --git a/assets/flag-orange.svg b/assets/flag-orange.svg new file mode 100644 index 0000000..bc2d246 --- /dev/null +++ b/assets/flag-orange.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/assets/main.scss b/assets/main.scss new file mode 100644 index 0000000..f146da3 --- /dev/null +++ b/assets/main.scss @@ -0,0 +1,47 @@ +$color-white: #ffffff; +$color-black: #000000; +$color-red: #ff0000 ; + +@font-face { + font-family: DINProRegular; + src: url(https://cdn.nebe.app/demo/fonts/DINPro-Regular.ttf) format("truetype"); +} + +@font-face { + font-family: DINProBold; + src: url(https://cdn.nebe.app/demo/fonts/DINPro-Bold.ttf) format("truetype"); +} + +@font-face { + font-family: CallingCodeBold; + src: url(https://cdn.nebe.app/demo/fonts/callingcode-bold.otf) format("opentype"); +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + overflow: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wrapper { + position: relative; + display: block; + font-family: 'Roboto', sans-serif; + color: $color-white; +} + +a { + display: inline-block; +} + +.product { + background-position: center center; + background-repeat: no-repeat; + background-size: contain; +} diff --git a/assets/scripts.js b/assets/scripts.js new file mode 100644 index 0000000..eac0ece --- /dev/null +++ b/assets/scripts.js @@ -0,0 +1,40 @@ +window.FILL = (inputs) => { + window.creative = new Creative(inputs); + + window.clickTag = inputs.link; + document.querySelector('a').setAttribute('href', window.clickTag); +}; + +function Creative(inputs) { + this.inputs = inputs; + this.backgroundeEl = document.querySelector('.background'); + this.headlineEl = document.querySelector('.headline'); + this.modellEl = document.querySelector('.model'); + this.badgeEl = document.querySelector('.product__badge'); + this.priceEl = document.getElementById('price'); + this.countdownTextEl = document.querySelector('.countdown__description'); + this.countdownDateEl = document.getElementById('countdown'); + this.ctaEl = document.querySelector('.cta__inner'); + + this.backgroundeEl.style.background = this.inputs.background; + this.headlineEl.innerHTML = this.inputs.headline; + this.modellEl.innerHTML = this.inputs.model; + this.countdownTextEl.innerHTML = this.inputs.countdown_text; + this.countdownDateEl.innerHTML = this.inputs.countdown_date; + this.ctaEl.innerHTML = this.inputs.cta; + + if (this.inputs.badge === 'Ano') { + this.badgeEl.style.display = 'flex'; + } else { + this.badgeEl.style.display = 'none'; + } + + document.querySelector('[data-product-price]').innerHTML = this.inputs.price; + + document.querySelector('.product').style.backgroundImage = `url("${this.inputs.image_link}")`; + + if (!document.querySelector('.product').style.backgroundImage.length) { + throw new Error('Image is not inserted into template'); + } +} + diff --git a/config.json b/config.json new file mode 100644 index 0000000..9449654 --- /dev/null +++ b/config.json @@ -0,0 +1,9 @@ +{ + "name": "Demo Image", + "description": "Template for image campaigns", + "tags": [ + "Demo", + "Template" + ], + "format": "image" +} diff --git a/schema.json b/schema.json new file mode 100644 index 0000000..72a1a4e --- /dev/null +++ b/schema.json @@ -0,0 +1,57 @@ +{ + "background": { + "label": "Background CSS", + "description": "Příklad: rgba(106,228,168,1)", + "value": "linear-gradient(180deg, rgba(106,228,168,1) 0%, rgba(195,244,220,1) 100%)", + "prefill": true + }, + "headline": { + "label": "Nadpis", + "value": "Kitty financial services", + "prefill": true + }, + "model": { + "label": "Model", + "value": "Maneki-neko cat", + "prefill": true + }, + "badge": { + "label": "Zobrazit badge", + "value": "Ano", + "type": "enum", + "options": [ + "Ano", + "Ne" + ], + "prefill": true + }, + "image_link": { + "label": "URL obrázku", + "type": "url", + "value": "https://cdn.nebe.app/demo/print/product.svg" + }, + "price": { + "label": "Cena", + "value": "80" + }, + "countdown_text": { + "label": "Text: Kdy končí nabídka", + "value": "Offer expires on", + "prefill": true + }, + "countdown_date": { + "label": "Hodnota: Kdy končí nabídka", + "value": "30. 6. 2020 v 18hod", + "prefill": true + }, + "cta": { + "label": "Text CTA tlačítka", + "value": "Buy", + "prefill": true + }, + "link": { + "label": "Odkaz", + "value": "https://www.nebe.app/app", + "prefill": true + } +}