Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f740bf7

Browse files
tony23codingtony23coding
authored
Add files via upload
1 parent 639e720 commit f740bf7

File tree

9 files changed

+273
-0
lines changed

9 files changed

+273
-0
lines changed

‎Homework Week2/Main.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Grids</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Grids</h1>
12+
</header>
13+
<main>
14+
<section>
15+
<h2>Grid with flexbox</h2>
16+
<ul id="grid-flex">
17+
<li class="grid-item">
18+
<h3>Drone 6-AXIS + camera</h3>
19+
<img src="images/drone1.png">
20+
<p>Oyuncakçı Eddy’nin dronu yeni başlayanlar için, altı ekseni var. 2.4Ghz kumadasıyla hareket ederek 50 metre yüksekliğe kadar çıkabilir. Uçuş süresi ise 6 dakika.</p>
21+
</li>
22+
<li class="grid-item">
23+
<h3>DJI Mavic Pro Fly More Combo</h3>
24+
<img src="images/drone2.png">
25+
<p dir="rtl">طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.</p>
26+
</li>
27+
<li class="grid-item">
28+
<h3>DJI Phantom 4</h3>
29+
<img src="images/drone3.png">
30+
<p>De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.</p>
31+
</li>
32+
<li class="grid-item">
33+
<h3>DJI Phantom 3 Standard</h3>
34+
<img src="images/drone4.png">
35+
<p>Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.</p>
36+
</li>
37+
<li class="grid-item">
38+
<h3>YUNEEC Breeze 4K</h3>
39+
<img src="images/drone5.png">
40+
<p>De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.</p>
41+
</li>
42+
<li class="grid-item">
43+
<h3>SKEYE Nano Drone</h3>
44+
<img src="images/drone6.png">
45+
<p>Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.</p>
46+
</li>
47+
<li class="grid-item">
48+
<h3>DJI Spreading Wings S900</h3>
49+
<img src="images/drone7.png">
50+
<p>Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.</p>
51+
</li>
52+
<li class="grid-item">
53+
<h3>Drone 6-AXIS + camera</h3>
54+
<img src="images/drone1.png">
55+
<p>De Eddy Toys Drone is een instap drone met 6 assen en laat zich besturen door de meegeleverde 2.4Ghz controller met een bereik tot 50m hoogte.Vliegduur is 6 minuten.</p>
56+
</li>
57+
<li class="grid-item">
58+
<h3>DJI Mavic Pro Fly More Combo</h3>
59+
<img src="images/drone2.png">
60+
<p>Met de Mavic, die direct opvalt vanwege zijn kleine afmeting, zet DJI een nieuwe standaard op het gebied van drones. De Mavic is zeer behulpzaam tijdens de niet altijd even makkelijke vluchten, vooral dankzij de vele ingebouwde technieken.</p>
61+
</li>
62+
<li class="grid-item">
63+
<h3>DJI Phantom 4</h3>
64+
<img src="images/drone3.png">
65+
<p>De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.</p>
66+
</li>
67+
<li class="grid-item">
68+
<h3>DJI Phantom 3 Standard</h3>
69+
<img src="images/drone4.png">
70+
<p>Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.</p>
71+
</li>
72+
<li class="grid-item">
73+
<h3>YUNEEC Breeze 4K</h3>
74+
<img src="images/drone5.png">
75+
<p>De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.</p>
76+
</li>
77+
<li class="grid-item">
78+
<h3>SKEYE Nano Drone</h3>
79+
<img src="images/drone6.png">
80+
<p>Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.</p>
81+
</li>
82+
<li class="grid-item">
83+
<h3>DJI Spreading Wings S900</h3>
84+
<img src="images/drone7.png">
85+
<p>Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.</p>
86+
</li>
87+
</ul>
88+
</section>
89+
</main>
90+
</body>
91+
</html>

‎Homework Week2/images/drone1.png

73.5 KB
Loading

‎Homework Week2/images/drone2.png

61.8 KB
Loading

‎Homework Week2/images/drone3.png

59.9 KB
Loading

‎Homework Week2/images/drone4.png

61.7 KB
Loading

‎Homework Week2/images/drone5.png

73.9 KB
Loading

‎Homework Week2/images/drone6.png

86.4 KB
Loading

‎Homework Week2/images/drone7.png

69 KB
Loading

