Utveckling av hemsida till Serviceförmedlingen och Rosana Restaurang & Bar

(1)

Utveckling av hemsida till

Serviceförmedlingen och Rosana

Restaurang & Bar

Sebastian Viksten

Masood Raufi

Datornätverk, högskoleexamen

2020

(2)

Utveckling av hemsida till

Serviceförmedlingen och Rosana

Restaurang & Bar

Sebastian Viksten, Masood Raufi Datornätverk

Datum: 2020-08-18

Kursnamn: Examensarbete, Datornätverk Kurskod: D0032D

(3)

Förord

Vi vill tacka alla lärare som har gett oss kunskapen för att kunna utföra detta examensarbete. Samt vill vi tacka handledaren Karl Andersson som har varit ett bra stöd under detta

(4)

Sammanfattning

Skapandet av hemsidorna gjordes för att kunna nå nya kunder på ett nytt sätt och låta existerande kunder att beställa online mer bekvämt genom att kunna till exempel titta på restaurangmenyn online och ha tillgängligheten att beställa med hemleverans. Detta var ett enkelt val att göra eftersom de flesta shoppingtillfällena sker online.

Design och utveckling av Rosana Restaurang & Bar’s hemsida är gjort med hjälp av Wix. Innan det valdes att använda wix så planerades att hemsidan skulle göras med hjälp av CSS och HTML, Det visades sig vara alldeles för komplext och wix valdes istället. Hemsidan byggdes med hjälp av Wix funktionsbibliotek som sedan konfigurerades efter företagets behov. Serviceförmedlingen’s hemsida gjordes i CSS, HTML, PHP och Javascript. CSS valdes för styling, HTML för grunden på hemsidan, PHP för kontaktformulär med en mailfunktion och Javascript för animationer.

Hemsidan för Rosana Restaurang och Bar erbjuder nu möjligheten att reservera bord online, ta emot onlinebeställningar, få auto print av beställningar, samt utkörningsmöjlighet av maten som beställs online.

Hemsidan för Serviceförmedlingen erbjuder möjligheten att få kontakt via kontaktformulär, telefon eller mejl. Kontaktinformationen finns längst ned på sidan om kunden skulle vara intresserad att ta direkt kontakt.

(5)

Abstract

Creating the websites was done to increase methods of reaching out to new customers and let existing customers to order more comfortably by viewing the restaurants menu online and have the availability to order with home delivery. This was an easy choice considering most of the shopping is done online.

The design and development of Rosana Restaurang & Bar’s website is made with the help of Wix. Before Wix was chosen it was planned to create the website with CSS and HTML, this turned out to be way too complex and that is when Wix was chosen instead. The website was built with the help of their function library that was later configured appropriately.

Serviceförmedlingen website was made in CSS, HTML, PHP and Javascript. Where CSS was chosen for styling, HTML for the core of the website, PHP for the contact form with a mail function and Javascript for animations.

Rosana Restaurang och Bar now has the possibility for customers to reserve tables online, receive orders and get auto-prints of orders, there is also possibility for deliveries of the food ordered online.

Serviceförmedlingen has the possibility for customers to get in contact via the contact form, telephone or by mail. The contact info exists at the bottom of the page if the customer would be interested to contact the Serviceförmedlingen directly.

(6)

Innehållsförteckning

1 Inledning ... 1 1.1 Bakgrund ... 1 1.2 Syfte ... 1 1.3 Ansvarsfördelning ... 1 2 Teori ... 2 2.1 PHPMailer ... 2

2.2 PHP inbyggda mail funktion ... 2

2.3 Wix ... 2 2.4 Stripe ... 3 2.5 SMTP ... 3 2.6 Krav för hemsidor ... 4 3 Metod ... 5 3.1 Förstudie ... 5

3.1.1 Betalningslösning för Rosana Restaurang och Bar ... 5

3.1.2 Jämförelse av webhotellen Hostinger och Bluehost ... 5

3.1.3 Val av host ... 6

3.1.4 Kontaktformulär funktion för Serviceförmedlingen ... 6

3.1.5 Filezilla ... 6

3.1.6 Sublime Text 3 ... 6

3.2 Implementation ... 7

3.2.1 Serviceförmedlingen ... 7

