From 3aeb080d3a7e1cea540256a555bd26090192791d Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Wed, 25 Sep 2019 23:16:39 -0400 Subject: [PATCH 1/8] added html and css for the instagram page added a nav bar and main body with css --- instagram/index.html | 61 +++++++++++++++++++++++++++++++++++- instagram/styles.css | 74 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 133 insertions(+), 2 deletions(-) diff --git a/instagram/index.html b/instagram/index.html index 4884712..259b5cf 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -1 +1,60 @@ - + + + + + + + + + + + +
+ +

About Us

+ +

The Team

+

Kevin Systrom (CEO, co-founder)

+ +
+
+ mknrlg eojrgn erjng oenr goenrg onerngo ejrrgaajor + eargaegrea erg erg eg erg erg erg hrtjty tj + a ertaet y rthr yjdt + jyj dy ty jtyj yj yj j yj jt + ty jdtj j +
+
+ mknrlg eojrgn erjng oenr goenrg onerngo ejrrgaajor + eargaegrea erg erg eg erg erg erg hrtjty tj + a ertaet y rthr yjdt + jyj dy ty jtyj yj yj j yj jt + ty jdtj j +
+
+ mknrlg eojrgn erjng oenr goenrg onerngo ejrrgaajor + eargaegrea erg erg eg erg erg erg hrtjty tj + a ertaet y rthr yjdt + jyj dy ty jtyj yj yj j yj jt + ty jdtj j +
+
+ +
+ + + diff --git a/instagram/styles.css b/instagram/styles.css index b9ad8b6..5cdc6bc 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -1 +1,73 @@ -/* Add your CSS here */ +/** General **/ + +* { + box-sizing: border-box; + +} + +.body { + height: 800px; + font-size: 18px; + font-family: sans-serif; + display: flex; + flex-direction: row; +} + +section { + display: flex; +} + +li { + list-style: none; + padding-bottom: 15px; + padding-top: 15px; +} + + +/** Navigation Bar **/ + +#navbar { + display: flex; + flex-direction: column; +} + +ul li:first-child { + color: lightgray; + position: relative; + right: 20px; +} + +ul li:nth-child(5) { + color: lightgray; + position: relative; + right: 20px; +} + +#sidebar { + width: 20%; + margin-left: 10px; + margin-top: 10px; + margin-bottom: 10px; + border: 1px solid lightgray; +} + + +/** Main Content **/ + +#main { + display: flex; + flex-direction: column; + padding-left: 30px; + font-weight: 300; +} +h1 { + font-size: 40px; + +} +h2 { + +} +article div { + padding-top: 20px; + padding-bottom: 20px; +} From 78ce7cc60d70f8ed42f6c037522cf24a72d8e33d Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Thu, 26 Sep 2019 15:18:32 -0400 Subject: [PATCH 2/8] polished instagram page started html for github --- github/index.html | 41 +++++++++++++++++++++++++++++- instagram/index.html | 60 +++++++++++++++++++++++++++----------------- instagram/styles.css | 42 +++++++++++++++++++++++-------- 3 files changed, 109 insertions(+), 34 deletions(-) diff --git a/github/index.html b/github/index.html index 4884712..fbd6fc2 100644 --- a/github/index.html +++ b/github/index.html @@ -1 +1,40 @@ - + + + + + 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 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

+
+ + + diff --git a/instagram/index.html b/instagram/index.html index 259b5cf..7a89add 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -11,14 +11,14 @@ @@ -28,31 +28,45 @@

About Us

The Team

-

Kevin Systrom (CEO, co-founder)

+

Kevin Systrom (CEO, co-founder)

- mknrlg eojrgn erjng oenr goenrg onerngo ejrrgaajor - eargaegrea erg erg eg erg erg erg hrtjty tj - a ertaet y rthr yjdt - jyj dy ty jtyj yj yj j yj jt - ty jdtj j +

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 moment on the service. He is + responsible for the company's overall vision and strategy as well as day-to-day operations.

- mknrlg eojrgn erjng oenr goenrg onerngo ejrrgaajor - eargaegrea erg erg eg erg erg erg hrtjty tj - a ertaet y rthr yjdt - jyj dy ty jtyj yj yj j yj jt - ty jdtj j +

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, newsroom and brand, to + teens, musicians and anyone with a creative passion.

- mknrlg eojrgn erjng oenr goenrg onerngo ejrrgaajor - eargaegrea erg erg eg erg erg erg hrtjty tj - a ertaet y rthr yjdt - jyj dy ty jtyj yj yj j yj jt - ty jdtj j +

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 graduating form Stanford University with a BS in Management Science & Engineering + and serves on the board 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 boards of Walmart and KCRW.

+
+ +
+

