Show sourcecode
The following files exists in this folder. Click to view.
Komplettering.txt
Läs mig.txt
Processanalys.docx
fonts/
images/
includes/
kontakt.html
minatjanster.html
ommig.html
showcase/
showcase.html
startsida.html
stylesheets/
showcase.html
1 lines UTF-8 Unix (LF)
<!DOCTYPE html>
<html lang='sv'>
<head>
<title>Nicolas Dubray</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1"> <!-- Sätter "vyn" av sidan till enhetens bredd, och full skala från början. -->
<link rel="stylesheet" href="stylesheets/main.css" type="text/css">
<link rel="stylesheet" href="stylesheets/responsive.css" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Eftersom jag tänkte att överdelen och underdelen av startsidan kanske lämpligen kunde finnas med på alla sidor
(särskilt eftersom överdelen har en navigationsmeny) så har jag lagt dessa delar i varsin php-fil, vilket då ger mig två
filer jag smidigt kan inkludera på varje sida som skall ha någon eller båda av dessa delar. -->
<!-- Jag har valt att skriva HTML-koden (och CSS-koden) på så vis att den upplösning för mobilskärmar som jag valt som
den minsta upplösning med vilken sidan skall visas korrekt är utgångsläget för koden, eftersom det för mig känns bäst
att för responsiv design ha ett utgångsläge från vilket man kodmässigt antingen *enbart* förstorar eller förminskar.
Ex. så innebär detta att HTML- (och CSS-koden) har som utgångsläge att visa kolumnen som i mallen för desktop-sajten är
mittenkolumnen som den översta kolumnen (tekniskt sett, den "vänstra" kolumnen, eftersom det, med min lösning, är den
vänstra kolumnen som hamnar överst), vilket enligt uppgiftsbeskrivningen skulle vara fallet för mobil-sajten. -->
<header>
<!-- Jag har valt att för loggan inte direkt i HTML-koden skapa en img-tag som innehar logo-bilden utifall att
jag skulle vilja påverka val av logga i CSS-filer, ex. om jag skulle vilja ange en annan logga för utskrift.
Jag har givit divisionen nedan "logo" som ett id eftersom jag har tänkt att det på varje sida skall finnas
maximalt en sådan här logga.
Loggan har jag dessutom gjort till en länk som tar en till startsidan, för att göra den användarbar samt för att
följa den logo-"standarden". -->
<a href="startsida.html"><div id="logo"></div></a>
<!-- Jag har omslutit de länkar genom vilka man kan navigera runt sig till sajtens olika sidor med nav-taggar,
eftersom sådana taggar ämnade för att innehålla navigerings-element, ex. just text-länkar, liksom mina. -->
<nav>
<a href="ommig.html"> OM MIG </a>
<a href="minatjanster.html"> MINA TJÄNSTER </a>
<a href="showcase.html"> SHOWCASE </a>
<a href="kontakt.html"> KONTAKT </a>
</nav>
<!-- Jag har omslutit mina nyckelord med div-taggar vilka jag givit den semantiska betydelsen "keywords" eftersom
jag inte känner till någon HTML-tag som redan har den semantiska betydelsen. Jag har satt betydelsen som ett id
eftersom jag har tänkt att det på varje sida maximalt skulle finnas en sådan här division för nyckelord. -->
<div id="keywords">
<!-- Jag har valt att lista olika mjukvaruteknologier jag behärskar, i varierande utsträckning, som del av
en punktlista eftersom det i mall-bilderna för både desktop- och mobil-sidan uppgiftsbeskrivningen står
att man skulle ha en "Kort text / punkter om dig själv för att fånga intresse från en potentiell klient".
Jag har omslutit list-föremålen med strong-taggar för att bestyrka deras vikt. -->
<ul>
<li><strong>C++, C#, C, Java, Python, Assembler</strong></li>
<li><strong>HTML, PHP, CSS</strong></li>
<li><strong>DirectX</strong></li>
</ul>
</div> <!-- END KEYWORDS -->
</header>
<!-- Jag har valt att omsluta innehållet på startsidan med en division som jag jag givit den semantiska betydelsen
"columns_mains" eftersom jag vill att den skall inneha och arrangera kolumner, eftersom mallarna för både desktop-
och mobil-sajten visar startsidans innehåll inuti kolumner som är sida vid sida eller över/under varann. -->
<div id="columns_main">
<!-- Eftersom den minsta mobilupplösning jag designat för är utgångsläget för sajtens kod så är kolumnen med
bilden på mig ("me.jpg") den första kolumnen, och därmed den väntra, kolumnen intuti kolumn-behållaren,
eftersom denna behållare visar den första/vänstra kolumnen överst när webbläsarfönstret blir såpass
smalt att bara en kolumn får plats i bredd inuti det. -->
<div class="column_main_c">
<!-- Jag har valt att omsluta kolumnernas img-taggar med divisioner jag givit olika semantiska
betydelser som avser just bild-behållande för de olika kolumnerna. -->
<img class="center_top circled" src="images/placeholder.jpg" alt="Bild på Nicolas">
<p>Base land speed cold domain darkness domain divination fear aura melee attack spell preparation surprise take damage temporary hit points. Chaotic subtype energy charge energy drained ethereal plane fly frightful presence illusion improved grab magic domain melee attack bonus mundane nauseated penalty skill check spell failure spellcaster total concealment trickery domain.</p>
<p>Caster level charisma cold immunity comatose elf domain energy charge enhancement bonus fear aura healing domain immunity positive energy regeneration special ability unarmed strike.</p>
<p>0-level spell ability score automatic hit balance domain creation subschool death attack fear ray flight heat dangers invisible level adjustment penalty shadow subschool shaken.</p>
<p>Source: <a href=http://dndipsum.com/>dndipsum.com</a></p>
<a href="showcase/games.rar" download title="Games">
<img class="noprint center_bottom" width=110 src="images/buttons/download/games.png" alt="Game icon">
</a>
</div>
<div class="column_main_c">
<img class="center_top circled" src="images/placeholder.jpg" alt="Bild på kod">
<p>Haxx0r ipsum hexadecimal foad error linux overflow xss rm -rf ack new leapfrog flood bar gnu for stdio.h null try catch injection. Cd headers case warez var hash ctl-c buffer Trojan horse. Then flush ip crack chown pragma concurrently stack trace default.</p>
<p>Tarball mutex terminal public endif ssh data exception wabbit bar recursively break ack port James T. Kirk. Shell hello world for pragma sql sudo tera root access big-endian hexadecimal. Thread packet sniffer segfault man pages int loop hash tcp gc mountain dew.</p>
<p>Rm -rf fail *.* vi bubble sort hexadecimal error shell echo chown perl all your base are belong to us. Regex if fopen new cat bang grep hello world packet throw alloc break. True infinite loop foo leet wannabee boolean sudo warez ascii void rm -rf piggyback injection gurfle protected.</p>
<p>Source: <a href=http://hackeripsum.com/>hackeripsum.com</a></p>
<a href="showcase/techs.rar" download title="Tech demos">
<img class="noprint center_bottom" width=110 src="images/buttons/download/techs.png" alt="Tech icon">
</a>
</div>
<div class="column_main_c">
<img class="center_top circled" src="images/placeholder.jpg" alt="Bild på penna">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisi nec nisl feugiat luctus ac et massa. Nunc scelerisque libero eu magna consectetur, in facilisis ex rutrum. Suspendisse rutrum mi sit amet tortor luctus rhoncus.</p>
<p>Duis placerat feugiat sem, eget dictum libero mattis eget. Vestibulum ligula dolor, cursus at lacinia sed, mollis vel dui. Proin tempor in quam in pellentesque. Nullam ultricies vitae elit at porttitor.</p>
<p>Nulla eu nulla vel nibh porta luctus ut et felis. Nam mattis pellentesque mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Curabitur bibendum ex lobortis, lobortis enim cursus, pharetra purus. Nunc dictum ante sed dui tincidunt luctus.</p>
<a href="showcase/models.rar" download title="Models">
<img class="noprint center_bottom" width=110 src="images/buttons/download/models.png" alt="Model icon">
</a>
</div>
<div class="column_main_c">
<img class="center_top circled" src="images/placeholder.jpg" alt="Bild på penna">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisi nec nisl feugiat luctus ac et massa. Nunc scelerisque libero eu magna consectetur, in facilisis ex rutrum. Suspendisse rutrum mi sit amet tortor luctus rhoncus.</p>
<p>Duis placerat feugiat sem, eget dictum libero mattis eget. Vestibulum ligula dolor, cursus at lacinia sed, mollis vel dui. Proin tempor in quam in pellentesque. Nullam ultricies vitae elit at porttitor.</p>
<p>Nulla eu nulla vel nibh porta luctus ut et felis. Nam mattis pellentesque mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Curabitur bibendum ex lobortis, lobortis enim cursus, pharetra purus. Nunc dictum ante sed dui tincidunt luctus.</p>
<a href="showcase/images.rar" download title="Images">
<img class="noprint center_bottom" width=110 src="images/buttons/download/images.png" alt="Image icon">
</a>
</div>
<div class="column_main_c">
<img class="center_top circled" src="images/placeholder.jpg" alt="Bild på penna">
<p>Lorizzle ipsizzle dolor fizzle amizzle, check out this adipiscing shiz. Nullam sure velizzle, cool volutpat, suscipizzle quizzle, gravida funky fresh, arcu. Pellentesque for sure tortor. Sizzle erizzle. Away at dolizzle dapibizzle turpis tempus black.</p>
<p>Phasellizzle we gonna chung volutpat bizzle. Ut dang adipiscing lorem. Away non est. Fo shizzle sapizzle mammasay mammasa mamma oo sa, ultrices fo shizzle mah nizzle fo rizzle, mah home g-dizzle, accumsan shit, fermentizzle break yo neck, yall, pede.</p>
<p>Etizzle fizzle magna sed augue hendrerit accumsan. Shit izzle est. Hizzle mauris dolizzle, cool for sure, facilisizzle id, ultrices izzle, we gonna chung.</p>
<p>Source: <a href=http://lorizzle.nl>lorizzle.nl</a></p>
<a href="showcase/songs.rar" download title="Songs">
<img class="noprint center_bottom" width=110 src="images/buttons/download/songs.png" alt="Song icon">
</a>
</div>
<div class="column_main_c">
<img class="center_top circled" src="images/placeholder.jpg" alt="Bild på penna">
<p>New threats. Everyones favorite super team presented in true blockbuster fashion. The instructors at Avengers Academy hope to steer these super-powered and highly-troubled teens in the right direction, but twists and turns abound.</p>
<p>Will they be the next generation of Earths Mightiest Heroes…or the greatest threat to the Marvel Universe. Vowing to serve his country any way he could, young Steve Rogers took the super soldier serum to become Americas one-man army. The Avengers return.</p>
<p>Iron Man, Thor, Captain America and the rest of Earths Mightiest Heroes unite to stand against the threats none can face alone. New roster. Earths Mightiest Heroes reunite with their biggest guns at the forefront to take on familiar enemies and new threats alike.</p>
<p>Source: <a href=http://marvelipsum.com/>marvelipsum.com</a></p>
<a href="showcase/scripts.rar" download title="Scripts">
<img class="noprint center_bottom" width=110 src="images/buttons/download/scripts.png" alt="Script icon">
</a>
</div>
</div> <!-- END COLUMNS_MAIN -->
<!-- Eftersom jag tänkte att överdelen och underdelen av startsidan kanske lämpligen kunde finnas med på alla sidor
(särskilt eftersom överdelen har en navigationsmeny) så har jag lagt dessa delar i varsin php-fil, vilket då ger mig två
filer jag smidigt kan inkludera på varje sida som skall ha någon eller båda av dessa delar. -->
<!-- Jag har valt att omsluta kontakt-informationen inuti address-taggar, eftersom sådana taggar är avsedda just för
sådan information. Upplägget skulle vara mer semantiskt korrekt om jag istället skulle omsluta telefonnumrena i en
div jag klassar/identifierar som "phonenumber", men jag tyckte att det blev lite väl pedantiskt. För övrigt är
formateringen av de angivna telefonnumrena är sådan att numrena faktiskt kan uppfattas som telefonnunmmer
av vissa mjukvaror, ex. Skype. -->
<footer>
<!-- Jag har valt att skilja address-elementen åt genom att omsluta de med div-taggar som jag behandlar som
kolumner. Alternativt hade jag kunnat skilja de åt genom att omsluta de i celler tillhörandes en tabell,
men man avvisades i uppgiftsbeskrivningen från att bruka tabeller för sidornas struktur. -->
<div class="column_footer">
<address>
<strong>Adress</strong>
<p>Storgatan 1<br>123 45 Lillestad</p>
</address>
</div>
<div class="column_footer">
<address>
<strong>Telefon</strong>
<p>0123 - 456 789<br>070 - 123 45 678</p>
</address>
</div>
<div class="column_footer">
<address>
<strong>E-post</strong>
<p>info@stortego.se<br>sales@stortego.se</p>
</address>
</div>
</footer>
</div> <!-- END WRAPPER -->
</body>
</html>