(7)

4 Resultat ... 8

4.1 Serviceförmedlingens hemsida på dator ... 8

4.2 Rosana Restaurang och Bar’s hemsida på dator ... 11

5 Diskussion och slutsatser ... 14

6 Referenser ... 15

7 Bilagor ... 16

7.1 Länkar till hemsidor ... 16

7.2 Serviceförmedlingens hemsida på mobil ... 16

7.3 Rosana Restaurang och Bar’s hemsida på mobil ... 23

7.4 Serviceförmedlingen kontaktformulär PHP kod ... 28

7.5 Serviceförmedlingen kontaktformulär HTML kod ... 29

7.6 Serviceförmedlingen Tjänster sektionen: ... 30

7.7 Serviceförmedlingen Googlemap implementation: ... 33

7.8 Serviceförmedlingen Statiska Instagram bilder: ... 33

(8)

1

1 Inledning

1.1 Bakgrund

En bra hemsida är en viktig del för företag. I dag startar 63% av shopping tillfällen online [1].

1.2 Syfte

Syftet med detta examensarbete var att skapa två hemsidor för M.Raufi respektive M:s Handelsbolag. Dessa bolag bedriver verksamheter som består av en livsmedelsverksamhet respektive en konsult-verksamhet som bland annat erbjuder tjänster såsom IT, tolkning, design av grafik och logotyper, hushållstjänster mm.

En lista innehållandes krav från företaget och specifikationer gavs ut, för att få en förståelse av vad företaget vill ska finnas på hemsidan.

1.3 Ansvarsfördelning

Sebastian Viksten hade ansvar för menydesign på hemsidan för Rosana Restaurang och Bar. Han ansvarade över SSL certifikat, kontaktformulär och designen för att visa alla tjänster som erbjuds.

(9)

2

2 Teori

Detta kapitel behandlar de teoretiska bakgrunderna som tillhör detta arbete.

2.1 PHPMailer

PHPMailer är en PHP class för PHP som har funktionen för att kunna skicka mejl. Det går både att skicka mejl och bifoga bilagor om så skulle konfigureras. PHPMailer är mycket flexibelt och kan skicka mejl med följande funktioner:

• Mail() • Sendmail • Qmail

• Direkt till en SMTP server

PHPMailer stödjer mejl skickade till flera mottagare, CC, BCC etcetera [2].

2.2 PHP inbyggda mail funktion

PHP har en inbyggd mail() funktion för att kunna skicka e-mail. Det är en version som inte är flexibel. Exempelvis fungerar SMTP ej hos vissa SMTP servrar, p.g.a. att de kräver

autentisering, Det är inte många SMTP servrar som ej kräver autentisering och därför rekommenderas ej den inbyggda mail funktionen.

2.3 Wix

Wix erbjuder en utmärkt drag-and-drop webbplats-byggare för att skapa små webbplatser. Det finns 100-tal gratis mallar tillgängliga. Wix tillhandahåller sitt eget webbhotell samt domännamn (gratis och betalt). Wix’s inbyggd App Market gör det enkelt att lägga till extra funktionalitet som fotogallerier eller e-handel. I Wix skrivs ej någon kod, dock så krävs det mycket administrativt arbete eftersom personen designar hemsidan själv med de funktioner Wix har att erbjuda. Deras visuellt imponerande layouter är designade för småföretag, restauranger, online butiker och artister som musiker och fotografer. De är optimerade för mobila enheter och kan kopplas med en av många appar som finns tillgängliga från Wix App Market.

Wix finns gratis. Men om det behövs professionella funktioner som eget domännamn eller e-handel, måste det väljas från en av deras premium planer som sträcker sig från "Combo" till "Business VIP". Den billigaste annonsfria planen med ett anpassat domännamn kostar ca 113 kr per månad [3].

(10)

3

Moln-klara (cloud-ready) skrivare: Nyligen tillverkade skrivare kan anslutas direkt till Google Cloud Print och anslutas till Wix för att kunna auto printa en beställning.

Klassiska skrivare: Om din skrivare inte är moln klar (cloud-ready) kan man fortfarande använda den för att skriva ut beställningar med en Google Chrome-webbläsare och en Windows- eller Mac-dator. Till skillnad från moln klara (cloud-ready) skrivare kan klassiska skrivare bara skriva ut när datorn är på.

