Bygg en Twitter-klon fra grunnen Designet

Denne artikkelen representerer den første i en ny gruppeinnsats av Nettuts + -personalet, som dekker prosessen med å designe og bygge en web-app fra bunnen av - på flere språk! Vi bruker en fiktiv Twitter-klone, kalt Ribbit, som grunnlag for denne serien.

I denne opplæringen må vi fokusere på brukergrensesnittet. Vi vil utnytte den populære LESS Preprocessor for å gjøre vårt CSS så overkommelig som mulig.

Introduksjon

Sørg for å laste ned eiendelene for denne opplæringen, hvis du arbeider sammen.

Denne opplæringen er delt inn i fem hoveddeler, som forklarer hvordan man kan utforme ulike sider av Ribbits layout. Jeg vil referere til HTML-elementer ved hjelp av CSS-seleksjonene for å gjøre det lettere å forstå. Men før du drar inn i oppsettet, la oss kort diskutere nesting.

nesting

I CSS kan referanse til et nestet element resultere i lange selektorer. For eksempel:

 noeniD / * ... * / noenId div.someClass / * ... * / noenId div.someClass p.someOtherClass / * ... * / noenInd div.someClass p.someOtherClass målet / * ... * /

Og det kan bli enda større! Med MINDRE kan du nest et element i en annen, noe som gjør det lettere å lese:

 noenId / * ... * / div.someClass / * ... * / p.someOtherClass / * ... * / target / * ... * /

Variabler og Mixins

Opprett en ny fil og navn den, style.less. Når du bruker en hvilken som helst style preprocessor, er det en god ide å lagre viktige farger og størrelser innenfor variabler. Du kan enkelt justere verdiene uten å søke i filen, og se etter eiendomsverdier som du må endre. Vi vil bruke en håndfull variabler for tekstfarge, kantfarge og innholdsbredde:

 @ tekstfarge: # 3F3E3D; @ border-color: # D2D2D2; @ innholdsbredde: 860px;

La oss lage to mixiner. Den første vil skape en illusjon av anti-aliased tekst, og den andre vil tillate kryssbrowser-gradienter. Den tidligere er ganske enkel:

 .antialiased (@color) color: @color; tekstskygge: @color 0 0 1px;

Trikset er å skape en skygge under teksten med samme farge og en enpiksel-spredning, slik at nettleseren viser en fin nyanse rundt teksten.

Nå for gradienten; Dette er mer komplisert enn den anti-aliaset tekst fordi hver nettleser implementerer gradienter annerledes. Når vi har kompensert for de ulike leverandørprefiksetene, her er koden:

 .gradient4f (@ p1, @ c1, @ p2, @ c2, @ p3, @ c3, @ p4, @ c4) bakgrunn: @ c1; bakgrunn: -moz-lineær gradient (topp, @ c1 @ p1, @ c2 @ p2, @ c3 @ p3, @ c4 @ p4); Bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (@ p1, @ c1), fargestopp (@ p2, @ c2), fargestopp (@ p3, @ c3) stopp (@ p4, @ c4)); bakgrunn: -webkit-lineær gradient (topp, @ c1 @ p1, @ c2 @ p2, @ c3 @ p3, @ c4 @ p4); bakgrunn: -o-lineær gradient (topp, @ c1 @ p1, @ c2 @ p2, @ c3 @ p3, @ c4 @ p4); bakgrunn: -ms-lineær gradient (topp, @ c1 @ p1, @ c2 @ p2, @ c3 @ p3, @ c4 @ p4); bakgrunn: lineær gradient (til bunn, @ c1 @ p1, @ c2 @ p2, @ c3 @ p3, @ c4 @ p4);

Hver nettleser har et prefiks: -moz- for Firefox, -webkit- for Chrome, etc. Den siste linjen bruker W3C-anbefalt versjon for gradienter. Hvis en nettleser støtter den, vil den overstyre de forrige egenskapene fordi den er den siste bakgrunn eiendomserklæring i regelen. De lineær-gradient funksjonen aksepterer åtte parametere: fire par prosentfargeverdier. Det skaper gradienten med fire fargesteg.

