Skip to content

Commit a1c81f9

Browse files
AlexanderVanheeAlexanderVanhee
committed
airbus update
1 parent 7deb1ef commit a1c81f9

File tree

2 files changed

+72
-54
lines changed

2 files changed

+72
-54
lines changed

‎labo9/airbus/airbus.html‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,14 @@
77
<link rel="stylesheet" href="styles/styles.css">
88
</head>
99

10-
<main>
10+
<body>
1111
<header> <!-- top -->
1212
<h1>AIRBUS - A380</h1>
1313
<h2>Het grootste passagiersvliegtuig ter wereld </h2>
1414
<img src="images/tekklein.png" alt="tekening van vliegtuig" />
1515
</header>
1616

17-
<aside> <!-- news -->
18-
<h3>Eerste vlucht</h3>
19-
<p>Het toestel maakte zijn eerste trans-Atlantische vlucht met passagiers op 19 maart 2007 tussen
20-
Frankfurt am Main en New York.
21-
</p>
22-
<h3>Singapore</h3>
23-
<p>De eerste vijf A380 toestellen werden aan Singapore Airlines geleverd. Nadat in Toulouse het eerste
24-
afgeleverde toestel op 15 oktober 2007 officieel aan Singapore Airlines overgedragen was, werd op 25
25-
oktober de eerste commerciële vlucht uitgevoerd.
26-
</p>
27-
<h3>Qantas</h3>
28-
<p>Bij een A380 van Qantas (QF32) deed zich kort na het opstijgen van de Luchthaven van Singapore een
29-
"uncontained engine failure" voor waarbij er delen van de motor afvielen. Brokstukken van de
30-
motorbehuizing vielen op het Indonesische eiland Batam. Er vielen geen gewonden.
31-
</p>
32-
<h3>Air France</h3>
33-
<p>Een Airbus A380 van Air France raakte tijdens het taxiën naar de startbaan op John F. Kennedy
34-
International Airport met zijn vleugel de staart van een Bombardier CRJ700 van Comair.
35-
</p>
36-
</aside>
37-
38-
<div> <!-- main -->
39-
40-
17+
<div class="content"> <!-- main -->
4118
<figure> <!-- logo -->
4219
<img src="images/airbus_logo.jpg" alt="Het logo van airbus" />
4320
</figure>
@@ -86,6 +63,27 @@ <h3>Air France</h3>
8663
</div>
8764
</div>
8865

66+
<aside> <!-- news -->
67+
<h3>Eerste vlucht</h3>
68+
<p>Het toestel maakte zijn eerste trans-Atlantische vlucht met passagiers op 19 maart 2007 tussen
69+
Frankfurt am Main en New York.
70+
</p>
71+
<h3>Singapore</h3>
72+
<p>De eerste vijf A380 toestellen werden aan Singapore Airlines geleverd. Nadat in Toulouse het eerste
73+
afgeleverde toestel op 15 oktober 2007 officieel aan Singapore Airlines overgedragen was, werd op 25
74+
oktober de eerste commerciële vlucht uitgevoerd.
75+
</p>
76+
<h3>Qantas</h3>
77+
<p>Bij een A380 van Qantas (QF32) deed zich kort na het opstijgen van de Luchthaven van Singapore een
78+
"uncontained engine failure" voor waarbij er delen van de motor afvielen. Brokstukken van de
79+
motorbehuizing vielen op het Indonesische eiland Batam. Er vielen geen gewonden.
80+
</p>
81+
<h3>Air France</h3>
82+
<p>Een Airbus A380 van Air France raakte tijdens het taxiën naar de startbaan op John F. Kennedy
83+
International Airport met zijn vleugel de staart van een Bombardier CRJ700 van Comair.
84+
</p>
85+
</aside>
86+
8987
<nav class="bottom"> <!-- bottom -->
9088

9189
<div> <!-- block -->
@@ -120,7 +118,6 @@ <h3>Air France</h3>
120118
<footer> <!-- copyright -->
121119
<p>&lt; &copy; Airbus A380 &gt;</p>
122120
</footer>
123-
124-
</main>
121+
</body>
125122

126123
</html>

‎labo9/airbus/styles/styles.css‎

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
body {
22
font-family: Arial, Helvetica, sans-serif;
3+
display: grid;
4+
grid-template-columns: 70% 25%;
35
}
46

57
h1,
@@ -19,9 +21,17 @@ h2 {
1921
margin-bottom: 0;
2022
}
2123

24+
h3 {
25+
background-color: blue;
26+
color: white;
27+
text-align: center;
28+
font-size: 1.2em;
29+
}
30+
2231
header {
2332
background-image: url(../images/bgsky3.jpg);
2433
background-size: cover;
34+
grid-column: span 2;
2535
}
2636

2737
header>img {
@@ -31,9 +41,8 @@ header>img {
3141
right: 25%;
3242
}
3343

34-
35-
figure>img {
36-
float: left
44+
figure {
45+
float: left;
3746
}
3847

3948
p>span {
@@ -43,48 +52,60 @@ p>span {
4352
aside {
4453
border: 1px solid #999999;
4554
background-color: #dddddd;
55+
grid-column: 2;
56+
box-sizing: border-box;
4657
}
4758

48-
h3 {
49-
background-color: blue;
50-
color: white;
51-
text-align: center;
52-
font-size: 1.2em;
53-
}
54-
55-
aside>p {
56-
color: #666666;
57-
font-size: 0.9em;
59+
.content {
60+
grid-column: 1;
61+
box-sizing: border-box;
5862
}
5963

60-
.gallery {
61-
background-color: #999999;
62-
display: inline-block;
63-
64-
}
65-
66-
.foto>img {
67-
height: 180px;
68-
width: 180px;
69-
border: 10px solid white;
64+
footer,
65+
.bottom {
66+
grid-column: span 2;
7067
}
7168

7269
.bottom {
7370
width: 100%;
7471
background-color: #666666;
7572
color: white;
76-
font-size: 2em;
77-
display: inline-block;
78-
73+
line-height: 2em;
7974
}
8075

8176
.bottom>div {
8277
width: 200px;
83-
margin-left: 120px
78+
margin-left: 120px;
79+
display: inline-block;
80+
}
81+
82+
.bottom a {
83+
color: inherit;
84+
}
85+
86+
.bottom a:hover {
87+
color: red;
8488
}
8589

8690
footer>p {
8791
text-align: center;
8892
background-color: white;
93+
}
8994

95+
.gallery {
96+
background-color: #999999;
97+
line-height: 0;
98+
}
99+
100+
.foto {
101+
display: inline-block;
102+
border: 1px dotted white;
103+
margin: 20px;
104+
}
105+
106+
.foto>img {
107+
height: 180px;
108+
width: 180px;
109+
border: 10px solid white;
110+
box-sizing: border-box;
90111
}

0 commit comments

Comments
 (0)