2.4 Stripe

Stripe är ett amerikanskt företag som tillåter företag att acceptera betalningar via internet. Stripe finns i ca. 120 länder och har 100 000+ företag som är ansluten till deras betalningstjänster. För att kunna ta emot online beställningar som företag behövs ett stripe konto som skapas via deras hemsida. Detta kräver att företaget är momsregistrerad och har VAT, även kallad internationella momsnummer. Efter att man ansöker om att skapa ett konto hos Stripe tar det 1–2 dagar tills man kan bli verifierad och kunna använda Stripe.

Med stripe betalningar kan man få betalt med alla större kort från kunder runt om i världen på webben eller i mobilappar. Den grundläggande versionen av Stripe Payments gör det möjligt för företagare att samla in traditionella engångsköp, antingen online eller på fysiska platser. Stripe accepterar och arbetar med American Express-, Visa-, Discover- och Mastercard-märkta kort samt några av de mer nischprodukter som UnionPay, JCB och Diners Club och Stripe

accepterar betalningar i mer än 135 valutor och i de flesta länder [4].

2.5 SMTP

SMTP (Simple Mail Transfer Protocol), är en uppsättning av kommunikationsriktlinjer som används för att kunna skicka email till och mellan mailservrar. SMTP hjälper till med

(11)

4

2.6 Krav för hemsidor

De kraven som Serviceförmedlingens hemsida hade var att implementera säker anslutning med hjälp av SSL, kontaktformulär för kundkontakt, design för att visa alla tjänster som erbjuds, portfolio för att visa tidigare arbeten och länkar till sociala medier.

(12)

5

3 Metod

Detta kapitel innehåller information om hjälpmedel och metod för att utföra det praktiska arbetet.

3.1 Förstudie

3.1.1 Betalningslösning för Rosana Restaurang och Bar

Vi valde att implementera betalningslösningen Stripe för att kostnaden är lägre jämfört med vad konkurrenterna erbjuder. Det finns olika konkurrenter vi kunde välja ifrån, det fanns

Authorize.net som debiterar användare 2,9% + $ 0,30 per transaktion. Internationella transaktioner kommer att kosta oss ytterligare 1,5% extra vid varje transaktion. Dessutom kommer Authorize.net att debitera en installationsavgift på $49 och en gateway avgift på $25 per månad.

Paypal, tar 3,4 % + 3,25 kr. Sedan tar Stripe 1,4% + 1.80kr med betalkort inom Europa och 2,9% + 1.80kr för kort utanför Europa. Detta gör så att restaurangen får mer pengar i vinst, därför valdes Stripe som betalfunktion för online beställningar.

3.1.2 Jämförelse av webhotellen Hostinger och Bluehost

Hostinger ger mycket bra priser jämfört med vad Bluehost tar betalt. Dessa rea-priser är för nya kunder och gäller 1–3 månader beroende på vad som väljs. Detta är bra för en kund och kan ge en uppfattning över hur en host presterar eftersom båda har en “30-day money-back

guarantee”. Skulle man inte vara nöjd över vad som ges så kan man få tillbaka pengarna inom 30 dagar.

Bluehost priser är dyrare. Dessa är också rea-priser som gäller 1–3 månader för att kunna ge kunden en upplevelse om hur hosten presterar och vilken funktionalitet som ges. Bluehost har också “30-day money-back guarantee” om kunden inte är nöjd.

(13)

6

Figur 1, laddningstider för Bluehost och Hostinger: Bluehost vs Hostinger: Which Is the

Best Host for Your Needs in 2020? (Megan Jones 2020)

Detta är laddningstider för varsin host, där Hostinger visar sig att vara mycket snabbare på att ladda sidor än vad Bluehost kan göra [7].

3.1.3 Val av host

Undersökningen börjades med målen som är satta att få en förståelse om kraven och vilka resurser som kan behövas för vårt arbete.

Det första som gjordes var att välja en webhost för hemsidan till Serviceförmedlingen.

Researchen gav att Hostinger var ett bra val p.g.a. deras bra respons från kunder och det fanns ett bra introduktionspris till deras tjänster.

