From 3f0922d1a6894e7b65eae3446054ebbdc020c605 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Thu, 26 Sep 2019 13:19:16 -0400 Subject: [PATCH 01/10] worked on HTML for instagram mock up --- instagram/index.html | 68 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/instagram/index.html b/instagram/index.html index 4884712..85c1a1b 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -1 +1,69 @@ + + + + + Instagram mock up + + + + +

about us

+

The team

+ +
+

Kevin Systrom (CEO, co-founder)

+ +

Kevin Systrom (@kevin) is the CEO and co-founder of instagram, a community + of more than 1 billion who capture and share the world's moments on the service. + He is responsible for the company's ocerall vision and strategy as well as + day-to-day operations.

+ +

Since the beginning, Kevin has focused on simplicity and inspiring creativity + through solving problems with thoughtful product design. As a result, instagram + has become the home for visual storytelling for everyone from celebrities, + newsrooms and brands, to teens, musicians, and anyone with a creative passion

+ +

prior to founding Instagram, Kevin was part of the startup Odeo, which kater + became Twitter, and spent two years at Google working on products like Gmail + and Google Reader. He graduated from Stanford University with a BS in Management + Science & Engineering and serves on the boards of Walmart and KCRW

+
+ +
+

Mike Krieger (CTO, co-founder)

+ +

Mike Krieger (@mikeyk) is the CTO and co-founder of Instagram, a global + community of more than 1 billion. As the head of engineering, Mike focuses on + building products that bring out the creativity in all of us

+ +

A natice of Sao Paulo, Brazil, Mike holds an MS in Symbolic Systems from + Stanford University. Prior to founding Instagram, he worked at Meebo as a user + experience designer and front-end engineer.

+
+ +
+ +
+ +
+ +
+ + + From 07552ac1d0593ba63a124137de8bae18618f33cf Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Thu, 26 Sep 2019 15:08:53 -0400 Subject: [PATCH 02/10] worked on making the elements in the right place --- instagram/index.html | 56 ++++++++++++++++++++++----------------- instagram/styles.css | 62 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+), 24 deletions(-) diff --git a/instagram/index.html b/instagram/index.html index 85c1a1b..1d3b1ab 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -4,14 +4,17 @@ Instagram mock up + + +

about us

The team

-
+

Kevin Systrom (CEO, co-founder)

Kevin Systrom (@kevin) is the CEO and co-founder of instagram, a community @@ -28,9 +31,9 @@

Kevin Systrom (CEO, co-founder)

became Twitter, and spent two years at Google working on products like Gmail and Google Reader. He graduated from Stanford University with a BS in Management Science & Engineering and serves on the boards of Walmart and KCRW

-
+ -
+

Mike Krieger (CTO, co-founder)

Mike Krieger (@mikeyk) is the CTO and co-founder of Instagram, a global @@ -40,30 +43,35 @@

Mike Krieger (CTO, co-founder)

A natice of Sao Paulo, Brazil, Mike holds an MS in Symbolic Systems from Stanford University. Prior to founding Instagram, he worked at Meebo as a user experience designer and front-end engineer.