Globale stiler

La oss neste stil ha noen globale elementer, som for knapper og lenker. Vi vil at alle elementene skal bruke Helvetica eller arial skrifttyper med tekstfargen som er definert tidligere:

 * font-family: sans-serif; farge: @ tekstfarge;

Kropp

Kroppen er ganske enkel; Vi trenger en hvit bakgrunn med et bildebasert mønster. Det er ingen marginer og polstring:

 kropp bakgrunn: hvit url (gfx / bg.png); margin: 0; polstring: 0;

innganger

Vi gir også en standard stil for alle elementer på siden:

 input width: 236px; høyde: 38px; border: 1px solid @ border-color; polstring: 0 10px; oversikt: ingen; skriftstørrelse: 17px; &: fokus bakgrunn: # FFFDF2;

Vi angir standard størrelse og polstring, og vi bruker @grensefarge variabel for å fjerne det irriterende blå omrisset når elementet er fokusert. Du bør legge merke til en annen bit MINDRE sukker: vi kan legge til CSS pseudo-klasser (og også normale klasser) ved hjelp av & tegn (foreldrehenvisning), som vist her:

 &: fokus bakgrunn: # FFFDF2;

Dette fører til at inngangen har en lysegul bakgrunn, når den er fokusert.

sender

Send knapper vil bruke både den tidligere definerte mixin og border-radius å skape fin effekt:

 input [type = "submit"] høyde: 36px; grense: 1px solid # 7BC574; border-radius: 2px; farge: hvit; skriftstørrelse: 12px; font-weight: bold; polstring: 0 20px; markør: pointer; .gradient4f (0%, # 8CD585, 23%, # 82CD7A, 86%, # 55AD4C, 100%, # 4FA945);

lenker