Wix användes för Rosana eftersom den hemsidan kräver mycket mer komplexa funktioner, till exempel en betalningsöverföring metod.

Kostnader för Rosana:

Kostnaden är ca. 2750kr för Wix premiumpaket och summan debiteras per år.

Kostnader för Serviceförmedlingen:

Kostnaden var ca. 170kr för SSL certifikat, installationsavgift, plats för 1 webbsida. Kostnaden är ca. 105kr för domän registrering av serviceformedlingen.com och summan debiteras per år

Kostnaden är ca. 92 kr för hemsidan och debiteras månatligen

3.1.4 Kontaktformulär funktion för Serviceförmedlingen

Hemsidan ska ha ett kontaktformulär som kan fyllas i när kunden kontaktar

Service-förmedlingen om eventuellt jobb som kan utföras. För kontaktformuläret så valdes PHPMailer, eftersom PHPMailer har bra dokumentation på exempelkonfigurationer.

3.1.5 Filezilla

Filezilla används för att kunna hantera uppkoppling mot hosten (Hostinger) och överföra de filer som krävs för att webbsidan ska kunna fungera.

3.1.6 Sublime Text 3

(14)

7

3.2 Implementation

3.2.1 Serviceförmedlingen

För utförandet kommer vi att använda oss av HTML för web strukturen och för att kunna göra kontaktformuläret samt lagra datan temporärt, som sedan kommer att skickas som mejl med hjälp av PHPMailer.

Vi kommer även att använda:

● CSS för att kunna ändra presentationen av webbsidan, färger, bilder, layout och fonter för text.

● PHP för att kunna skapa ett mailsystem som tar data från Kontaktformuläret. ● Javascript för att kunna få fram animeringar på hemsidan.

3.2.2 Rosana Restaurang och Bar

Wix ska användas för att designa hemsidan med hjälp av inbyggd mall och vidareutveckling av mallen med hjälp av Wix app store som är en funktion med olika appar gjorda för att kunna hjälpa med design och utveckling av hemsidan. Meny och beställningsfunktioner ska också byggas med hjälp av Wix App store. Man kan anpassa designen på meny, ändra färgerna så att de matchar utseendet på webbplatsen eller välj en ny typ storlek, stil osv.

(15)

8

4 Resultat

Detta kapitel beskriver de viktigaste resultaten i arbetet.

4.1 Serviceförmedlingens hemsida på dator

Serviceförmedlingen startsida (Figur 2) har en header med möjlighet till snabb navigation och en slider med 3 unika bilder som har 2 knappar också med möjlighet till snabb navigering. Figur 3 visar “Om Oss” sektionen där information visar vad företaget jobbar med och var tjänsterna erbjuds.

I figur 4 visas “Våra Tjänster” vilket visar tjänsterna som erbjuds i mer detalj för att den potentiella kunden ska kunna skapa en uppfattning om spetskompetensen hos företaget. I “Kontakta Oss” sektionen som kan ses i figure 5, finns ett kontaktformulär som är kopplat med PHPMailer för att kunna skicka ett e-mail till företagets mail så att företaget kommer att kunna följa upp kunden till det potentiella arbetet.

Längst ned på hemsidan som kan ses i figur 6, finns det länkar till sociala medier och kontaktinformation till företaget och Instagram bilder.

(16)

9

Figur 3, Om Oss sektionen som visar vad företaget jobbar med.

(17)

10

Figur 5, Kontakta Oss sektionen för kunder.

(18)

11

4.2 Rosana Restaurang och Bar’s hemsida på dator

Rosana Restaurang och Bar’s startsida (Figur 7) har en header med möjlighet till snabb

navigation och en statisk bild som visar var restaurangen befinner sig och att restaurangen har fått alkoholtillstånd.

Figur 8 visar en statisk bild med information om råvaror som används i restaurangen.

I figur 9 finns en sektion där hemleverans eller hämtning kan väljas, båda alternativen dirigerar personen till en sida där kunden kan beställa och välja mellan hemleverans och hämtning med en säker online-kassa som är krypterad med hjälp av SSL (Secure Sockets Layer).

Figuren 10 visar Instagram flödet för restaurangens bilder som är uppladdat och uppdateras automatiskt när nya bilder publiceras på Instagram kontot. Det finns också möjlighet till att kunna reservera ett bord.

