ts-cset · atmelaku · Oct 1, 2019 · Feb 18, 2020
diff --git 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
@@ -1 +1,53 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel='stylesheet' href='styles.css' />
+    <title>Airbnb</title>
+  </head>
+  <body>
+    <header>
+      <h1>Book unique homes and Experiences.</h1>
+    </header>
+    <form id="fill">
+      WHERE <br>
+      <input type="text" name="WHERE" value="Anywhere"><br>
+      <section class="sec1">
+      <div>
+      CHECK IN
+      <input type="text" name="CHECK IN" value="mm/dd/yyyy">
+      </div>
+      <div>
+      CHECK OUT
+      <input type="text" name="ChECK OUT" value="mm/dd/yyyy">
+      </div>
+      </section>
+      <div>
+      GUSTS <br>
+      <input type="text" name="GUSTES" value="1 gust"><br>
+      </div>
+    </form>
+    <div>
+      <form id="search">
+        <input type="text" placeholder="Search" name="search">
+      </form>
+    </div>
+    <h2>Explore Airbnb</h2>
+    <section class="container">
+    <div class="flex-container">
+      <img src="https://placekitten.com/g/100/200" alt="placeholder">
+      <a href="#">Homes</a>
+
+      </div>
+      <div class="flex-container">
+      <img src="https://placekitten.com/g/100/200" alt="placeholder">
+      <a href="#">Experiences</a>
+
+      </div>
+      <div class="flex-container">
+      <img src="https://placekitten.com/g/100/200" alt="placeholder">
+      <a href="#">Restaurants</a>
+    </div>
+    </section>
+  </body>
+</html>
diff --git 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
@@ -1 +1,36 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel='stylesheet' href='styles.css' />
+    <title>amazon</title>
+  </head>
+  <body>
+    <h1>Computer & Technology Books</h1>
+    <p>Browse a wide selection of <a href="#">programming language</a>,
+      <a href="#">Andriod resources</a>, and <a href="#">Java books</a>.</p>
+      <hr>
+    <h2>Shop by catagory</h2>
+    <div class="catagory1">
+      <div><img src="https://placekitten.com/g/200/300" alt="programming book">
+      <a href="#">programming</a></div>
+      <div><img src="https://placekitten.com/g/200/300" alt="computer Science">
+      <a href="#">Computer Science</a></div>
+      <div><img src="https://placekitten.com/g/200/300" alt="programming language">
+      <a href="#">Programming language</a></div>
+      <div><img src="https://placekitten.com/g/200/300" alt="Networking and Cloud
+       Computing">
+       <a href="#">Networking & Cloud Computing</a></div>
+       <div><img src="https://placekitten.com/g/200/300" alt="Security &
+       Encryption">
+       <a href="#">Security& Encryption</a></div>
+       <div><img src="https://placekitten.com/g/200/300" alt="Software">
+       <a href="#">Software</a></div>
+       <div><img src="https://placekitten.com/g/200/300" alt="operating systems">
+       <a href="#">operating systems</a></div>
+       <div><img src="https://placekitten.com/g/200/300" alt="Games & Strategy
+       Guides">
+       <a href="#">Games & strategy Guides</a></div>
+    </div>
+  </body>
+</html>
diff --git 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
@@ -1 +1,46 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel='stylesheet' href='styles.css' />
+    <title>Github</title>
+  </head>
+  <body>
+    <header>
+      <nav>
+       <a href="#">About</a> <p>/</p>
+       <a href="#">Careers</a>
+      </nav>
+    </header>
+    <h1>Come help us make collaboration even better</h1>
+    <p class="intro">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.</p>
+    <div class="links">
+        <a href="#">Open position</a>
+        <a href="#">Apprenticeships</a>
+        <a href="#">Internships</a>
+    </div>
+    <section>
+    <div class="firstdiv">
+    <img class="firstimg"src="https://placekitten.com/96/140" alt="placeholder">
+    <h2>A diverse and inclusive workplace</h2><br>
+    <p>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 <a href="#">current demographic data.</a></p>
+      </div>
+      <div class="seconddiv">
+      <img class="secondimg" src="https://placekitten.com/96/140" alt="placeholder">
+      <h2>Work happier</h2><br>
+      <p>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 <a href="#">work whereever
+        you are happiest.</a>
+        </div>
+        </section>
+  </body>
+</html>
diff --git 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;
+}