diff --git a/README.md b/README.md index 10ccc1e..9e0f3db 100644 --- a/README.md +++ b/README.md @@ -1,34 +1 @@ -# More CSS Practice - -We're going to practice our CSS by trying to recreate some layout examples I've found around the web. You're probably familiar with these sites already, if not these specific pages. For each site, I took a screenshot of a particular portion of a page that employs some of the CSS tricks we've been learning. I also provided a folder for each example, so you can create separate pages with their own stylesheets. The code is up to you! - -If you hit a wall, take a break. Go for a walk. Work on a different layout. Whatever you do, don't get frustrated. This will be a tough lab and I don't expect you to finish all of it. If you need to, you can also go find the page and inspect the code to see how they did it. Be careful though, they might be using things we haven't learned yet. You should be able to accomplish this with all the tools we've learned so far. - -Some things to keep in mind: -- Layout is just styling boxes within boxes. Start on the biggest boxes and work from the outside in. -- Less is more when it comes to CSS. Adding more declarations than you need can make things too confusing. -- Try to use semantic HTML as much as possible. -- When you get something you like, use git to commit the code and save a snapshot just in case. -- **But most importantly, *Perfect* is the enemy of *Good*.** - - - -## Stevens College - -![Stevens College Layout](stevens-college/example.png) - -## Instagram - -![Instagram Layout](instagram/example.png) - -## Github - -![Github Layout](github/example.png) - -## Airbnb - -![Airbnb Layout](airbnb/example.png) - -## Amazon - -![Amazon Layout](amazon/example.png) +clone the my repository and refresh on the browser so you can see the result. diff --git a/airbnb/index.html b/airbnb/index.html index 4884712..433c580 100644 --- a/airbnb/index.html +++ b/airbnb/index.html @@ -1 +1,53 @@ - + + + + + + Airbnb + + +
+

Book unique homes and Experiences.

+
+
+ WHERE
+
+
+
+ CHECK IN + +
+
+ CHECK OUT + +
+
+
+ GUSTS
+
+
+
+
+ +
+

Explore Airbnb