Längst ned på startsidan som kan ses i figur 11, finns det kontakt information till företaget och länkar till sociala medier och en Google Maps implementation så att restaurangen lätt kan hitta om kunden till exempel har beställt hämtning. Det finns också en liten sektion för catering. I figur 12 visas sidan kunden kommer till om man tryckt på Beställ Online, hemleverans eller hämtning. På sidan finns hela menyn och sin varukorg.

Figur 7, I denna sektion finns startsidan på hemsidan som visar toppmeny som kan

(19)

12

Figur 8, I denna sektion finns det information om råvaror av verksamheten.

Figur 9, Sektion med hemleverans/hämtning.

(20)

13

Figur 11, Kontakt till företag och Google Maps implementation.

(21)

14

5 Diskussion och slutsatser

Vi valde att använda Wix eftersom det är populärt och att vi hittade det genom reklam. Funktionerna var något som lockade oss, att med eget utval och design av hemsidan med inbyggda funktioner som sedan implementeras i princip per automatik, dock behöver man lägga till egen information och välja dessa funktioner, det går inte helt utan jobb, men det blir mycket mindre att tänka på eftersom man behöver inte göra allt från scratch, vilket hade varit omöjligt med tiden vi har lagt på detta examensarbete.

Vi valde att göra två hemsidor då vi tänkte att det kanske skulle bli för lite jobb att göra en. Effekten blev att vi har behövde offra lite mobila optimeringar som vi hade velat fixa. Vi hade även önskat att det hade funnits videos i portfolio, dock krävdes det mer tid och kommer att bli någonting som kan fixas i framtiden. Vi hade även önskat ha Swish implementerat som en betalmetod.

Planeringen var bra och vi hjälpte varandra ganska ofta med arbetet vi fördelat mellan oss. Vi hade dagliga/varannan dags möten där vi berättade för varandra om vad vi gjort och eventuella problem som ej ännu lösts för att få en bra uppfattning hur vi ligger till i arbetet. Detta är

någonting vi tyckte var viktigt i efterhand när vi gjort arbetet. Vi fick de resultat vi väntade, alla kärnfunktioner är implementerade och fungerar som det ska och det var målet.

Vi är mer än nöjda med det utförda arbetet, med tanke på hur mycket vi hade bakom oss så tycker vi att det har gått bra och att vi har presterat bra i de veckor som arbetet utfördes. Vi tycker att det som kan göras bättre är mobil optimering och en Swish betalfunktion så att det inte bara är kortbetalning som finns.

Vi utförde jobbet stegvis så att vi håller koll på vad vi behöver göra och dess deadline. Vi delade upp varje kärnfunktion till att ha en viss deadline så att någon kärnfunktion inte hinner att

(22)

15

6 Referenser

[1] Google, How search enables people to create a unique path to purchase

https://www.thinkwithgoogle.com/feature/path-to-purchase-search-behavior/ (Hämtad Maj 2020) [2] Tom Klingenberg, phpmailer - UsefulTutorial.wiki https://code.google.com/archive/a/apache-extras.org/p/phpmailer/wikis/UsefulTutorial.wiki (Hämtad Maj 2020)

[3] Wix, https://www.wix.com/about/us (Hämtad Maj 2020) [4] Stripe, https://stripe.com/en-dk/about (Hämtad Maj 2020) [5] Nick Peers, What Is SMTP Used For?

https://smallbusiness.chron.com/smtp-used-for-77439.html (Hämtad Maj 2020) [6] Yevgen Tsvetukhin, What is an MTA?

https://blog.mailtrap.io/mail-transfer-agent/ (Hämtad Maj 2020)

[7] Megan Jones, Bluehost vs Hostinger: Which Is the Best Host for Your Needs in 2020?

https://themeisle.com/blog/bluehost-vs-hostinger-comparison/ (Hämtad Juni 2020)

[8] Paypal, Avgifter man förstår sig på. https://www.paypal.com/en/webapps/mpp/paypal-fees

(Hämtad Maj 2020)

[9] Stripe, Pricing built for businesses of all sizes. Always know what you’ll pay.

(23)

16

7 Bilagor

