Skip to content

week4_responsive assignment #2

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
iwaseem wants to merge 2 commits into
base: master
Choose a base branch
from
Open

week4_responsive assignment #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4bb8cc
Add project files
Aug 8, 2019
a7572a8
week4_responsive asignment
Aug 11, 2019
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added hw_week4_Responsive/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added hw_week4_Responsive/images/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added hw_week4_Responsive/images/Brasil_background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw_week4_Responsive/images/waseem_salem_img.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions hw_week4_Responsive/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="Bio" content="Waseem Salem">
<meta name="Waseem Salem Biography" content="Personal bio, travel destenation">
<meta name="viewport" content="width-device-width, intial-scale=1.0">

<link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Waseem Salem Bio</title>
</head>
<body>
<section class="about">
<h1>Waseem Salem</h1>
<img src="images/waseem_salem_img.jpg" alt="Waseem Salem">
<p>Talented Art Director with over 15 years of experience in graphic design,
advertising and marketing. Experience includes the development of creative
and advertising campaigns in both creative and management roles.
Possesses technical skills, art direction, photography skills, and printing expertise.
</p>
<p>Proficiency in Adobe Photoshop, Illustrator, InDesign, Dreamweaver, and MS office, in both Mac and PC platforms.
Knowledge in web design (HTML, CSS).</p>
<br>
<h3>Some of my interestes</h3>
<p>I have so many dreams in my personal & my proffesional lives, on the professional side My dream is
to become a web developer and apply my creativity on website and mobile applications.
Also, to keep learning and growing in my carrer
<br>

As well, one of my dreams to travel to Rio De Janeiro in Brazil, and learn about the country and it's culture
</p>
<br>
<h3>Things I like</h3>
<ul>
<li>Art</li>
<li>Video Games</li>
<li>Basketball</li>
<li>Concerts</li>
</ul>
</section>

<section class="brazil">
<h2>Brazil</h2>
<!--Brazil-->





<img src="https://www.travelinglifestyle.net/wp-content/uploads/2018/01/best-hostels-in-rio-de-janeiro-brazil-759x500.jpg" alt="Rio De Janeiro" >

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1200px-Flag_of_Brazil.svg.png" alt="Flag of Brazil">



<img src="https://www.riodejaneiro.com/media/uploads/riodejaneiro.com/2014/09/copacabana-beach.jpg" alt="Rio De Janeiro beach">

<!--<h4>Flag of Brazil</h4>
<h4>Rio De Janeiro</h4>
<h4>Best beaches in teh world</h4>-->


</section>

<footer>
<h3>My accounts on socila media</h3>
<a href="https://www.linkedin.com/uas/login" width=20px ><i class="fab fa-linkedin" ></i></a>
<a href="https://behance.com"><i class="fab fa-behance-square"></i></a>
<a href="https://github.com/iwaseem"><i class="fab fa-gitlab"></i></a>

<h6>This webpage is only for education purposes</h6>
</footer>
</body>
</html>
147 changes: 147 additions & 0 deletions hw_week4_Responsive/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
body {
font-family: Montserrat, sans-serif;
background-image: url(../css/images/Brasil_background.jpg); no-repeat fixed;
background-size: cover;
margin: 0px;
padding:0px;
}


header {
background-color:rgba(248,114,114,.8);
}


h1{
font-size: 46px;

}


h2{
font-size: 60px;
font-weight: bold;

}


h6{
font-size: 10px;
color: white;
}

a {
color: #F2B705;
text-decoration: none;
width: 40px;
}

a:hover {
color: white;


}

p{
font-size: 16px;
font-height: 1.2;

}

header, footer, section {
padding: 100px 150px;
}



/*section about*/

.about {
background-color:rgba(35,23,115,.8);
color: white;
}

.about p{
text-align: left;

}

/*section brazil*/
.brazil h2{
color: white;
text-align: center;

}

.brazil img {
width:500px;
border-radius: 10%;
margin:10px;

}


/*footercontact*/
footer {
background:#726AA6;
color:white;
text-align: center;
}

i {
margin-right:10px;
}

@media only screen and (min-width:768px){
.brazil img {
width:550px;
border-radius: 10% 5%;
padding:20px 20px;
margin: 20px 20px;

}

.about p{
text-align: left;

}


}

@media only screen and (min-width:375px){


img {
width:300px;
display: block;
margin:0px 187px 0px 187px;
}

h1{
font-size: 46px;
text-align: center;
font-size: 48px;

}
h3{
font-size: 30;
}

.about p{
text-align:left;
font-size: 14px;
line-height: 1.5;

}

li {
font-size:14px;
}

i {
margin-right:10px;

}

}
Binary file added images/drone1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/drone2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/drone3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/drone4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/drone5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/drone6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/drone7.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 92 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grids</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Grids</h1>
</header>
<main>
<section>
<h2>Grid with floats</h2>
<ul id="grid-floats">
<li class="grid-item">
<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>
</li>
<li class="grid-item">
<h3>DJI Mavic Pro Fly More Combo</h3>
<img src="images/drone2.png">
<p dir="rtl">طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.</p>
</li>
<li class="grid-item">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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>
</ul>

</section>
</main>
</body>
</html>
44 changes: 44 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*ul#grid-floats li:not(:first-child) {*/
/* float: left;*/
/* width: 50%;*/
/*}*/

/*li.grid-item:not(:first-child) img {*/
/* width: 50%;*/
/*}*/

/*#grid-floats li:first-child img {*/
/* width: 100%;*/
/*}*/
* {
box-sizing: border-box;
border: 1px solid red;
}

li {
list-style-type: none;
}

section {
width: 100%;
}

ul#grid-floats li:not(:nth-child(-n+2)) {
float: left;
width: 31%;
height: 40vh;
margin-bottom: 10vh;
}

li.grid-item:not(:nth-child(-n+2)) img {
width: 50%;
}

#grid-floats li:nth-child(-n+2) {
float: left;
width: 50%;
}

#grid-floats li:nth-child(-n+2) img {
width: 50%;
}