Maak een eigen website van één-pagina (index.html). De inhoud mogen jullie kiezen, bijvoorbeeld een sportclub of
vereniging. Het is de bedoeling om de inhoud en de vormgeving aan te passen.
Verander de achtergrondkleur en tekstkleuren
Verander de eigenschappen color (tekstkleur) en background-color (achtergrondkleur). Geef ook een leuk lettertype mee voor de headings.
Positionering
In deze oefening staat display:flex centraal. Je plaats elementen naast elkaar.
Leer hier hoe u een soepel scrolleffect kunt creëren.
Bekijk hier het voorbeeld.
Je moet 2 zaken doen om naar een andere plaats binnen dezelfde pagina te springen:
- Om te kunnen linken naar een tekst verderop in een pagina, moet die tekst een ankerplaats worden.
<div class="main" id="section1">
-
Een link maken: je gooit een anker uit, naar de unieke ankerplaats die je net gemaakt hebt.
<a href="#section2">Link</a>
De volledige code ziet er zo uit:
<head>
<style>
#section1 {
height: 100vh;
overflow:auto;
background-color: pink;
}
#section2 {
height: 100vh;
overflow:auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
</body>
Je kan met CSS nu ook een soepel scrolleffect creëren.
Bekijk hier het voorbeeld.
html {
scroll-behavior: smooth;
}
Safari en oudere browsers ondersteunt deze CSS-code nog niet. Hierdoor moeten we jQuery gebruiken:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
/* opmaak container */ .container { /* in het midden centreren van de browser */ margin: 0 auto; border:1px solid black; }Media query voor verschillende groottes
/* media query's = responsive design */ /* hier geef je opmaak mee die specifiek dienen in deze schermgrootte /* small screen = mobiel */ @media only screen and (min-width: 48em) { .container { width: 46rem; } } /* medium screen = tablet en laptop */ @media only screen and (min-width: 62em) { .container { width: 61rem; } } /* large screen = desktop */ @media only screen and (min-width: 75em) { .container { width: 71rem; } }
Basis klasse .row
/* opmaak row flexibel maken */
/* elementen naast elkaar plaatsen ipv onder elkaar */
.row {
display: flex;
/* richting items rij of kolom */
/* flex-direction: row;*/
/* wrap = items onder elkaar plaatsen asl de rij breedte te klein wordt */
flex-flow: row wrap;
}
Maak volgende klassen aan:
/* breedtes in % responsive webdesign */
/* 1 kolom */
.col1 {
width:100%;
}
/* 2 kolommen */
.col2 {
width:50%;
}
/* 3 kolommen */
.col3 {
width:33.33%;
}
/* 4 kolommen */
.col4 {
width:25%;
}
/* 5 kolommen */
.col5 {
width:20%;
}
Ik heb 3 klassen gemaakt om elementen horizontaal uit te lijnen
* flex-eigenschappen om horizontaal te centreren */
.positieLeftHorizontaal {
/* standaard */
justify-content: flex-start;
}
.positieMiddenHorizontaal {
justify-content: center;
}
.positieRightHorizontaal {
justify-content: flex-end;
}
Ik heb 3 klassen gemaakt om elementen verticaal uit te lijnen
/* flex-eigenschappen om verticaal te centreren */
.positieLeftVerticaal {
/* standaard */
align-content: flex-start;
}
.positieMiddenVerticaal {
align-content: center;
}
.positieRightVerticaal {
align-content: flex-end;
}
HTML
<div class="row">
<div class="cell col2" >
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell col2">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
CSS
.row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cell {
box-flex: 1;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
}
/* zorgt ervoor dat elementen met padding en border de breedte niet wordt opgeteld met de totale breedte */ * { box-sizing:border-box; } body { /* zorgt dat de browser mooi vanuit de linker bovenhoek begint */ margin:0; /* tekstkleur */ color:black; /* letterfamily */ font-size:16px; font-family: Arial,sans-serif; }
/* opmaak hoogtes */
nav {
position: ...;
height: 5vh;
line-height: 5vh;
width: 100%;
z-index:...;
}
header {
width: 100%;
height: ...;
border:1px solid black;
}
section {
width: 100%;
height: ...;
position: relative;
border:1px solid black;
}
footer {
width: 100%;
/* verander de hoogte naar een vaste pixel hoogte van 40 pixels */
height:...;
/* verander de regelafstand ook naar 40 pixels zo komt je tekst mooi verticaal uitgelijnd */
line-height: ...;
}
/* typografie */ h2 { /* verander het lettertype, wees creatief en haal één van https://fonts.google.com, plaast de link binnen de-tag */ font-family:...; font-size:2em; text-align:...; } #info h2, #foto h2 { /* verander overal de kleur van de tekst */ /* verander het lettertype */ /* andere stijl wijzigingen ? bv. letter in kapitalen of vet of schuin of */ } #team h2, #contact h2 { /* verander overal de kleur van de tekst */ /* verander het lettertype */ /* andere stijl wijzigingen ? bv. letter in kapitalen of vet of schuin of */ } footer p { /* verander overal de kleur van de tekst */ /* tekst in het midden centreren */ }
/* opmaak met kleuren achtergrondkleur en eventueel tekstkleur */
/* opmaak header */
header {
/* verander de achtergrondafbeelding */
background-image: url("img/....png");
/* verander de positie van de achtergrond naar het midden zowel horizontaal als verticaal */
background-position: ... ...;
/* zorg dat de achtergrondafbeelding niet herhaald */
background-repeat:...;
/* achtergrondafbeelding vergroten in de breedte 100% en hoogte 100% */
background-size:...;
}
/* opmaak section hoogte + achtergrondkleuren */
#team, #contact {
/* verander de kleur van de achtergrond */
background-color:...;
/* verander de tekstkleur */
color:...;
}
#info, #foto {
/* verander de kleur van de achtergrond */
background-color:...;
/* verander de tekstkleur */
color:...;
}
/* opmaak footer */
footer {
/* verander de kleur van de achtergrond */
background-color:...;
text-align:...;
}
/* opmaak navigatie */ nav { /* verander overal de kleur van de achtergrond */ background-color:...; } /* verander de standaard opmaak voor de hyperlinks enkel binnen de nav-tag */ nav a { /* verander de kleur van de tekst */ color:...; /* lettergewicht vet */ font-weight: 600; /* de tekst onderlijning afzetten */ text-decoration: none; /* de binnenruimte van het element verhogen met 10 pixels voor links en rechts % */ padding:... ...; } /* wanneer je met de muis over de navigatie staat */ nav a:hover { /* verander overal de kleur van de tekst */ color:white; text-decoration: none; }
De eigenschap padding zorgt voor ruimte binnen. Kies een andere waarde als je meer of minder ruimte wilt.
Bij de links van de menu heb ik ook gekozen voor binnenruimte 10 pixels.
nav a {
/* verander de kleur van de tekst */
color:black;
/* lettergewicht vet */
font-weight: 600;
/* de tekst onderlijning afzetten */
text-decoration: none;
/* de binnenruimte van het element verhogen met 10 pixels voor links */
padding:0 10px;
}
Ik heb dit toegepast bij #info zodat de tekst en foto niet tegen elkaar zouden staan .
Maak zelf eigen klassen aan en geef eigen pixel waarden mee.
/* ruimte binnen een element */
/* waarde 30px - verander de waarde als je meer of minder wilt! */
.paddingLeft30 {
padding-left:30px;
}
.paddingLTop60 {
padding-top:60px;
}
Met margin kunnen we het element .container centreren in het midden via margin:0 auto; ofwel elementen afstand geven tot elkaar.
Ik heb dit gebruikt om in de menu de links meer afstand van elkaar te geven.
/* ruimte buiten een element */
nav a {
margin-left:30px;
}
/* waarde 30px - verander de waarde als je meer of minder wilt! */
.marginTop30 {
margin-top:30px;
}
Je mag de knop aanpassen van tekst- en achergrondkleur.
* Hieronder moet je niet meer aanpassen */
/* opmaak voor de knop */
button {
min-height:50px;
width:120px;
padding:5px;
border-radius:5px;
border:2px solid #fff;;
background-color: #efb267;
}
button:hover, button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
border:2px solid #efb267;;
background-color: #fff;
}