Koblingene skal ha en annen farge enn vanlig tekst. Vi vil også understreke dem på svingeren:

 en tekst-dekorasjon: ingen; .antialiased (# 58B84E); &: hover text-decoration: understreke;

Grunnleggende mal

Vi begynner med den delen av oppsettet som forblir det samme på hver side. Her er HTML-koden, som jeg vil forklare nedenfor:

           Twitter klon
 
    
 
   Ribbit - En Twitter Clone Tutorial

Vi starter med en normal dOCTYPE definisjon og dokument hode. Du kan bruke less.js bibliotek og inkludere style.less i utviklingsstadiet (som jeg gjorde i denne koden). Senere kan du kompilere den MINDRE filen i CSS, hvis du ikke ønsker å bruke less.js. Som du sikkert har lagt merke til nå, er oppsettet delt inn i tre deler: Overskrift, #innhold, og bunntekst. Du bør lagre denne HTML for å se om du styler alt riktig.

Overskrift

La oss takle Overskrift. Den inneholder Ribbit's logo og de to ordene: 'Twitter Clone'. Den er pakket inn i en wrapper, hvis bredde styres av @ Innhold bredde variabel. Det er flere wrappers i oppsettet, og alle er @ Innhold bredde bred med auto margin:

 .wrapper bredde: @ innholdsbredde; margin: auto;

Hovedteksten selv er 85px høy og bred side:

 header bakgrunn: url (gfx / bg-header.png); høyde: 85px; bredde: 100%;

Etter bredden legger du til div.wrapperstil med vertikal polstring:

 div.wrapper polstring: 11px 0;

Så overskriften bør se ut som:

 header bakgrunn: url (gfx / bg-header.png); høyde: 85px; bredde: 100%; div.wrapper polstring: 11px 0;

Bilder i innpakningen må være 10px lavere, for å være pent sentrert:

 img posisjon: relativ; topp: 10px; margin: 0 15px 0 0;

Også skrifttypen i elementene må være større enn standardstørrelsen:

 span font-size: 18px; margin: 0 42px 0 0;

Slik ser designen på dette punktet.

Innhold

Det er ikke mye vi kan gjøre med #innhold på denne tiden. Vi legger til litt margin i bunnen og en minimumshøyde; Oppsettet vil se funky hvis det ikke er høyt nok:

 #content margin-bottom: 15px; Min høyde: 560px;

Innvendig må innpakningen ha en vertikal margin med automatisk horisontal margin:

 div.wrapper margin: 38px auto;

bunntekst

Som toppteksten er bunnteksten den samme for alle sider. Vi bruker et bakgrunnsbilde og en mindre skriftstørrelse. Vi må også klare: begge deler, fordi vi bruker flyter i innholdet. Uten klarlegger fotfeltet ikke til i samsvar med innholdet:

 footer bakgrunn: url (gfx / bg-footer.png); høyde: 251px; skriftstørrelse: 14px; klare: begge;

La oss legge til noe polstring på wrappen, og bildene i den skal flyte til høyre:

 div.wrapper polstring: 15px; img float: right;

Her er vår footer:

Hjemmesiden

Denne siden vises for brukere som ikke er logget på Ribbit. Derfor må den presentere innloggingsskjemaet i overskriften og et registreringsskjema, med et stort froskbilde i innholdet. La oss starte med en grunnleggende mal.

Innlogging bokser

Legg til dette påloggingsskjemaet til div.wrapper av Overskrift, etter element:

Disse inngangene er allerede utformet, men vi må legge til margene og lage skjemaet vise som på linje. Legg til dette etterpå span i div.wrapper av Overskrift:

 skjema display: inline; input margin: 0 0 0 14px;

Registrer skjema

Her er HTML for registreringsskjemaet:

   Ny på Ribbit?

Legg til denne HTML-en div.wrapper av #innhold. Vi vil at bildet skal ha avrundede hjørner og bli floated til venstre (legg til dette etter margin i div.wrapper av #innhold):

 img border-radius: 6px; flyte: venstre;

Nå kan vi stile registreringsskjemaet. Det vil også være et panel som vi skal bruke senere; det er derfor vi vil stilen .panel:

 div.panel border: 1px solid @ border-color; bakgrunn: hvit; margin: 0; margin-bunn: 29px; border-radius: 6px; skriftstørrelse: 14px;

For nå skjønner vi imidlertid bare Ikke sant panel. Den er smalere og stikker til høyre side av panelet. Naturligvis sett inn følgende inn div.panel:

 &. rett bredde: 303px; høyde: 313px; flyte: høyre;

Også, vi må ta vare på toppteksten og innholdet i panelet. Vi bruker

elementer for toppteksten og

elementer for innhold Legg merke til at du kan bruke * wildcard innsiden av et annet element:

 * margin: 6px 0;  skjema polstring: 0 23px;  h1 border-bottom: 1px solid @ border-color; margin: 5px 0; font-weight: normal; skriftstørrelse: 18px; polstring: 13px 23px; høyde: 23px;  p polstring: 0 24px; margin: 18px 0;

Her er hvordan div.panelstilen skal se ut:

 div.panel border: 1px solid @ border-color; bakgrunn: hvit; margin: 0; margin-bunn: 29px; border-radius: 6px; skriftstørrelse: 14px; &. rett bredde: 303px; høyde: 313px; flyte: høyre;  * margin: 6px 0;  h1 border-bottom: 1px solid @ border-color; margin: 5px 0; font-weight: normal; skriftstørrelse: 18px; polstring: 13px 23px; høyde: 23px;  p polstring: 0 24px; margin: 18px 0;

Og her er et skjermbilde av hvordan denne siden skal se, så langt (klikk for å se full størrelse):

Buddies Page

Buddies-siden skal vises når en bruker logger på. Den viser en liste over de siste "Ribbits", sammen med noen statistikk på kontoen din. Igjen, start med grunnleggende mal. Denne siden, sammen med andre sider, vil vise en logout-knapp i stedet for påloggingsskjemaet i Overskrift:

Knappene har allerede blitt stylet, så vi trenger bare å pinne den til høyre side av beholderen og legge til noen marginer:

 #btnLogOut float: right; margin: 14px 0 0 0;

Fordi denne regelens velger er et elements ID, kan du plassere det enten utenfor elementet eller i topptekstens div.wrapper. Det er ditt valg, men husk at hvis du velger å plassere det inne i et annet element, vil den sammensatte CSS ha en lengre velger (header div.wrapper #btnLogOut).

"Lag en ribbit" -boks

Først legger du til dette panelets kode til div.wrapper av #innhold:

  Lag en Ribbit

De .Ikke sant Klassen ble stylet tidligere, men vi må legge til noen styling for </code> element. Vi gir den en riktig størrelse og kantlinje:</p> <pre> textarea.ribbitText width: 249px; høyde: 160px; border: 1px solid @ border-color; </pre> <p>Legg til dette i stildefinisjonen til høyre panel.</p> <h3>brukerinformasjon</h3> <p>La oss nå fokusere på panelet, som inneholder brukerens kontoinformasjon. Vi vil midlertidig fylle den med noe tilfeldig innhold for å se stylingen:</p> <pre> <div> <h1>Din Ribbit-profil</h1> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Frogger</span> @username <p> 567 Ribbits<span>45 følgere</span><span>32 Følgende</span><br> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> </div></pre> <p>Det kan se komplisert ut, men strukturen er ganske enkel når du fjerner innholdet:</p> <pre> <div> <h1>Din Ribbit-profil</h1> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span> </span> <p> <span> </span><span> </span><br> </p> </div> </div></pre> <p>Uansett, vi har et annet panel; så vi må style det først:</p> <pre> & .left bredde: @ innholdsbredde - 327; flyte: venstre; </pre> <p>Du vet sikkert hvor du skal plassere denne koden (legg merke til hvor lett du kan utføre aritmetiske operasjoner i mindre grad). Dette panelet inneholder <code>div.ribbitWrapper</code>. Så legg til følgende kode:</p> <pre> div.ribbitWrapper polstring: 15px 0; </pre> <p>Det er to <code><span/></code> elementer inne i dette elementet, hver med en annen farge og skriftstørrelse. De har klasser av <code>.Navn</code> og <code>.tid</code>:</p> <pre> span & .name font-size: 18px; farge: # 58B84E; & .time font-size: 12px; farge: #CCC; </pre> <p>Vi bør også plassere avatarbildet nær den venstre grensen. Legg til følgende kode:</p> <pre> img.avatar margin: 0 19px 0 20px; flyte: venstre; </pre> <p>Også, Ribbit's tekst må være anti-aliased, rettferdiggjort og flyttet til høyre. Denne koden vil plassere teksten ved siden av avataren, i motsetning til under den:</p> <pre> p margin: 5px 50px 0 90px; polstring: 0; tekstjustering: rettferdiggjøre; linjehøyde: 1,5; .antialiased (@ tekst-farge); </pre> <p>I dette avsnittet er det <code><span/></code> elementer med vertikale linjer, visuelt separere dem. Denne effekten oppnås ved å bruke ramme, polstring og margin:</p> <pre> span.spacing padding-left: 9px; margin-venstre: 9px; høyde: 10px; border-left: 1px solid @ border-color; </pre> <h3>Buddies Ribbits</h3> <p>Dette panelet viser de nyeste ribbittene fra personene som brukeren følger. Sett inn følgende etter brukerens informasjonspanel:</p> <pre> <div> <h1>Din Ribbit Buddies</h1> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Kermit</span> @username <span>15m</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Frogger</span> @username <span>15m</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Kermit</span> @username <span>15m</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Hypnotoad</span> @username <span>15m</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Kermit</span> @username <span>15m</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Hypnotoad</span> @username <span>15m</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> </div></pre> <p>Det er få eksempelbiter for å se hvordan det ser ut. Vi legger til noen grenser for å visuelt skille dem fra. Legg til denne koden i <code>div.ribbitWrapper</code>:</p> <pre> border-bottom: 1px solid @ border-color; &: siste barn grense: ingen; </pre> <p>Denne stylingen legger til nederste kant, mens du fjerner grensen på det siste <code>div.ribbitWrapper</code>; En grense eksisterer allerede på panelet.</p> <p>Slik ser denne siden nå ut:</p> <p> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design_4.jpg"> </p> <hr> <h2>Offentlig Ribbits Side</h2> <p>"Offentlig Ribbits" -siden vil vise de nyeste ribbittene av profiler som ikke er merket som private, slik at brukerne kan se ribbene til de som ikke har dem i sin venneliste. Overraskende, det er ingenting annet å style, men vi trenger å legge til et snev av HTML. Den eneste forskjellen mellom dette og forrige side er at denne ikke har brukerens informasjonspanel, men det vil ha annet innhold på det endelige nettstedet. Så vær så snill å kopiere koden til kompis-siden, men fjern dette panelet:</p> <pre> <div> <h1>Din Ribbit-profil</h1> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Frogger</span> @username <p> 567 Ribbits<span>45 følgere</span><span>32 Følgende</span><br> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> </div></pre> <p>Endre også overskriften til panelet til "Public Ribbits." Her er forhåndsvisningen av denne siden:</p> <p> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design_5.jpg"> </p> <hr> <h2>Offentlige profiler side</h2> <p>På denne siden kan brukerne se en liste over profiler som ikke er merket som private. Det finnes også en søkeboks for å finne andre profiler. Vi starter med grunnleggende mal.</p> <h3>Profil Søk</h3> <p>Søkeboksen vil bruke <code>.Ikke sant</code> panel med en <code><input/></code> element inne:</p> <pre> <div> <h1>Søk etter profiler</h1> <p> <form> <input name="query" type="text"> <input type="submit" value="Ribbit!"> </form> </p> </div></pre> <h3>Profiler Liste</h3> <p>Her er en håndfull eksempler profiler for profillisten, slik at du kan se hvordan det ser ut i nettleseren. I en fremtidig leksjon erstatter vi selvfølgelig dette.</p> <pre> <div> <h1>Offentlige profiler</h1> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Kermit</span> @username <span>625 følgere følger</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Frogger</span> @username <span>329 følgere følger</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> <div> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design.png"> <span>Hypnotoad</span> @username <span>129 følgere følger</span> <p> Du er bare en av de ledende leverandørene av Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. http://net.tutsplus.com/tutorials/php/... </p> </div> </div></pre> <p>Denne siden skal se ut som:</p> <p> <img src="//accentsconagua.com/img/images_20/build-a-twitter-clone-from-scratch-the-design_6.jpg"> </p> <hr> <h2>Kompilere CSS</h2> <blockquote><p>Å referere til et nestet element kan resultere i lange velgere.</p></blockquote> <p>Som nevnt tidligere, for produksjon, kan du kompilere MINDRE til CSS (og jeg anbefaler at du gjør det av ytelsesårsaker). Det er noen tilgjengelige nettkompilatorer:</p> <ul> <li>WinLess Online Compiler</li> <li>LESSTESTER</li> </ul> <p>Sammen med enkelte frittstående samlere:</p> <ul> <li> Knase! (som er en fullblåst LESS editor)</li> <li> WinLess (funksjoner automatisk kompilering når den mindre filen endres)</li> <li> SimpLESS (inkluderer CSS-minifisering)</li> </ul> <p>Hvis noen av disse kompilatørene ikke virker for deg, Google for mer; det er nok! Du kan også bruke <code>lessc</code> fra LESS nettsted, men det er mye enklere å kompilere MINDRE filer med andre kompilatorer. Selvfølgelig er det ingenting galt med å bruke <code>less.js</code> bibliotek for å dynamisk kompilere oppsettet; nye nettlesere cache den resulterende CSS.</p> <hr> <h2>Konklusjon</h2> <p>Som du kan se, er LESS et kraftig verktøy som gjør det mye enklere og raskere enn vanlig CSS for å utforme vakre layouter.</p> <p>Men dette er bare begynnelsen. Vær forberedt på å implementere Ribbit's back-end i en mengde språk og plattformer i neste sett med opplæringsprogrammer!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Kode</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/build-a-twitter-search-app-fetch-parse-the-twitter-json-feed.html">Bygg en Twitter Search App Hent og tolk Twitter JSON Feed</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/build-a-twitter-search-app-fetch-parse-the-twitter-json-feed_2.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/build-a-triflector-for-only-50.html">Bygg en Triflector for bare $ 50</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_17/build-a-triflector-for-only-50_21.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Søke..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>