I denna sektion finns länk till de hemsidor som har skapats och bilagor för lite kod som har använts till detta arbete.

7.1 Länkar till hemsidor

Länk till Serviceförmedlingens hemsida: https://serviceformedlingen.se/

Länk till Rosana Restaurang & Bar hemsida: https://pizzeriarosana.com

7.2 Serviceförmedlingens hemsida på mobil

Figur 13, Startsidan på hemsidan med en drop-down meny och en slide med unika 3

(24)

17

(25)

18

Figur 15, Våra Tjänster, visar tjänster som erbjuds.

Figur 16, Fortsättning av “Våra Tjänster”

(26)

19

Figur 18, Företagets portfölj.

(27)

20

Figur 20, Fortsatt visning av portföljen.

(28)

21

Figur 22, Kontaktinformation till företaget.

(29)

22

(30)

23

7.3 Rosana Restaurang och Bar’s hemsida på mobil

Figur 25, Drop-down meny.

(31)

24

Figur 26, Startsidan för Rosana.

Figur 27, här finns information av råvaror från verksamheten.

(32)

25

Figur 29, Fortsättning på hemleverans/hämtning sektionen.

(33)

26

Figur 31, Instagram flöde.

(34)

27

(35)

28

7.4 Serviceförmedlingen kontaktformulär PHP kod

<?php

//Den som tar emot mail från kontaktformuläret

$receiving_email_address = 'info.serviceformedlingen@gmail.com'; //använd php email form, annars ge felmeddelande

if( file_exists($php_email_form = '../assets/vendor/php-email-form/php-email-form.php' )) { include( $php_email_form );

} else {

die( 'Unable to load the "PHP Email Form" Library!'); }

// smtp konf till mail server hostinger $contact->SMTPAuth = true; $contact->SMTPSecure = 'tls'; $contact->Host = "smtp.hostinger.com"; $contact->Mailer = "smtp"; $contact->Port = 587; $contact->Username = ""; $contact->Password = "";

// I HTML så skrivs det in namn, email, ämne, telefonnummer och sedan en beskrivning, med hjälp av $_POST så kan vi få de värdena eller vad personen skrivit hit så att det kan skickas senare, vi får dessa eftersom i HTML filen finns en method=post rad som är länkad till knappen skicka.

$contact = new PHP_Email_Form; $contact->ajax = true; $contact->to = $receiving_email_address; $contact->from_name = $_POST['name']; $contact->from_email = $_POST['email']; $contact->subject = $_POST['subject']; $contact->phone = $_POST['phone'];

// Här skickas mailet med formatering eftersom det är viktigt att det kan läsas på ett tydligt sätt, där även meddelandet behöver vara 10 tecken långt minimum för att skickas.

$contact->add_message( $_POST['name'], 'Namn'); $contact->add_message( $_POST['email'], 'Email');

$contact->add_message( $_POST['phone'], 'Telefonnummer'); $contact->add_message( $_POST['message'], 'Meddelande', 10); echo $contact->send();

(36)

29

7.5 Serviceförmedlingen kontaktformulär HTML kod

 <div class="contact-form form">

 <form action="forms/contact.php" method="post" role="form" class="php-email-form"> 

<div class="form-group">

<input type="text" name="name" class="form-control" id="name" placeholder="Ditt namn" data-rule="minlen:4" data-msg="Skriv minst 4 tecken">

<div class="validate"></div> </div>

<input type="email" class="form-control" name="email" id="email" placeholder="Din Email" data-rule="minlen:4" data-msg="Skriv en giltig email">

 <div class="form-group">

<input type="text" class="form-control" name="subject" id="subject" placeholder="Ämne" data-rule="minlen:3" data-msg="Skriv minst 3 tecken">

<input type="number" class="form-control" name="phone" id="phone"

placeholder="Telefonnummer" data-rule="minlen:4" data-msg="Skriv hela telefonnummret"> <div class="validate"></div>

</div>

<textarea class="form-control" name="message" rows="5" data-rule="required" data- msg="Beskrivning av arbete" placeholder="Message"></textarea>

(37)

30

<div class="mb-3">

<div class="loading">Laddar</div> <div class="error-message">Error</div>

<div class="sent-message">Ditt meddelande har skickats. Tack!</div> </div>

 <div class="text-center">

