Skip to content

Wilnelys css practice lab #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
WilnelysR wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Wilnelys css practice lab #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e5860e0
did all html and css, may have to tweak.
WilnelysR Sep 26, 2019
811fd6e
changed <div> to <li>
WilnelysR Sep 26, 2019
5940776
completed instagram
WilnelysR Oct 1, 2019
b72a94f
completed most but one
WilnelysR Oct 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions airbnb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>airbnb</title>
</head>
<body>
<header>
<h1 class="title">Book unique homes and experiences.</h1>
</header>

<ul>
<li>Where</li>
<li>Check-in</li>
<li>Check-out</li>
<li>Guests</li>
</ul>

<a href="search">Search</a>

<h2>Explore Airbnb</h2>

<ul>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat"/>Homes</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat"/>Experiences</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat"/>Restaurants</a></li>
</body>
</html>
7 changes: 7 additions & 0 deletions airbnb/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
/* Add your CSS here */
.title {
background-image:

url("https://placekitten.com/100/100");

background-color: transparent;
}
38 changes: 38 additions & 0 deletions amazon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,39 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>amazon</title>
</head>

<body>
<header>

<h1>Computer & Technology Books</h1>

<p>
Browse a wide selection of <a href="programming">programming guides,</a>
<a href="Android">Android resources,</a> and <a href="Java">Java books.</a>
</p>

</header>

<h2>Shop by category</h2>

<ul>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Programming</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Computer Science</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Programming Languages</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Networking & Cloud Computing</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Security & Encryption</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Software</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Operating Systems</a></li>
<li><a href="#"><img src="http://placekitten.com/100/100" alt="cute cat" />Games & Strategy Guides</a>
<li>
</ul>

</body>

</html>
9 changes: 9 additions & 0 deletions amazon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
/* Add your CSS here */
* {
box-sizing: border-box;
}

ul {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
66 changes: 66 additions & 0 deletions github/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,67 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>github</title>
</head>

<body>

<nav class="top">
<ol>
<li><a href="#">About</a></li>
<li class="career">/Careers</li>
</ol>
</nav>
<section>
<h1 class="heading">Come help us make collaboration even better</h1>

<p>
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.
</p>

<nav>
<ul>
<li><a href="#">Open positions</a></li>
<li><a href="#">Apprenticeships</a></li>
<li><a href="#">Internships</a></li>
</ul>
</nav>
</section>
<article>

<img src="http://placekitten.com/100/100" alt="cute kitten" />

<h3>A diverse and inclusive workplace</h3>

<p> 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 <a href="demographic">current demographic data.</a>
</p>


<img src="http://placekitten.com/100/100" alt="cute kitten" />

<h3>Work Happier</h3>

<p>
Build amazing things with autonomy, self direction
and healthy work-life balance. We offer flexible
work schedules for all of our employees and unlimited
PTO. We also belive that if a job allows it, you should
<a href="work">work wherever you're happiest.</a>
</p>

</article>



</body>

</html>
29 changes: 29 additions & 0 deletions github/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
/* Add your CSS here */
li {
display: inline-block;
}

section {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 40px 0 40px;
}

section p {
font-size: 16pt;
text-align: center;
}

section nav {
font-size: 14pt;
}

h1 {
font-size: 36pt;
text-align: center;
}

article {
display: flex;
flex-direction: row;
}
77 changes: 77 additions & 0 deletions instagram/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,78 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>instagram</title>
</head>

<body>

<nav class="sidebar">
<h4>About</h4>

<ul>
<li>Company</li>
<li>Press</li>
<li>Jobs</li>
</ul>

<h4>Legal</h4>

<ul>
<li>Terms</li>
<li>Privacy</li>
<li>Platform</li>
<li>Libraries</li>
</ul>
</nav>

<article>
<h1>About Us</h1>

<h2>The Team</h2>

<h3 class="kevin">Kevin</h3>
<p> 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 stragety
as well as day-to-day operations.
</p>

<p>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.
</p>

<p>
Prior to founding Instagram, Kevin was part of the startup Odeo, which
later became Twitter, and spent two years ay Google working on products
like Gmail and Google Reader. He graduated from Stanford University
with a BS in Management Science & Engineering and servea on the boards
of Walmart and KCRW.
</p>

<h3 class="Mike">Mike Krieger (CTO, co-founder)</h3>

<p>
Mike Krieger(@mikeyk) is the CTO and co-founder of Instagram, a global
community of more than 1 billion. As the head engineering, Mike focuses
on building prodicts that bring out the creativity in all of us.
</p>

<p>
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 designer.
</p>


</article>

</body>

</html>
35 changes: 35 additions & 0 deletions instagram/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,36 @@
/* Add your CSS here */
* {
box-sizing: border-box;
}

article {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
height: 800px;
width: 80%;
padding: 0 5% 0 5%;
}

nav {
display: flex;
float: left;
flex-direction: column;
padding-left: 40px;
width: 20%;
border: 1px solid lightgrey;
height: 800px;
}

h4 {
color: lightgrey;
}

li {
display: flex;
justify-content: flex-start;
}

p {
display:
}
27 changes: 27 additions & 0 deletions stevens-college/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,28 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Stevens College</title>
</head>
<body>
<h1>Computer Software Engineering Technology</h1>

<img src="http://placekitten.com/600/350" alt="cuddly kitten" />

<nav>
<li><a href="#">Schedule</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Tool List</a></li>
</nav>

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

</body>
</html>
30 changes: 30 additions & 0 deletions stevens-college/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,31 @@
/* Add your CSS here */
h1 {
text-transform: uppercase;
font-size: 80px;
}

img {
display: flex;
height: 400px;
width: 100%;
justify-content: center;

}

li a {
color: white;
display: inline-block;
background-color: darkred;
padding: 10px 40px 10px 40px;
}

nav {
display: flex;
justify-content: space-around;
flex-direction: row;
}

p {
font-size: 20px;
margin: 30px 0 30px 0;
}