A native of Sao Paulo, Brazil, Mike holds an MS in Symbolic Systems form 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 5cdc6bc..a6ded3b 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -6,11 +6,13 @@ } .body { - height: 800px; + height: 900px; font-size: 18px; font-family: sans-serif; display: flex; flex-direction: row; + margin-right: 200px; + margin-left: 200px; } section { @@ -19,8 +21,14 @@ section { li { list-style: none; - padding-bottom: 15px; - padding-top: 15px; + padding-bottom: 16px; + padding-top: 16px; +} + +a { + list-style: none; + color: black; + text-decoration: none; } @@ -29,6 +37,7 @@ li { #navbar { display: flex; flex-direction: column; + margin-left: 10px; } ul li:first-child { @@ -44,7 +53,7 @@ ul li:nth-child(5) { } #sidebar { - width: 20%; + width: 750px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; @@ -57,17 +66,30 @@ ul li:nth-child(5) { #main { display: flex; flex-direction: column; - padding-left: 30px; - font-weight: 300; + padding-left: 70px; + padding-right: 150px; + border-top: 1px solid lightgray; + border-right: 1px solid lightgray; + border-bottom: 1px solid lightgray; + margin-top: 10px; + margin-bottom: 10px; } h1 { font-size: 40px; - + font-weight: 400; } h2 { - + margin-top: 10px; + font-weight: 330; } article div { - padding-top: 20px; - padding-bottom: 20px; + padding-bottom: 0px; +} +h3 { + font-size: 19px; + margin-top: 10px; +} + +p a { + color: #33bbff; } From 6685233f0177368049e82e556ef6ba1f6e84845e Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Thu, 26 Sep 2019 23:06:50 -0400 Subject: [PATCH 3/8] completed recreation of github website --- github/index.html | 42 +++++++++++++++---- github/styles.css | 103 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 136 insertions(+), 9 deletions(-) diff --git a/github/index.html b/github/index.html index fbd6fc2..7630a73 100644 --- a/github/index.html +++ b/github/index.html @@ -7,20 +7,20 @@ -
    +

    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.

    -
      +
      • Open positions
      • Apprenticeships
      • Internships
        • @@ -28,12 +28,38 @@

        Come help us make collaboration even better

        -

        A diverse and inclusive workplace

        +
        + + peace sign, thumbs up + +
        + +

        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

        +
        + +
        +
        + + globe with message icons + + +
        + +

        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

        +
        -

        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

        +
        diff --git a/github/styles.css b/github/styles.css index b9ad8b6..6474e14 100644 --- a/github/styles.css +++ b/github/styles.css @@ -1 +1,102 @@ -/* Add your CSS here */ +* { + box-sizing: border-box; +} + +body { + height: 900px; + font-size: 18px; + font-family: sans-serif; + display: flex; + flex-direction: column; +} + +.about { + display: flex; + flex-direction: row; + padding-left: 0px; + margin-top: 10px; +} + +.about li { + padding-right: 20px; + list-style: none; + +} + +a { + text-decoration: none; +} + +h1 { + font-weight: 500; + font-size: 60px; + display: flex; + align-self: center; + text-align: center; + width: 700px +} + +.first { + font-size: 35px; + display: flex; + align-self: center; + width: 1200px; + text-align: center; +} +.middle { + display: flex; + align-self: center; + text-align: center; + width: 600px; + justify-content: space-between; + text-decoration: none; + margin-top: 50px; + margin-bottom: 70px; +} + +.middle li { + list-style: none; + font-size: 25px; +} + +.about li { + list-style: none; +} + +section { + display: flex; + flex-direction: row; + align-content: center; + justify-content: space-around; +} + +section.sec1 { + +} + +article { + display: flex; + flex-direction: column; + width: 400px; +} + + +h2 { + align-self: flex-start; + justify-content: space-between; + width: auto; + font-size: 25px; + font-weight: 400; +} + +p { +align-self: center; +margin: 0px; +} + +img { + width: 100px; + height: 100px; + align-self: center; + margin-right: 20px; +} From d2e4ab706f110d56afde19b0eab02eeb7a2097ab Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Fri, 27 Sep 2019 11:12:53 -0400 Subject: [PATCH 4/8] add html to amazon recreation --- amazon/index.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 78 insertions(+), 1 deletion(-) diff --git a/amazon/index.html b/amazon/index.html index 4884712..2112ff7 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -1 +1,78 @@ - + + + + + Amazon + + + + +
        +

        Computer & Technology Books

        +

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

        +
        +
        + +

        Shop by category

        + + + + + + + + + + + + + + + + + +
        + + + From dbe343cf01b83b174d5b76cc067891f0d584a3cf Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Fri, 27 Sep 2019 11:26:39 -0400 Subject: [PATCH 5/8] finished amazon recreation --- amazon/index.html | 70 ++++++++++++++++++++++++----------------------- amazon/styles.css | 44 ++++++++++++++++++++++++++++- 2 files changed, 79 insertions(+), 35 deletions(-) diff --git a/amazon/index.html b/amazon/index.html index 2112ff7..c5a8c4a 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -7,70 +7,72 @@ -
        +

        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..c069619 100644 --- a/amazon/styles.css +++ b/amazon/styles.css @@ -1 +1,43 @@ -/* Add your CSS here */ +* { + box-sizing: border-box; +} + +.head { + display: flex; + flex-direction: column; +} + +.body { + display: flex; + flex-direction: column; +} + +.shop { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + width: 1200px; + +} + +h2 { + border-bottom: 2px solid lightgray; + padding-bottom: 10px; +} + +article { + display: flex; + flex-direction: column; + padding-right: 20px; + padding-left: 20px; + margin-bottom: 30px; + margin-top: 30px; + +} + +article a { + display: flex; + justify-content: center; + align-content: center; +} From 988fa4262e6208309c34395bcc5cffe34ac7d830 Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Tue, 1 Oct 2019 12:19:53 -0400 Subject: [PATCH 6/8] stevens college finished --- airbnb/index.html | 58 +++++++++++++++++++++++++++++++++++++- airbnb/styles.css | 14 ++++++++- stevens-college/index.html | 31 ++++++++++++++++++++ stevens-college/styles.css | 48 ++++++++++++++++++++++++++++++- 4 files changed, 148 insertions(+), 3 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index 4884712..9a73937 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -1 +1,57 @@ - + + + + + Airbnb + + + +

        Book unique homes and experiences.

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

        Explore Airbnb

        + + + + + + + + +
        + +
        + + + diff --git a/airbnb/styles.css b/airbnb/styles.css index b9ad8b6..e54a8e3 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -1 +1,13 @@ -/* Add your CSS here */ +* { + box-sizing: border-box; +} + +body { + display: flex; + flex-direction: column; +} + +.text { + display: flex; + flex-direction: column; +} diff --git a/stevens-college/index.html b/stevens-college/index.html index 4884712..7a2f7b6 100644 --- a/stevens-college/index.html +++ b/stevens-college/index.html @@ -1 +1,32 @@ + + + + + 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..5408cdd 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -1 +1,47 @@ -/* 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 afa6e045a9e73697d77390d784350b18db7f0351 Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Tue, 1 Oct 2019 12:40:07 -0400 Subject: [PATCH 7/8] fixed stevens college --- stevens-college/index.html | 3 +-- stevens-college/styles.css | 18 +++++++++--------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/stevens-college/index.html b/stevens-college/index.html index 7a2f7b6..dbd0430 100644 --- a/stevens-college/index.html +++ b/stevens-college/index.html @@ -1,10 +1,9 @@ - Stevens College - + ​ diff --git a/stevens-college/styles.css b/stevens-college/styles.css index 5408cdd..f883dec 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -3,7 +3,7 @@ margin: 0; padding: 0; } -​ + body { display: flex; flex-direction: column; @@ -11,22 +11,22 @@ body { 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; @@ -36,12 +36,12 @@ li { margin-left: 50px; margin-right: 50px; } -​ + a { - color: white; - text-decoration: none; + color: white; + text-decoration: none; } -​ + p { margin-top: 10px; } From 2d648a6b97158f0b735e97821c609169dca0d00e Mon Sep 17 00:00:00 2001 From: Cody Martin Date: Tue, 1 Oct 2019 13:48:24 -0400 Subject: [PATCH 8/8] finished airbnb --- airbnb/index.html | 36 ++++++++++++++---------- airbnb/styles.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 91 insertions(+), 15 deletions(-) diff --git a/airbnb/index.html b/airbnb/index.html index 9a73937..ea65d2c 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -10,28 +10,37 @@

        Book unique homes and experiences.

        -
        - +
        +
        -
        - -
        +
        -
        - -
        +
        + +
        -
        - +
        + +
        + +
        + +
        +
        -
        + -
        -

        Explore Airbnb

        +
        + +

        Explore Airbnb

        + +
        homes @@ -51,7 +60,6 @@

        Explore Airbnb

        -
        diff --git a/airbnb/styles.css b/airbnb/styles.css index e54a8e3..cf64dcb 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -2,12 +2,80 @@ box-sizing: border-box; } +a { + text-decoration: none; +} + +li { + list-style: none; +} + body { display: flex; flex-direction: column; } .text { + height: 300px; +} + +.checkin { + width: 100%; +} + +.middle { display: flex; - flex-direction: column; + width: 100%; +} + +.text article { + margin-top: 10px; + margin-bottom: 10px; +} + +.search { + background-color: pink; + display: flex; + justify-content: center; + align-items: center; + height: 40px; +} + + +.label input { + display: block; + width: 100%; + height: 40px; + +} + +.label50 input { + display: block; + width: 100%; + height: 40px; +} + +.explore { + display: flex; + flex-direction: row; +} + +.explore article { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + padding: 20px; + border: 1px solid gray; + margin: 10px; + width: 350px; +} + +.explore article a { + padding-left: 30px; +} + +img { + height: 70px; + width: 120px; }