Advertisement
  1. Web Design
  2. HTML/CSS
  3. Landing Pages

Készítsd egy "Hamarosan érkezik" oldalt 60 másodpercben

Scroll to top
Read Time: 1 min
This post is part of a series called 60 Second Video Tutorials.
Adobe XD in 60 Seconds
Create a Lo-fi UI Prototype in 60 Seconds

() translation by (you can also view the original English article)

Nézzük meg, hogyan készítsünk egy "Hamarosan érkezik" oldalt a Themeforest Timex HTML sablonjának használhatával.

Kezdd a számlálóval

Itt van, miről is lesz szó a következőkben:

TimexTimexTimex
Timex a Themeforesten

Először is, keress egy neked tetsző háttérképet olyan oldalon, mint pl. az unsplash.com, szerkeszd át 1920x1080-as méretre, majd cseréld le a "logo_only.png" és "logo_large.png" képeket a sablon "img" könyvtárában.

Megjegyzés: mindkettőnek transzparens háttérrel kell rendelkeznie.

Add hozzá a három új képed a sablon "img" könyvtárához, lecserélve a régi képeket.

Most nézd meg a sablon index.html fájlját, s láthatod az új képeket a helyükön.

Szerkeszd az Index fájlt

Most meg kell nyitnunk az említett index.html fájlt, s szerkeszteni a kódot. Cserélj ki minden leíró szöveget amit csak találsz, a saját üzleted vagy terméked leírásával. Légy biztos benne, hogy szerkeszted a kapcsolatfelvételei adatokat, köztük az email címeddel, a postacímeddel, a telefonszámoddal, a webcímeddel és bármilyen közösségi média linkeddel.

A dátum beállítása

Keresd meg az órát a visszaszámlálás idejével:

1
data-date="12/30/2016 00:00:00"

Cseréld le egy jövőbeni dátumra, majd frissítsd az oldalt a böngészőben. Így láthatod, hogy a visszaszámlálás működik, s az egész "hamarosan érkezik" oldal teljes.

Készen is van!

Ez volt, hogyan készíts egy "hamarosan érkezik" oldalt hatvan másodpercben. Nézz körül a legjobban fogyó Hamarosan érkezik sablonok között a Themeforesten:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.