diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..540f2c8 Binary files /dev/null and b/.DS_Store differ diff --git a/hw_week4_Responsive/.DS_Store b/hw_week4_Responsive/.DS_Store new file mode 100644 index 0000000..a583875 Binary files /dev/null and b/hw_week4_Responsive/.DS_Store differ diff --git a/hw_week4_Responsive/images/.DS_Store b/hw_week4_Responsive/images/.DS_Store new file mode 100644 index 0000000..0a28093 Binary files /dev/null and b/hw_week4_Responsive/images/.DS_Store differ diff --git a/hw_week4_Responsive/images/Brasil_background.jpg b/hw_week4_Responsive/images/Brasil_background.jpg new file mode 100644 index 0000000..0ed2a5f Binary files /dev/null and b/hw_week4_Responsive/images/Brasil_background.jpg differ diff --git a/hw_week4_Responsive/images/waseem_salem_img.jpg b/hw_week4_Responsive/images/waseem_salem_img.jpg new file mode 100755 index 0000000..d178a81 Binary files /dev/null and b/hw_week4_Responsive/images/waseem_salem_img.jpg differ diff --git a/hw_week4_Responsive/index.html b/hw_week4_Responsive/index.html new file mode 100644 index 0000000..877ae65 --- /dev/null +++ b/hw_week4_Responsive/index.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + Waseem Salem Bio + + +
+

Waseem Salem

+ Waseem Salem +

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. +

+

Proficiency in Adobe Photoshop, Illustrator, InDesign, Dreamweaver, and MS office, in both Mac and PC platforms. + Knowledge in web design (HTML, CSS).

+
+

Some of my interestes

+

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 +
+ + As well, one of my dreams to travel to Rio De Janeiro in Brazil, and learn about the country and it's culture +

+
+

Things I like

+ +
+ +
+

Brazil

+ + + + + + + Rio De Janeiro + + Flag of Brazil + + + + Rio De Janeiro beach + + + + +
+ + + + diff --git a/hw_week4_Responsive/style.css b/hw_week4_Responsive/style.css new file mode 100644 index 0000000..7bf4e40 --- /dev/null +++ b/hw_week4_Responsive/style.css @@ -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; + + } + +} diff --git a/images/drone1.png b/images/drone1.png new file mode 100755 index 0000000..6c002ee Binary files /dev/null and b/images/drone1.png differ diff --git a/images/drone2.png b/images/drone2.png new file mode 100755 index 0000000..a863c19 Binary files /dev/null and b/images/drone2.png differ diff --git a/images/drone3.png b/images/drone3.png new file mode 100755 index 0000000..84974d4 Binary files /dev/null and b/images/drone3.png differ diff --git a/images/drone4.png b/images/drone4.png new file mode 100755 index 0000000..77e469e Binary files /dev/null and b/images/drone4.png differ diff --git a/images/drone5.png b/images/drone5.png new file mode 100755 index 0000000..58ca438 Binary files /dev/null and b/images/drone5.png differ diff --git a/images/drone6.png b/images/drone6.png new file mode 100755 index 0000000..69b554c Binary files /dev/null and b/images/drone6.png differ diff --git a/images/drone7.png b/images/drone7.png new file mode 100755 index 0000000..51f486f Binary files /dev/null and b/images/drone7.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..021eae1 --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + + + Grids + + + +
+

Grids

+
+
+
+

Grid with floats

+ + +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..91d956a --- /dev/null +++ b/style.css @@ -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%; +}