‎Homework Week2/style.css

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
2+
header{
3+
background-color: chocolate;
4+
}
5+
6+
body{
7+
background-color: black;
8+
}
9+
10+
section h2{
11+
background-color: chocolate;
12+
}
13+
section {
14+
15+
background-color:grey;
16+
17+
}
18+
19+
#grid-flex{
20+
display: flex;
21+
flex-direction: row;
22+
flex-wrap: wrap;
23+
justify-content: space-around;
24+
align-items: stretch;
25+
}
26+
27+
#grid-flex li{
28+
list-style-type: none;
29+
}
30+
31+
#grid-flex li h3{
32+
text-align: center;
33+
}
34+
35+
.grid-item {
36+
margin:2%;
37+
border: 3px dotted black;
38+
box-shadow: 5px 10px 18px black;
39+
max-width: 19vw;
40+
}
41+
42+
img{
43+
box-shadow: 5px 10px 18px black;
44+
max-width: 18vw;
45+
}
46+
47+
p{
48+
box-shadow: 5px 10px 18px black;
49+
padding: 5px;
50+
}
51+
52+
h1, h2{
53+
text-decoration: underline;
54+
}
55+
56+
57+
/*Media query higher resolution Laptop-Desktop*/
58+
@media (min-width: 1281px) {
59+
60+
61+
62+
}
63+
/* Media query Laptops-Desktops */
64+
@media (min-width: 1400px) {
65+
.grid-item{max-width: 20%;
66+
background-color:chocolate;
67+
min-width: unset;
68+
}
69+
.grid-item img{
70+
display: block;
71+
margin-left: auto;
72+
margin-right: auto;
73+
width: 50%;
74+
}
75+
76+
#grid-flex li:nth-of-type(1) {
77+
min-width: 40%;
78+
79+
}
80+
81+
82+
}
83+
84+
/* Media query Tablets */
85+
@media (min-width: 768px) and (max-width: 1399px) {
86+
.grid-item{max-width: 20%;
87+
background-color:chocolate;
88+
min-width: unset;
89+
}
90+
.grid-item img{
91+
display: block;
92+
margin-left: auto;
93+
margin-right: auto;
94+
width: 50%;
95+
}
96+
97+
#grid-flex li:nth-of-type(1) {
98+
min-width: 45%;
99+
100+
}
101+
#grid-flex li:nth-of-type(2) {
102+
min-width: 45%;
103+
104+
}
105+
106+
107+
108+
}
109+
110+
/*Media query Phones */
111+
@media (min-width: 320px) and (max-width: 767px) {
112+
113+
.grid-item{max-width: 20%;
114+
background-color:chocolate;
115+
min-width: unset;
116+
}
117+
.grid-item img{
118+
display: block;
119+
margin-left: auto;
120+
margin-right: auto;
121+
width: 50%;
122+
}
123+
124+
#grid-flex li:nth-of-type(1) {
125+
min-width: 80%;
126+
127+
}
128+
129+
#grid-flex li:nth-of-type(2) {
130+
min-width: 35%;
131+
}
132+
#grid-flex li:nth-of-type(3) {
133+
min-width: 35%;
134+
}
135+
136+
#grid-flex li:nth-of-type(4) {
137+
min-width: 35%;
138+
}
139+
#grid-flex li:nth-of-type(5) {
140+
min-width: 35%;
141+
}
142+
#grid-flex li:nth-of-type(6) {
143+
min-width: 35%;
144+
}
145+
146+
#grid-flex li:nth-of-type(7) {
147+
min-width: 35%;
148+
}
149+
#grid-flex li:nth-of-type(8) {
150+
min-width: 35%;
151+
}
152+
153+
#grid-flex li:nth-of-type(9) {
154+
min-width: 35%;
155+
}
156+
157+
#grid-flex li:nth-of-type(10) {
158+
min-width: 35%;
159+
}
160+
161+
#grid-flex li:nth-of-type(11) {
162+
min-width: 35%;
163+
}
164+
165+
#grid-flex li:nth-of-type(12) {
166+
min-width: 35%;
167+
}
168+
169+
#grid-flex li:nth-of-type(13) {
170+
min-width: 35%;
171+
}
172+
173+
#grid-flex li:nth-of-type(14) {
174+
min-width: 35%;
175+
}
176+
177+
178+
179+
180+
181+
}
182+

0 commit comments

Comments
 (0)