Skip to content

week4 assignment submission #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aalitenaye wants to merge 1 commit into
base: master
Choose a base branch
from
Open

week4 assignment submission #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions index.html → index2.html
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grids</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styletwo.css">
<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
Expand All @@ -14,72 +16,72 @@ <h1>Grids</h1>
<section>
<h2>Grid with floats</h2>
<ul id="grid-floats">
<li class="grid-item">
<li class="grid-item item-a">
<h3>6 Eksenli Drone + Kamera</h3>
<img src="images/drone1.png">
<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>
<p>Oyuncakçı Eddy’nin dronu yeni başlayanlar için, altı ekseni var. 2.4Ghz kumadasıyla shareket ederek 50 metre yüksekliğe kadar çıkabilir. Uçuş süresi ise 6 dakika.</p>
</li>
<li class="grid-item">
<li class="grid-item item2">
<h3>DJI Mavic Pro Fly More Combo</h3>
<img src="images/drone2.png">
<p dir="rtl">طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.</p>
</li>
<li class="grid-item">
<li class="grid-item item3">
<h3>DJI Phantom 4</h3>
<img src="images/drone3.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item4">
<h3>DJI Phantom 3 Standard</h3>
<img src="images/drone4.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item5">
<h3>YUNEEC Breeze 4K</h3>
<img src="images/drone5.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item6">
<h3>SKEYE Nano Drone</h3>
<img src="images/drone6.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item7">
<h3>DJI Spreading Wings S900</h3>
<img src="images/drone7.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item8">
<h3>Drone 6-AXIS + camera</h3>
<img src="images/drone1.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item9">
<h3>DJI Mavic Pro Fly More Combo</h3>
<img src="images/drone2.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item10">
<h3>DJI Phantom 4</h3>
<img src="images/drone3.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item11">
<h3>DJI Phantom 3 Standard</h3>
<img src="images/drone4.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item12">
<h3>YUNEEC Breeze 4K</h3>
<img src="images/drone5.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item13">
<h3>SKEYE Nano Drone</h3>
<img src="images/drone6.png">
<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>
</li>
<li class="grid-item">
<li class="grid-item item14">
<h3>DJI Spreading Wings S900</h3>
<img src="images/drone7.png">
<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>
Expand Down
145 changes: 145 additions & 0 deletions styletwo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@

/* Mobile Phones*/
@media(max-width: 768px) {
header {
font-family: 'Fredoka One', cursive;
font-size: 20px;
text-align: center;
background-color: rgba(193, 66, 66, 0.3);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;
padding: 5px;
margin: 10px 10px 10px 10px;
}
h2 {
font-family: 'Fredoka One', cursive;
font-size: 20px;
text-align: center;
}
h3 {
font-family: 'Fredoka One', cursive;
font-size: 15px;
}
p {
font-family: 'Special Elite', cursive;
font-size: 15px;
}
img {
width: 100%;
float: top;
}
#grid-floats {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.grid-item {
background-color: rgba(193, 66, 66, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 13px;
}
}
/* Tablets */
@media(min-width: 769px) and (max-width: 1023px) {
header {
font-family: 'Fredoka One', cursive;
font-size: 30px;
text-align: center;
background-color: rgba(193, 66, 66, 0.3);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;
padding: 5px;
margin: 10px 10px 10px 10px;
}
h2 {
font-family: 'Fredoka One', cursive;
font-size: 20px;
text-align: center;
}
h3 {
font-family: 'Fredoka One', cursive;
font-size: 15px;
}
p {
font-family: 'Special Elite', cursive;
font-size: 15px;
}
img {
width: 100%;
float: top;
}
#grid-floats {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.grid-item {
background-color: rgba(193, 66, 66, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 13px;
}
}
/* Desktops */
@media(min-width: 1024px) {
header {
font-family: 'Fredoka One', cursive;
font-size: 30px;
text-align: center;
background-color: rgba(193, 66, 66, 0.3);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;
padding: 5px;
margin: 10px 10px 10px 10px;
}
h2 {
font-family: 'Fredoka One', cursive;
font-size: 20px;
text-align: center;
}
h3 {
font-family: 'Fredoka One', cursive;
font-size: 15px;
}
p {
font-family: 'Special Elite', cursive;
font-size: 15px;
}
img {
width: 100%;
float: top;
}
#grid-floats {
display: grid;
grid-template-columns: [outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end] 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.grid-item {
background-color: rgba(193, 66, 66, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 13px;
}
.item-a {
grid-column: outer-start / center-end;
}
}