<button type="submit">Skicka meddelande</button> </div>

</form> </div>

7.6 Serviceförmedlingen Tjänster sektionen:

 <div id="services" class="services-area area-padding"> <div class="container">

<div class="row">

<div class="col-md-12 col-sm-12 col-xs-12">

<div class="section-headline services-head text-center"> <h2>Våra Tjänster</h2>

</div> </div> </div>

<div class="row text-center"> 

<div class="col-md-4 col-sm-4 col-xs-12"> <div class="about-move">

<div class="services-details"> <div class="single-services">

<a class="services-icon" href="#"> <i class="fa fa-truck"></i> </a> <h4>Leverant av IT produkter</h4>

<p>

Vi erbjuder ett brett utbud av standardiserade och kundanpassade digitala tjänster. Vi kan leverera IT produkter direkt till ditt företag, installera och konfigurera klart så att det enda du gör är ditt job och slapna av.

</p> </div> </div> </div> </div> 

(38)

31

<a class="services-icon" href="#"> <i class="fa fa-user-secret"></i> </a> <h4>Personlig Tekniker</h4>

<p>

Som både företag eller privatkund hos oss hjälper vi dig med det mesta gällande datorer tex: installation och updatering av mjukvaror, Wifi analys & dålig wifi täckning, konfiguration av ditt nätverk, Office 365 integration och hjälp med krånglande mejl osv..

</p> </div> </div> </div> </div> 

<div class="col-md-4 col-sm-4 col-xs-12"> <div class=" about-move">

<a class="services-icon" href="#"> <i class="fa fa-paint-brush"></i> </a> <h4>Grafik, animation och logga design</h4>

<p>

Vill du ha en proffsig och unik logo för ditt företag eller förening? Har du svårt att bestämma dig vilken design du vill ha eller vill du ha en rolig animation kanske för en reklamfilm för dina sociala medier? Då är du på rätt ställe, här kan du få både råd och unik design av din logo eller broschyr gjort billigt och snabbt.

</p> </div> </div> </div> </div> 

<a class="services-icon" href="#"> <i class="fa fa-cogs"></i> </a> <h4>Web Design</h4>

<p>

Vill du ha hjälp med design av en hemsida för ditt företag eller förening? Då finns vi här för dig. Som kund hos oss kan du snabbt nå fram med din åsikt eller önskan så levererar vi.

</p>

(39)

32

</div>

<a class="services-icon" href="#"> <i class="fa fa-recycle"></i> </a> <h4>Hushållstjänster</h4>

<p>

Till både privatperson och företag erbjuder vi hushållstjänster och regelbunden städning av lokal(er), både med och utan RUT-avdrag.

</p> </div> </div> </div> </div> 

<a class="services-icon" href="#"> <i class="fa fa-language"></i> </a> <h4>Tolk Tjänster</h4>

<p>

Just nu erbjuder vi gratis tolkning på din första bokning (max 1 timme). Våra tolkare finns att boka både på plats eller digitalt. Vi erbjuder tolkning för följande språk:

</p> <p>

(40)

33

7.7 Serviceförmedlingen Googlemap implementation:

<div class="col-md-6 col-sm-6 col-xs-12"> <iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13615.166344057898!2d2 0.95748000875157!3d64.75057127693178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2! 1s0x467e953163f40419%3A0x61bf988739269d8c!2sSkeppargatan%2011A%2C%20931%203 0%20Skellefte%C3%A5!5e0!3m2!1ssv!2sse!4v1589232462852!5m2!1ssv!2sse" width="100%" height="380" frameborder="0" style="border:0;" allowfullscreen=""></iframe> </div>

7.8 Serviceförmedlingen Statiska Instagram bilder:

(41)

34

7.9 Serviceförmedlingen Navigationsmeny

 <header id="header" class="fixed-top"> <div class="container d-flex">

<div class="logo mr-auto">

<h1 class="text-light"><a href="index.html">Serviceförmedlingen</a></h1> </div>

<nav class="nav-menu d-none d-lg-block"> <ul>

<li class="active">

<a href="#header">Startsida</a> </li>

<li>

<a href="#about">Om oss</a> </li>

<li>

<a href="#services">Tjänster</a> </li>

<li>