Kontakt - GreteNeilinn/G-Sushi GitHub Wiki

Failid, mis on seotud selle osaga:

• kontakt.html
• stiilkont.css
• lisaks piltide kaustad

Kontakti osas olen lisanud aktiivse ja liikuva Google Mapsi pildi. Sellel saab lisada kasutades iframe. Samuti saab kaardi suurust ja kuju muuta kasutades style='#'. (class='#' tuleb defineerida .css-s)

<div class="#">
    <h2>ASUKOHT</h2>
        <div class="#">
	    <p>"Soovitud asukoht"</p>
	    <p><iframe src="lisa siia link kaardist"></iframe></p>
	</div>
</div>

Et teha lehekülg veidi atraktiivsemaks, lisasin aktiivsed Instagram'i, Messenger'i ja facebook'i ikoonid. Need ikoonid võib ise teha, aga ka internetis alla laadida, aga tuleb jälgida, milliseid võib kasutada. Mul olid need ikoonid juba varasemalt olemas, seega kasutasin neid. Aktiivse lehekülje lingi saad lisada kasutades href='#' ning ikooni või pildi saad lisada <img> ja src='#', viimasesse pead panema kust pildi võtad (nt asukoht kaustas ja pildi nimi). .html:

<ul class="social-icons">
    <li><a href="link 1"><img src='pildi asukoht kaustas ja nimi' /></a></li>
    <li><a href="link 2"><img src='pildi asukoht kaustas ja nimi' /></a></li>
    <li><a href="link 3"><img src='pildi asukoht kaustas ja nimi' /></a></li>
</ul>

Ikoone saad ka vastavalt soovile paigutada, nt üksteise kohale (nagu näide) või kõrvuti.

css-ga saab muuta ikoonide suurust ja asukoht lehel, kuid saab ka soovil lisada midagi ekstra, nt võimalik lisada ikoonile värvi ja kuju ning kui väga osav olla ka selle ise teha. .css:

.social-icons {
    text-align: 'teksti asukoht (keskel, paremal, vasakul)';
    }  
  .social-icons li {
    display:inline-block;
    list-style-type:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    }
  .social-icons li a {
    border-bottom: none;
    }
  .social-icons li img {
    width: 'pane siia ise mõõdud';
    height: 'pane siia ise mõõdud;
    margin-right: 20px;
}

Põhi on võetud leheküljelt https://www.templatemonster.com/blog/how-to-add-social-media-icons-website/

Menüüribal on logo ja teiste avalehtede linkidega nupud. Hiire liigutamine ülemise menüürea elemendi peale, käivitab antud elemendi paisumise.