From 0dab0fc80b05678ef9d68a5ab39bbb7b0d002e5e Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Thu, 26 Sep 2019 13:21:27 -0400 Subject: [PATCH 1/8] First attempt at mockup. Added html and classes for css. --- stevens-college/index.html | 27 ++++++++++++++++++++++++++- stevens-college/styles.css | 36 +++++++++++++++++++++++++++++++++++- 2 files changed, 61 insertions(+), 2 deletions(-) diff --git a/stevens-college/index.html b/stevens-college/index.html index 4884712..987ae4c 100644 --- a/stevens-college/index.html +++ b/stevens-college/index.html @@ -1 +1,26 @@ - + + + + + + Thaddeus Stevens College: CSET Overview + + + + +
+

Computer Software Engineering Technology

+
+ Placeholder + +
+

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

+
+ + + diff --git a/stevens-college/styles.css b/stevens-college/styles.css index b9ad8b6..1868597 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -1 +1,35 @@ -/* Add your CSS here */ +html { + padding: 1em; + box-sizing: border-box; + font-family: "Lato", sans-serif; +} + +.header { + font-size: 3em; + font-weight: 900; + text-transform: uppercase; + display: block; + text-align: center; +} + +.image { + display: block; + margin: 0 auto; + padding: 0 0 1em 0; +} + +.links { + display: flex; + justify-content: center; +} + +.links a { + margin: 1em; + padding: .5em .5em .5em .5em; + display: inline-block; + border: 5px solid #a6093d; + background-color: #a6093d; + text-decoration: none; + color: white; + text-transform: uppercase; +} From d1318eead676820882ce5bbef4a76ca5195c5629 Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Thu, 26 Sep 2019 14:22:44 -0400 Subject: [PATCH 2/8] First attempt commit, took break. --- instagram/index.html | 56 +++++++++++++++++++++++++++++++++++++++++++- instagram/styles.css | 34 ++++++++++++++++++++++++++- 2 files changed, 88 insertions(+), 2 deletions(-) diff --git a/instagram/index.html b/instagram/index.html index 4884712..44b4bcf 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -1 +1,55 @@ - + + + + + + Instagram: About Us + + + + + +
+

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 + overall 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 + later 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 native of São 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..a0a9e13 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -1 +1,33 @@ -/* Add your CSS here */ +html { + padding: 1em; + box-sizing: border-box; +} + +.body { + display: flex; + flex-direction: row; + align-items: flex-start; +} + +.aside { + width: 25%; + border: thin solid lightgrey; + border-right: none; + margin: 1em 0 0 1em; + padding-left: .5em; +} + +.article { + border: thin solid lightgrey; + width: 75%; + margin: 1em 0 1em 0; + padding: 1em; +} + +h1 { + font-size: 2em; +} + +h2 { + text-transform: uppercase; +} From ccbc02f246d44f32af613ac14a62c55af24e1bf3 Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Thu, 26 Sep 2019 14:54:05 -0400 Subject: [PATCH 3/8] Finished css styling. --- instagram/styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/instagram/styles.css b/instagram/styles.css index a0a9e13..f36d243 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -31,3 +31,14 @@ h1 { h2 { text-transform: uppercase; } + +ol { + list-style-type: none; +} + +li a { + display: block; + margin: .5em; + text-decoration: none; + color: black; +} From 7d84545bee9e6abb3cf12316069d338baf49095b Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Thu, 26 Sep 2019 16:04:41 -0400 Subject: [PATCH 4/8] First attempt at Mockup, HTML and CSS complete. --- github/index.html | 47 ++++++++++++++++++++++++++++++++++++++++++++++- github/styles.css | 39 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 84 insertions(+), 2 deletions(-) diff --git a/github/index.html b/github/index.html index 4884712..1b290ea 100644 --- a/github/index.html +++ b/github/index.html @@ -1 +1,46 @@ - + + + + + + Github About: Careers + + + + +
+
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.

+ +
+ +
+
+ Placeholder Kitten +

A diverse and inclusive workplace

+

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

+
+
+ Placeholder Kitten +

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..cb9382c 100644 --- a/github/styles.css +++ b/github/styles.css @@ -1 +1,38 @@ -/* Add your CSS here */ +* { + box-sizing: border-box; +} + +.article { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-bottom: 3em; +} + +.article h1 { + font-size: 50px; +} + +.article p { + font-size: 20px; +} + +.article a { + padding: 1em; + text-decoration: none; +} + +.midsection { + display: flex; + flex-direction: row; +} + +.midsection article img { + float: left; + padding: 1em; +} + +.midsection article a { + text-decoration: none; +} From 3fc6e021a8204f27a10a1b9a9f0a95f36f9538fb Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Thu, 26 Sep 2019 16:15:10 -0400 Subject: [PATCH 5/8] Started Amazon, got up to Shop by Category before stopping. --- amazon/index.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/amazon/index.html b/amazon/index.html index 4884712..66f27d9 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -1 +1,17 @@ - + + + + + Amazon Books: Computer and Technology Books + + + +
+

Computer & Technology Books

+

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

+
+
+

Shop by category

+ + From 1082bf0c68906299873d978d4aae0a9a1142fe8c Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Fri, 27 Sep 2019 14:03:27 -0400 Subject: [PATCH 6/8] Finished Amazon mockup. --- amazon/index.html | 13 ++++++++++++- amazon/styles.css | 44 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/amazon/index.html b/amazon/index.html index 66f27d9..ccaa3fa 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -12,6 +12,17 @@

Computer & Technology Books

Android resources, and Java books.

diff --git a/amazon/styles.css b/amazon/styles.css index b9ad8b6..4ecd388 100644 --- a/amazon/styles.css +++ b/amazon/styles.css @@ -1 +1,43 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +header p { + color: grey; + font-size: 14px; +} + +h1 { + color: orange; +} + +h2 { + padding: 0; + margin: 0; +} +.links { + display: flex; + list-style: none; + flex-wrap: wrap; + margin: 0; + border-top: 2px solid lightgrey; + padding-top: 1em; +} + +.links li { + width: 25%; + padding-bottom: 1em; +} + +.links a { + text-decoration: none; + font-size: 16px; +} + +.links img { + width: 150px; +} From 8bcfefe9912ab3faa7dac45746b433047183e49b Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Fri, 27 Sep 2019 22:50:02 -0400 Subject: [PATCH 7/8] First attempt at mockup. --- airbnb/index.html | 29 ++++++++++++++++++++++++++++- airbnb/styles.css | 29 ++++++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index 4884712..f7ec542 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -1 +1,28 @@ - + + + + + Airbnb + + + +
+

Book unique homes and experiences.

+

+
+ +
+ + +
+ + Search +
+

Explore Airbnb

+ + + diff --git a/airbnb/styles.css b/airbnb/styles.css index b9ad8b6..f421390 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -1 +1,28 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; +} + +*, *:before. *:after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +label { + display: block; +} + +main a { + display: block; +} + +main { + display: flex; + flex-direction: column; + justify-content: center; +} + +.centerboxes { + display: flex; + flex-direction: row; +} From 11a92ea0e4ed938334b660c5809e3a491f98c691 Mon Sep 17 00:00:00 2001 From: Eric Moyer Date: Tue, 1 Oct 2019 13:43:46 -0400 Subject: [PATCH 8/8] Finished Airbnb --- airbnb/index.html | 59 ++++++++++++++++++++++----------------- airbnb/styles.css | 71 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 99 insertions(+), 31 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index f7ec542..1bb44c4 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -1,28 +1,37 @@ - - - Airbnb - - - -
-

Book unique homes and experiences.

-

-
- -
- - -
- - Search -
-

Explore Airbnb

- - + + + + Airbnb + + + + +
+

Book unique homes and experiences.

+

+
+ + + + + Search +
+

Explore Airbnb

+ + + diff --git a/airbnb/styles.css b/airbnb/styles.css index f421390..f97ad0d 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -1,5 +1,6 @@ html { box-sizing: border-box; + width: 1000px; } *, *:before. *:after { @@ -8,21 +9,79 @@ html { padding: 0; } -label { +header { + background-image: url(http://placekitten.com/1000/300/); + height: 300px; + color: white; +} + +main label { display: block; + width: 100%; } main a { display: block; } -main { - display: flex; - flex-direction: column; - justify-content: center; +label:last-child { + width: 100%; } +select { + width: 100% +} + +.search { + border: red solid; + padding: 1em; + width: 100%; + margin-top: 1em; + background-color: red; + text-decoration: none; + text-align: center; +} .centerboxes { + margin: 1em 0 1em 0; + display: flex; + flex-wrap: wrap; +} + +.centerboxes label { + width: 50%; +} + +.centerboxes input { + display: block; + width: 100%; +} + +.center { + width: 100% +} + +.center input { + display: block; + width: 100%; +} + +.links { + display: flex; + justify-content: space-between; + list-style-type: none; +} + +.links li { display: flex; - flex-direction: row; + width: 33%; + margin-left: 1em; +} + +.links a:last-child { + border-top: solid grey; + border-right: solid grey; + border-bottom: solid grey; + height: 94px; + width: 100%; + text-decoration: none; }