From bbd42b09e2de3555e022f6a9154a5385adec37bc Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Thu, 26 Sep 2019 13:17:09 -0400 Subject: [PATCH 1/7] Finish the Stevens mockup --- stevens-college/index.html | 31 ++++++++++++++++++- stevens-college/styles.css | 63 +++++++++++++++++++++++++++++++++++++- 2 files changed, 92 insertions(+), 2 deletions(-) diff --git a/stevens-college/index.html b/stevens-college/index.html index 4884712..8f8dca6 100644 --- a/stevens-college/index.html +++ b/stevens-college/index.html @@ -1 +1,30 @@ - + + + + + + Thaddeus Stevens | Computer Software Engineering Technology + + + + +
+

COMPUTER SOFTWARE ENGINEERING TECHNOLOGY

+ A picture of a cute kitten standing in for a video + +
+
+

Computers have become a major factor in the development and operation of + the modern indistry. From providing a means of communications, to operating + machines, to facilitating international commerce, 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..eeab75e 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -1 +1,62 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; + font-size: 10px; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + width: 600px; + margin-left: 1rem; +} + +header { + display: flex; + flex-direction: column; +} + +img { + width: 600px; +} + +h1 { + width: 50%; + font-size: 5rem; + font-family: helvetica, arial, sans-serif; + margin-left: 2rem; +} + +ul { + width: 600px; + list-style: none; + display: flex; + justify-content: space-around; + margin: 1rem 0; +} + +nav a { + display: block; + width: 100px; + text-align: center; + text-decoration: none; + color: #fff; + padding: .5rem 1rem; + background-color: #a6093d; + font-family: helvetica, arial, sans-serif; + font-size: 1.5rem; +} + +nav a:hover { + background-color: #fff; + border: 1px solid #a6093d; + color: #a6093d; +} + +p { + margin-top: 1rem; + font-size: 2rem; +} From 0a78258133eb6bb30cba872b4234df4021622891 Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Thu, 26 Sep 2019 14:18:46 -0400 Subject: [PATCH 2/7] Finish the Instagram mockup --- instagram/index.html | 62 +++++++++++++++++++++++++++- instagram/styles.css | 96 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 156 insertions(+), 2 deletions(-) diff --git a/instagram/index.html b/instagram/index.html index 4884712..29f0b48 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -1 +1,61 @@ - + + + + + + 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 inspirit 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 Systes 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..37f5b43 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -1 +1,95 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; + font-size: 10px; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: row-reverse; + background-color: #ddd; + width: 90%; + margin: 0 auto; + margin-top: 0.5rem; +} + +main, +nav { + background-color: #fff; + border: 2px solid #eee; + padding: 1rem; +} + +main { + padding: 3rem; +} + + +nav { + min-width: 200px; + border-right: none; +} + +ul { + list-style: none; +} + +.nav-header > li { + text-transform: uppercase; + color: #ccc; + font-size: 2rem; + margin-bottom: 1rem; +} + +.nav-sub { + text-transform: capitalize; + font-size: 1.8rem; + margin-left: 1rem; + margin-top: 1rem; +} + +.nav-sub li { + margin: 0.5rem 0; +} + +.nav-sub a { + display: block; + text-decoration: none; + color: #000; +} + +.nav-sub a:hover { + font-weight: bold; +} + +h1, +h2 { + padding-bottom: 2rem; +} + +h3, +p { + padding-bottom: 1.5rem; +} + +h1 { + font-size: 4rem; +} + +h2 { + font-size: 3rem; +} + +h3 { + font-size: 2rem; +} + +.about { + font-size: 1.5rem; + padding-bottom: 2rem; +} From 487ba879a296324cfec3910a844ae8550f090b59 Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Thu, 26 Sep 2019 15:41:26 -0400 Subject: [PATCH 3/7] Finish GitHub mockup --- github/index.html | 53 +++++++++++++++++++++++++++++- github/styles.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 135 insertions(+), 2 deletions(-) diff --git a/github/index.html b/github/index.html index 4884712..d6da25c 100644 --- a/github/index.html +++ b/github/index.html @@ -1 +1,52 @@ - + + + + + + Github + + + + +
+ +
+ +
+
+

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 picture of a kitten used as a placeholder +
+

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.

+
+ A picture of a kitten used as a placeholder +
+

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..1255578 100644 --- a/github/styles.css +++ b/github/styles.css @@ -1 +1,83 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; + font-size: 10px; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 3rem; +} + +.main-info { + width: 70%; + text-align: center; +} + +.main-info h1 { + font-size: 4rem; +} + +.main-info p, +.careers a { + font-size: 2rem; + padding: 2rem 0; +} + +.careers { + list-style: none; + display: flex; + justify-content: space-around; +} + +.careers a { + display: block; + text-decoration: none; +} + +.icon { + height: 5rem; + width: 5rem; + align-self: center; +} + +.blurbs { + display: flex; + justify-content: space-between; + width: 90%; + padding: 3rem; +} + +.small { + width: 40%; +} + +.small p { + font-size: 1.3rem; +} + +.small a { + text-decoration: none; +} + +header ul { + list-style: none; + display: flex; +} + +header li{ + padding-left: 1rem; + padding-top: 1rem; +} + +header a { + text-decoration: none; +} From 756ec66317ba8c7861fd7faae832283d63a0c5d3 Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Thu, 26 Sep 2019 15:51:35 -0400 Subject: [PATCH 4/7] Fix a minor issue with the Stevens mockup --- stevens-college/styles.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/stevens-college/styles.css b/stevens-college/styles.css index eeab75e..b6c326b 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -44,16 +44,17 @@ nav a { text-align: center; text-decoration: none; color: #fff; - padding: .5rem 1rem; + padding: 0.5rem 1rem; background-color: #a6093d; font-family: helvetica, arial, sans-serif; font-size: 1.5rem; + border: 1px solid #a6093d; } nav a:hover { background-color: #fff; - border: 1px solid #a6093d; color: #a6093d; + border: 1px solid #a6093d; } p { From f8dc14b233ee55cd5fd70796575d2a3cf7fd1b13 Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Mon, 30 Sep 2019 11:57:59 -0400 Subject: [PATCH 5/7] Finish the Airbnb mockup --- airbnb/index.html | 32 +++++++++++++++++- airbnb/styles.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 114 insertions(+), 2 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index 4884712..0d8faa6 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -1 +1,31 @@ - + + + + + + Airbnb + + + + +
+

Book unique homes and experiences.

+
+
+ + + + + Search +
+ + + + diff --git a/airbnb/styles.css b/airbnb/styles.css index b9ad8b6..7278feb 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -1 +1,83 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; + font-size: 10px; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0px; + padding: 0px; +} + +h1 { + background-image: url(https://placekitten.com/1000/100); + color: #fff; + padding: 2rem 0; + padding-left: 1rem; +} + +main { + display: flex; + flex-wrap: wrap; + padding: 1rem; +} + +main label { + display: block; + width: 100%; + text-transform: uppercase; + padding: 0.5rem 0; + margin-bottom: 0.5rem; +} + +main input { + display: block; + width: 100%; +} + +.check { + width: 50%; +} + +main a { + display: block; + background: red; + width: 100%; + text-align: center; + padding: 0.5rem 0; + text-decoration: none; + color: white; + font-size: 1.4rem; +} + +h2 { + margin: 1rem; +} + +nav ul { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + list-style: none; + margin: 1rem; +} + +nav li { + width: 31%; + height: 100px; + display: flex; + justify-content: +} + +.text { + display: flex; + width: 100%; + align-items: center; + text-decoration: none; + padding-left: 1rem; + font-size: 2rem; + color: #000; + border: 1px solid grey; + border-left: none; +} From 55db6fb66665b525165d02a46468d27242dacab1 Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Tue, 1 Oct 2019 12:51:14 -0400 Subject: [PATCH 6/7] Add the amazon layout mockup --- amazon/index.html | 32 ++++++++++++++++++++++++++++- amazon/styles.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++- github/index.html | 1 - 3 files changed, 82 insertions(+), 3 deletions(-) diff --git a/amazon/index.html b/amazon/index.html index 4884712..c2ae486 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -1 +1,31 @@ - + + + + + + Amazon + + + + +
+

Computer & Technology Books

+

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

+
+ +
+

Shop by category

+ +
+ + + diff --git a/amazon/styles.css b/amazon/styles.css index b9ad8b6..c38e056 100644 --- a/amazon/styles.css +++ b/amazon/styles.css @@ -1 +1,51 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; + font-size: 10px; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +h1 { + color: orange; + margin: 2rem; + margin-bottom: 1rem; + font-size: 3rem; +} + +header p { + margin-left: 2rem; + margin-bottom: 2rem; + color: grey +} + +a { + text-decoration: none; +} + +main { + margin-left: 2rem; +} + +h2 { + border-bottom: 1px solid grey; + margin-bottom: 1.5rem; +} + +ul { + display: flex; + flex-wrap: wrap; +} + +li { + width: 25%; + display: flex; + flex-direction: column; +} + +li img { + align-self: flex-start; +} diff --git a/github/index.html b/github/index.html index d6da25c..26418f9 100644 --- a/github/index.html +++ b/github/index.html @@ -1,6 +1,5 @@ - Github From bb11359675fbe60da039b79a132aa0912a002c0a Mon Sep 17 00:00:00 2001 From: Steve Eckles Date: Tue, 1 Oct 2019 13:19:09 -0400 Subject: [PATCH 7/7] Update the airbnb mockup to be better --- airbnb/index.html | 16 ++++++++++++---- airbnb/styles.css | 5 +++++ 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index 0d8faa6..c4284ee 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -12,10 +12,18 @@

Book unique homes and experiences.

- - - - + + + + Search