Brzina - pouzdanost - kvalitet

Trick 15 - Dizajniran cenovnik - TIP 2



English

Nazad


Dizajniran cenovnik - TIP 2


Jednostavan i pregledan cenovnik i vidu tabela gde se odredjena tabela kroz stilove ističe dizajnom. Svaki div tag je posebna tabela sa svojim stilovima i veoma efektno se može iskorisiti za cenovnike uz tabelarni prikaz šta je uključeno uz svaki paket. Preko stilova boje se mogu menjati, vrsta fonta, boja fonta itd.

Head


<style type="text/css">
.cenovnik {
  font-family: Arial, sans-serif;
  color: #000000;
  text-align: center;
  font-size: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 40px 10px;
}
.cenovnik .plan {
  margin: 0;
  width: 33%;
  position: relative;
  float: left;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.cenovnik .plan:first-of-type {
  border-radius: 8px 0 0 8px;
}
.cenovnik .plan:last-of-type {
  border-radius: 0 8px 8px 0;
}
.cenovnik * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.cenovnik .plan-title {
  font-weight: 800;
  padding: 15px;
  margin: 0;
  background: rgba(0, 0, 0, 0.08);
  color: #595959;
  text-transform: uppercase;
}
.cenovnik .plan-cost {
  padding: 20px 10px;
}
.cenovnik .plan-price {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 3em;
  color: #2980b9;
}
.cenovnik .plan-type {
  opacity: 0.6;
}
.cenovnik .plan-features {
  padding: 0;
  margin: 0;
  text-align: left;
  list-style: outside none none;
  font-size: 0.8em;
}
.cenovnik .plan-features li {
  border-top: 1px solid #d2d7e2;
  padding: 10px 5%;
}
.cenovnik .plan-features li:nth-child(even) {
  background: rgba(0, 0, 0, 0.08);
}
.cenovnik .plan-features i {
  margin-right: 8px;
  opacity: 0.4;
}
.cenovnik .plan-select {
  border-top: 1px solid #d2d7e2;
  padding: 30px 10px;
}
.cenovnik .plan-select a {
  background-color: #2980b9;
  color: #ffffff;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 8px;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
.cenovnik .plan-select a:hover {
  background-color: #409ad5;
}
.cenovnik .featured {
  margin-top: -20px;
  background-color: #2980b9;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  z-index: 1;
  border-radius: 8px;
}
.cenovnik .featured .plan-title,
.cenovnik .featured .plan-price {
  color: #ffffff;
}
.cenovnik .featured .plan-title {
  padding: 25px 15px;
}
.cenovnik .featured .plan-select {
  padding: 40px 10px;
}
.cenovnik .featured .plan-select a {
  color: #2980b9;
  background-color: #ffffff;
}
.cenovnik .featured .plan-select a:hover {
  background-color: #409ad5;
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .cenovnik .plan {
    width: 50%;
    border-radius: 0 !important;
  }
  .cenovnik .featured {
    margin-top: 0;
    border-radius: 0;
  }
  .cenovnik .featured .plan-title {
    padding: 15px;
  }
  .cenovnik .featured .plan-select {
    padding: 30px 10px;
  }
}
@media only screen and (max-width: 440px) {
  .cenovnik .plan {
    width: 100%;
  }
}
</style>

Body


<div class="cenovnik">
  <div class="plan">
    <h3 class="plan-title"> Basic </h3>
    <div class="plan-cost"><span class="plan-price">29</span><span class="plan-type"> eur </span></div>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
    </ul>
    <div class="plan-select"><a href="#">Narucite</a></div>
  </div>
  <div class="plan featured">
    <h3 class="plan-title"> Professional </h3>
    <div class="plan-cost"><span class="plan-price">49</span><span class="plan-type"> eur </span></div>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
    </ul>
    <div class="plan-select"><a href="#">Narucite</a></div>
  </div>
  <div class="plan">
    <h3 class="plan-title"> Ultra </h3>
    <div class="plan-cost"><span class="plan-price">99</span><span class="plan-type"> eur </span></div>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
      <li><i class="ion-checkmark"> </i>Neki podatak</li>
    </ul>
    <div class="plan-select"><a href="#">Narucite</a></div>
  </div>
</div>

Prikaz u Browser-u


Basic

29 eur
  • Neki podatak
  • Neki podatak
  • Neki podatak
  • Neki podatak
  • Neki podatak
  • Neki podatak

Ultra

99 eur
  • Neki podatak
  • Neki podatak
  • Neki podatak
  • Neki podatak
  • Neki podatak
  • Neki podatak

 

Saradnje posle završene obuke

Kada završite obuku i krenete da samostalno dizajnirate web sajtove, postoji mogućnost da naiđete na projekte koji Vam se mogu učiniti zahtevni po pitanju više stavki - tehnologija, klijent zahteva da sajt ima neke posebne opcije itd. TEKOMS nudi opciju saradnje po pitanju realizacije web projekata odnosno da zajednički realizujemo web sajt ili web aplikaciju. Ukoliko Vam se stvore određeni zahtevi za realizaciju nekog web projekta a niste sasvim sigurno da možete da samostalno odgovorite na njih slobodno nam pošaljite na email i vrlo brzo daćemo sve potrebne sugestije, savete kako da taj web projekat zajednički realizujemo.

Sertifikat kao opcija

Ukoliko mislite da imate dovoljno znanja možete uraditi određene vežbe posle koga možete dobiti Potvrdu da se uspešno savladali - Kurs web dizajna - HTML,CSS. Polaganje predstavlja izradu web stranica prema tačno definisanim smernicama kako trebaju da izgledaju. Polaganje je ozbiljno i prolaznost je oko 50%. Polaganje podrazumeva da posle 3-5 dana pošaljete komplet urađene vežbe na email (komplet izvorni kod sa pratećim folderima) nakon čega Vam stiže email sa sugestijama. Ukoliko se vidi da su neke greške lako rešive, rad se vraća na reviziju da se koriguje i vrati u određenom roku. Na taj polaganje predstavlja realnu situaciju u kojoj ćete se nalaziti u saradnji sa firmama kojima radite web sajt - a to je da tačno isprogramirate web stranicu kako se klijent tražio. Cene polaganja možete videtu na stranici - Cene obuka