+
+
+ placeholder + Homes + +
+
+ placeholder + Experiences + +
+
+ placeholder + Restaurants +
+
+ + diff --git a/airbnb/styles.css b/airbnb/styles.css index b9ad8b6..b682040 100644 --- a/airbnb/styles.css +++ b/airbnb/styles.css @@ -1 +1,74 @@ -/* Add your CSS here */ + +body { + box-sizing: border-box; + background: #eee; + margin-left: 20px; + width: 1000px; +} +h1 { + display: flex; + align-items: center; + color: white; + background-image: url(https://via.placeholder.com/150); + width: 1000px; + height: 80px; +} +#fill input { + color: gray; + font-size: 20px; + width: 1000px; + height: 40px; + padding-top: 10px; + padding-bottom: 10px; + margin: 10px; + margin-left: 0px; +} +#search input { + background: red; + font-size: 20px; + width: 1000px; + height: 40px; + text-align: center; + margin: 10px; + margin-left: 0px; + display: block; +} +#fill input:first-child { + display: block; + width: 500px; +} +h2 { +color: gray; +} +.sec1{ +display: flex; +} +.container{ + display: flex; + justify-content: space-around; + padding-left: 20px; + +} +.flex-container{ + display: flex; + border: 1px solid lightgray; +} +.flex-container1{ + border: 1px solid lightgray; +} +.flex-container2{ + border: 1px solid lightgray; +} +img{ + width: 110px; + height: 90px; +} +a{ + color: black; + font-size: 19px; + text-decoration: none; + padding-left: 20px; + padding-right: 100px; + padding-top: 40px; + padding-bottom: 40px; +} diff --git a/amazon/index.html b/amazon/index.html index 4884712..4dfa3d9 100644 --- a/amazon/index.html +++ b/amazon/index.html @@ -1 +1,36 @@ - + + + + + + amazon + + +

Computer & Technology Books

+

Browse a wide selection of programming language, + Andriod resources, and Java books.

+
+

Shop by catagory

+
+
programming book + programming
+
computer Science + Computer Science
+
programming language + Programming language
+
Networking and Cloud + Computing + Networking & Cloud Computing
+
Security & + Encryption + Security& Encryption
+
Software + Software
+
operating systems + operating systems
+
Games & Strategy + Guides + Games & strategy Guides
+
+ + diff --git a/amazon/styles.css b/amazon/styles.css index b9ad8b6..b405022 100644 --- a/amazon/styles.css +++ b/amazon/styles.css @@ -1 +1,56 @@ -/* Add your CSS here */ +html { + +box-sizing: border-box; + +} + +*,*::before, *::after { + +box-sizing: inherit; + +} + + +body { + background: white; + margin-left: 40px; + border: 0.5px solid lightgray; + height: 900px; + width: 1100px; + padding-left: 20px; + padding-right: 20px; + +} +h1 { + color: orange; + font-weight: bold; + +} +h2 { + font-weight: bold; +} +a { + color: blue; +} +div.catagory1 a { + padding-top: 10px; + font-size: 20px; +} +img{ + width: 90px; + height: 70px; +} + div.catagory1{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +div.catagory1 div { + +width: 25%; +display: flex; +flex-direction: column; +padding-bottom: 80px; + +} diff --git a/github/index.html b/github/index.html index 4884712..546278a 100644 --- a/github/index.html +++ b/github/index.html @@ -1 +1,46 @@ - + + + + + + Github + + +
+ +
+

Come help us make collaboration even better

+

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

+
+ Open position + Apprenticeships + Internships +
+
+
+ placeholder +

A diverse and inclusive workplace


+

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

+
+
+ 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 POT. We also believe that if a job allow + for it, you shoud work whereever + you are happiest. +

+
+ + diff --git a/github/styles.css b/github/styles.css index b9ad8b6..7cfdf18 100644 --- a/github/styles.css +++ b/github/styles.css @@ -1 +1,78 @@ -/* Add your CSS here */ +html { + +box-sizing: border-box; + +} + +*,*::before, *::after { + +box-sizing: inherit; + +} + + body { + border: 0.5px solid lightgray; + background-color: white; + width: 1100px; + height: 1000px; + margin-left: 100px; + margin-right: 100px; + padding: 30px; +} +nav a:active { + color: black; + +} +h1{ + font-size: 80px; + text-align: center; +} +h2 { + display: inline; + +} +p { + display: inline; +} + .intro { + text-align: center; + font-size: 32px; +} +.links { + display: flex; + + font-size: 25px; + justify-content: space-around; +} +a { + text-decoration: none; + color: blue; +} +section{ + padding-top: 300px; +} + .firstdiv { + display: block; + align-items: flex-end; + float: left; + width: 500px; + height: 300px; + position: relative; + +} +.firstimg{ + float: left; + padding-right: 10px; + +} +.seconddiv{ + float: right; + width: 500px; + height: 300px; + padding-right: -50px; + +} +.secondimg{ + float: left; + padding-right: 10px; +} diff --git a/instagram/index.html b/instagram/index.html index 4884712..e625cdd 100644 --- a/instagram/index.html +++ b/instagram/index.html @@ -1 +1,66 @@ - + + + + + + Instragram + + +
+

About Us

+

The Team

+

Kevin System (CEO, co-founder)

+

+ Kevin Systrom (@kevin) co-founded + Instagram and served as CEO + for 8 years before leaving the company in September 2018 to pursue his + next passion project.

+

With Kevin’s focus on simplicity and inspiring + creativity through solving problems with thoughtful product design, + Instagram became the home for innovation on visual storytelling + launching dozens of products including Stories and IGTV.

+ +

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.

+ +

Mike Krieger (Co-founder)

+

Mike Krieger (@mikeyk) co-founded Instagram + and served as Instagram's Head of + Engineering for 8 years, before leaving the company in September 2018 to + explore new projects. Mike focused on building a broad range of creative + products to empower the community on Instagram to connect with their + interests and passions. In addition, Mike grew the engineering organization + to more than 400 employees in Instagram offices located in Menlo Park, New + York and San Francisco.

+ +

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..282faf4 100644 --- a/instagram/styles.css +++ b/instagram/styles.css @@ -1 +1,49 @@ -/* Add your CSS here */ +html { + box-sizing: border-box; + background: lightgray; +} +body { +border: solid gray 1px; +text-align: center; +width: 1000px; +height: 1000px; +background-color: white; + +} +.outside, .outside2 { + font-size: 30px; + list-style: none; + + +} +.inside, .inside2 { + font-size: 20px; + list-style: none; +} + + section a { + display: block; + color: #444; + text-decoration: none; +} +article { + border: solid gray 1px; + float: right; + height: 100%; + width: 80%; + box-sizing: border-box; + padding-left: 2em; + text-align: left; + +} +aside { + border: solid gray 1px; + float: right; + height: 100%; + width: 20%; + box-sizing: border-box; +} +li a:hover { + color: black; + border-left: solid black 3px; +} diff --git a/stevens-college/index.html b/stevens-college/index.html index 4884712..53d53f0 100644 --- a/stevens-college/index.html +++ b/stevens-college/index.html @@ -1 +1,32 @@ - + + + + + + Stevens college + + +
+

COMPUTER SOFTWARE ENGINEERING TECHNOLOGY

+
+
+ placekitten +
+
+ +
+
+

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..0f9d341 100644 --- a/stevens-college/styles.css +++ b/stevens-college/styles.css @@ -1 +1,39 @@ -/* Add your CSS here */ +html{ + background: white; + +} +body { + background: lightgray; + width: 1000px; + height: 1250px; + padding-left: 20px; +} +h1 { + font-size: 100px; +} + img { + height: 500px; + width: 950px; +} +ul { + display: flex; + justify-content: space-around; + list-style: none; +} +li { + margin-right: 20px; + background: #A6093D; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 40px; + padding-right: 40px; +} +a { + text-decoration: none; + text-transform: capitalize; + color: white; + font-size: 18pt; +} +p { + font-size: 20px; +}