In de tweede project periode moesten we een website voor een restaurant maken en daarbij “responsive webdesign” gebruiken

in tegenstelling tot de vorige project moesten we individueel een website opleveren, allen de voorliggende documentatie van dingen zoals ontwikkel omgeving opzetten, planning en concept realisatie zijn met de groep gedaan.

ik heb in deze project niet zoveel tijd gestoken als het eerste, en dat laat zich zien in de kleine details en het feit dat de eindproduct een simpeler vormgeving heeft dan de mockups die ik ervoor had gemaakt.

(voorbeelden van code gebruikt hieronder)

(de head sectie van de pagina’s)

<head>
 <meta charset="utf-8">
 <meta name="description" content="great food">
 <meta name="author" content="Valiant Hekert">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link rel="stylesheet" href="cascading_slow_sharts/css.css">
 <link rel="stylesheet" media="(max-width: 600px)" 
                             href="cascading_slow_sharts/320at480.css">
 <link rel="stylesheet" media="(min-width: 601px) and (max-width: 
                   1024px)" href="cascading_slow_sharts/768at1024.css">
 <link rel="stylesheet" media="(min-width: 1025px)" 
                             href="cascading_slow_sharts/1025plus.css">
 
 <title>Aztek Carsita</title>
</head>

ik heb gebruik gemaakt van 4 stylesheets om op die manier responsieve te maken op de voorgegeven formaat grote.

Op de gallery pagina heb ik een scrollbare weergave van foto’s die gebruikt zijn op de website.

html

(wordpess faald op het moment dat
je img gebruikt aldus een plaatje)

om het naar rechts-links te kunnen scrollen is er een stuk css nodig, het grooste deel twouwens van dit project was in manipulatie van css.

(css)

#glallaera{
 float: left;
 height: 75vh;
 overflow-x: scroll;
}
 .foto{
 height: 100%;
 float: left;
 }
 #scroller{
 max-height: 50vh;
 width: 500vw;
 }

Nog een paar laatste punten zijn dat de youtube video en google maps een ’embed’ zijn op de website, ze werken maar het was wel kopiëren en plakken voor een groot deel. Ik heb ook gebruik gemaakt van meerder id’s en classes die dezelfde variables gebruiken maar ook individueel iets anders doen

css

#collom1,#collom2, #collom3, #collom4{
 height: 75vh;
}
#fotorij, #fotorij2{
 height: 75vh;
 background-color: transparent;
}
html, body{
 background-color: #eac39e;
}
th, td{
 float: left;
 width: 12vw;
 height: 2vh;
 border-bottom: 1px inset black;
}
Advertisements