+
+
-
- -
+
-
- -
+
+ +
+
+ +
+ +
diff --git a/instagram/styles.css b/instagram/styles.css index b9ad8b6..93fd0d9 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -1 +1,63 @@ /* Add your CSS here */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: flex; + flex-direction: row-reverse; + border: 1px solid black; + margin: 200px; + margin-left: 300px; + margin-right: 300px; +} + +h1 { + padding: 30px; +} + +h2 { + padding: 30px; +} + +h3 { + padding: 15px; +} +.peeps { + border-left: 1px solid black; + margin: 0; + padding: 20px; + display: flex; + justify-content: flex-end; + flex-direction: column; +} + +.kevin > p { + margin-bottom: 30px; + margin-top: 30px; +} + +.mike > p { + margin-bottom: 30px; + margin-top: 30px; +} + +.mike:last-child { + padding-bottom: 50px; +} + +.navi { + width: 350px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.about { + padding: 30px; +} + +.legal { + padding: 30px; +} From 19900e315ff451666488ca1688d4f98281989e60 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Thu, 26 Sep 2019 15:56:21 -0400 Subject: [PATCH 03/10] lined up the text and removed the bullet points from the navigation --- instagram/index.html | 4 ++-- instagram/styles.css | 22 +++++++++++++++++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/instagram/index.html b/instagram/index.html index 1d3b1ab..3999ee5 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -11,8 +11,8 @@
-

about us

-

The team

+

About Us

+

The Team

Kevin Systrom (CEO, co-founder)

diff --git a/instagram/styles.css b/instagram/styles.css index 93fd0d9..8b8255a 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -14,15 +14,19 @@ body { } h1 { - padding: 30px; + font-size: 200%; + margin-left: 20px; + padding-bottom: 20px; } h2 { - padding: 30px; + margin-left: 20px; + padding-bottom: 20px; } h3 { - padding: 15px; + margin-left: 20px; + padding-bottom: 20px; } .peeps { border-left: 1px solid black; @@ -34,16 +38,19 @@ h3 { } .kevin > p { + margin-left: 20px; margin-bottom: 30px; margin-top: 30px; } .mike > p { + margin-left: 20px; margin-bottom: 30px; margin-top: 30px; } .mike:last-child { + padding-top: 20px; padding-bottom: 50px; } @@ -61,3 +68,12 @@ h3 { .legal { padding: 30px; } + +a { + color: black; + text-decoration: none; +} + +ul { + list-style-type: none; +} From 5316b194429ac6fe3231a9e8c16860313adf9cc5 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Fri, 27 Sep 2019 13:42:46 -0400 Subject: [PATCH 04/10] finished positioning instagram file --- instagram/styles.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/instagram/styles.css b/instagram/styles.css index 8b8255a..11261ba 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -63,10 +63,12 @@ h3 { .about { padding: 30px; + padding-left: 5px; } .legal { padding: 30px; + padding-left: 5px; } a { @@ -76,4 +78,27 @@ a { ul { list-style-type: none; + +} + +.about ul li:nth-child(1) { + font-size: 150%; + margin-bottom: 30px; + display: flex; + justify-content: space-between; +} + +.about ul li { + padding-bottom: 20px; +} + +.legal ul li:nth-child(1) { + font-size: 150%; + margin-bottom: 30px; + display: flex; + justify-content: space-between; +} + +.legal ul li { + padding-bottom: 20px; } From 32894e78355dbbbb1b9d65df904a5c7d597f7559 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Fri, 27 Sep 2019 14:13:57 -0400 Subject: [PATCH 05/10] completed thaddeus stevens college mock up positioning --- stevens-college/index.html | 33 ++++++++++++++++++++++++++ stevens-college/styles.css | 48 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) diff --git a/stevens-college/index.html b/stevens-college/index.html index 4884712..559bf1a 100644 --- a/stevens-college/index.html +++ b/stevens-college/index.html @@ -1 +1,34 @@ + + + + + Stevens College + + + + +

Computer Software Engineering Technology

+ +
+ kat. +
+ +
+ +
+ +
+

Computers have become a major factor in the development and + operation of the modern industry. From providing means of communications, + to operating machines, to facllitating international commerence, to + systems animation, computers and their related software programs + make things possible.

+
+ + + diff --git a/stevens-college/styles.css b/stevens-college/styles.css index b9ad8b6..414f11f 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -1 +1,49 @@ /* Add your CSS here */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + align-content: flex-start; + width: 600px; + margin-left: 100px; +} + +h1 { + font-size: 85px; +} + +img { + height: 250px; + width: 100%; +} + +ul { + display: flex; + flex-direction: row; + justify-content: center; +} + +li { + margin-top: 30px; + margin-bottom: 30px; + background-color: red; + padding: 5px; + list-style: none; + margin-left: 50px; + margin-right: 50px; +} + +a { + color: white; + text-decoration: none; +} + +p { + margin-top: 10px; + +} From 2cbc769db64f4410fd9ea0ad4a62078a38d40c09 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Sun, 29 Sep 2019 14:23:40 -0400 Subject: [PATCH 06/10] completed first HTML structure --- amazon/index.html | 62 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/amazon/index.html b/amazon/index.html index 4884712..256a497 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -1 +1,63 @@ + + + + + Amazon + + + + +
+

Computer & Technology Books

+

Browse a wide selection of programming guides, Android Resources + and Java books.

+
+ +

Shop by categoty

+ +
+ +
+ +

Programming

+
+ +
+ +

Computer Science

+
+ +
+ +

Programming Languages

+
+ +
+ +

Networking & Cloud Computing

+
+ +
+ +

Security & Encryption

+
+ +
+ +

Software

+
+ +
+ +

Operating Systems

+
+ +
+ +

Games & strategy guides

+
+
+ + + From b75e6c139f505e524b4bc5f30480907f29562c1e Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Tue, 1 Oct 2019 12:28:27 -0400 Subject: [PATCH 07/10] finished amazon positioning mock up --- amazon/index.html | 26 +++++++++++++++----------- amazon/styles.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/amazon/index.html b/amazon/index.html index 256a497..beceff8 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -12,52 +12,56 @@

Computer & Technology Books

Browse a wide selection of programming guides, Android Resources and Java books.

-
+
-

Shop by categoty

+

Shop by category

-
+
- + cat

Programming

- + cat

Computer Science

- + cat

Programming Languages

- + cat

Networking & Cloud Computing

+
+
- + cat

Security & Encryption

- + cat

Software

- + cat

Operating Systems

- + cat

Games & strategy guides

+
+ diff --git a/amazon/styles.css b/amazon/styles.css index b9ad8b6..94d6277 100644 --- a/amazon/styles.css +++ b/amazon/styles.css @@ -1 +1,36 @@ /* Add your CSS here */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +h1 { + +} + +h2 { + margin-top: 25px; + margin-bottom: 25px; + border-bottom: solid thin black; +} + +body { + margin-left: 20px; + margin-right: 20px; +} + +.books { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +.books2 { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + margin-top: 100px; +} From eb5665f0c42eb4c1411e48953c33cbe5ea9de8a5 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Tue, 1 Oct 2019 14:03:06 -0400 Subject: [PATCH 08/10] worked on and completed github mock up --- github/index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++- github/styles.css | 54 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+), 1 deletion(-) diff --git a/github/index.html b/github/index.html index 4884712..c437d99 100644 --- a/github/index.html +++ b/github/index.html @@ -1 +1,55 @@ - + + + + + + github + + + + + +
+ About/Careers +
+ +
+

Come help us make collaboration even better

+ +

At GitHub we build the tools that make collaborating And + writing software easier for everyone. We've built a company + we truly love working for, and we think you will too.

+ + +
+ +
+ +
+ +

A diverse and inclusive workplace

+

At GitHub, we think that a diverse company is a strong + company, and we work harder to foster a supportive and + welcoming workplace. Learn more about our commitment to + diversity and inclusion and see our current demographic + data.

+
+ +
+ +

Work happier

+

Build amazing things with autonomy, self-direction, And + a healthy work-life balance. We offer flexible work schedules + for all of our employees and unlimited PTO. We also believe that + if a job allows for it, you should work wherever you're happiest.

+
+ +
+ + diff --git a/github/styles.css b/github/styles.css index b9ad8b6..7d8bd8a 100644 --- a/github/styles.css +++ b/github/styles.css @@ -1 +1,55 @@ /* Add your CSS here */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.top { + margin-left: 300px; + margin-right: 300px; +} + +h1 { + display: flex; + justify-content: center; + margin-top: 50px; + flex-wrap: wrap; + font-size: 75px; +} + +p { + margin-top: 25px; + display: flex; + justify-content: center; +} + +ul { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 50px; + margin-bottom: 50px; +} + +li { + margin-left: 25px; + margin-right: 25px; +} + +img { + float: left; + width: 150px; + height: 150px; + margin-right: 25px; +} + +.text { + display: flex; + flex-direction: row; + +} + +.head1, .text1, .head2, .text2{ + margin-left: 25px; +} From d1cda16f595dc43d3012846f0da1294f02019be1 Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Tue, 1 Oct 2019 14:03:29 -0400 Subject: [PATCH 09/10] worked on HTML of airbnb mock up --- airbnb/index.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/airbnb/index.html b/airbnb/index.html index 4884712..fa29e8e 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -1 +1,61 @@ + + + + + Airbnb + + + + +

Book unique homes and experiences

+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ + + +
+ +
+

Explore Airbnb

+
+ +
+ +

Homes

+
+ +
+ +

Experiences

+
+ +
+ +

Restruants

+
+ +
+ + + + + + + From 785a0def7e669153bd212f4206c6189ee96c176f Mon Sep 17 00:00:00 2001 From: Justice Lee Date: Tue, 1 Oct 2019 14:14:37 -0400 Subject: [PATCH 10/10] did my best with airbnb --- airbnb/index.html | 4 ++-- airbnb/styles.css | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index fa29e8e..6a288be 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -10,7 +10,7 @@

Book unique homes and experiences

-
+
@@ -24,7 +24,7 @@

Book unique homes and experiences

-
+
diff --git a/airbnb/styles.css b/airbnb/styles.css index b9ad8b6..56f4472 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -1 +1,16 @@ /* Add your CSS here */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +h1 { + border-bottom: solid thin black; + margin-top: 50px; + margin-bottom: 50px; +} + +.where, .guest { + display: flex; +}