Skip to content

Worked on websight css layouts #19

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
Djmon07 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Worked on websight css layouts #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
35 changes: 34 additions & 1 deletion airbnb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,34 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

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

<body>
<h1 class="Title">Book unique homes and experiences.</h1>
<img src="http://placekitten.com/1300/100" alt="kitten placeholer">

<ul>
<nav class="navigation">
<li>Where</li>
<li>Check In</li>
<li>checkout</li>
<li>Guests</li>
</nav>
</ul>

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

<h2>Explore Airbnb</h2>

<ul>
<li><a href="Homes"><img src="http://placekitten.com/100/50" alt="kitten placeholer"/>Homes</a></li>
<li><a href="Experiences"><img src="http://placekitten.com/100/50" alt="kitten placeholer"/>Experiences</a></li>
<li><a href="Restaurants"><img src="http://placekitten.com/100/50" alt="kitten placeholer"/>Restaurants</a></li>
</ul>

</body>
</html>
2 changes: 1 addition & 1 deletion airbnb/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
/* Add your CSS here */

41 changes: 40 additions & 1 deletion amazon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,40 @@
<!-- 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>
<section class="Title">
<h1>Computer & Technology Books</h1>
<p>
Browse a wide selection of <a href="#" class= 'Pnav'>programming guides</a>,<a href="#" class='Pnav'>Android rescources</a>, and <a href="#" class='Pnav'>Java books</a>.
</p>
</section>
</header>


<section class="shop">


<section>

<nav class="Nav-container">
<ul class="Nav-menu">
<li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Programming</a></li> <li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Computer Science</a></li>
<li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Programming Languages</a></li>
<li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Networking & Cloud Computing</a></li> <li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Security & Encryption</a></li>
<li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Software</a></li>
<li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Operating Systems</a></li>
<li><a href="#"><img src="http://placekitten.com/50/100" alt="kitten placeholer">Games & Strategy Guides</a></li>
</ul>
</nav>
</section>
</section>

</body>
</html>
50 changes: 49 additions & 1 deletion amazon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,49 @@
/* Add your CSS here */
.Title {
display: flex;
flex-direction: column;
font-size: 25px;
}

.Pnav {
display: inline;
}

h1 {
color: orange;
padding-left: 10px;
font-size: 40px;
}

.shop {
display: flex;
flex-direction: column;
}

h2 {
border-bottom: solid lightgray;
}

.Nav-container {
display: flex;
}

.Nav-menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
list-style: none;
flex: 8;
padding-left: 10px;
}

a {
display: flex;
flex-direction: column;
align-items: center;
}

img {
width: 100px;
height: 100px;
}
64 changes: 63 additions & 1 deletion github/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,63 @@
<!-- 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>

<section class='Pnav'>
<header>
<nav>
<ul>
<li><a href="About">About</a></li>
<li>/</li>
<li><a href="Careers">Careers</a></li>
</ul>
</nav>
</header>
</section>

<section class='Colb'>
<h1 class="header">Come help us make collaboration even better</h1>

<p class="text">
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>

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

<section class="work">
<section class='Wdiv'>
<img class="Wimg" src="http://placekitten.com/100/100" alt="kitten placeholer">
<h2>A diverse and inclusive workplace</h2>
<p class="Wtext">
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.
</p>
</section>

<section class='Whap'>
<img class="Wimg" src="http://placekitten.com/100/100" alt="kitten placeholer">
<h3>Work happier</h3>
<p class="Wtext">
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.
</p>
</section>
</section>

</body>
</html>
69 changes: 68 additions & 1 deletion github/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,68 @@
/* Add your CSS here */
li {
display: inline;
list-style: none;
}

.colab {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.header {
font-size: 40px;
width: 100%;
margin: 20px 0;
text-align: center;
align-items: center;
}

.text {
font-size: 20px;
width: 100%;
margin: 20px 0;
text-align: center;
align-items: center;
}

.links {
padding-top: 20px;
}

.navigation {
display: flex;
align-items: center;
justify-content: center;
word-spacing: 2px;
justify-content: space-evenly;
}

.work {
padding-top: 50px;
}

.Wdiv {
float: left;
width: 50%;
}

.Whap {
float: right;
width: 50%;
}

.Wimg {
float:left;
width: 20%;
margin-right: 10px;
margin-bottom: 40px;
}

.Wtext {
margin: 0 inherit;
}

h2, h3 {
font-size: 20px;
}
67 changes: 67 additions & 0 deletions instagram/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,68 @@
<!-- 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>


<div class="sidebar">
<h5 class="navigation">About</h5>

<ul>
<nav class="navigation">
<li>Compay</li>
<li>Press</li>
<li>Jobs</li>
</nav>
</ul>

<h6 class="navigation">Legal</h6>

<ul>
<nav class="navigation">
<li>Terms</li>
<li>Privacy</li>
<li>Platform</li>
<li>Libraries</li>
</nav>
</ul>
</div>

<div class="main">
<h1 class="text">About Us</h1>

<h2 class="text">The Team</h2>

<h3>Kevin Systrom (CEO, co-founder)</h3>

<p class="text">
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.
</p>

<p class="text">
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 anymore with a creative passion.
</p>

<p class="text">
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 Walmark and KCRW.
</p>

<h4>Mike Krieger (Co-founder)</h4>

<p class="text">
Mike Krieger (@mikeyk) is the co-founded of Instagram, a global community of more than 1 Billion. As the head of engineersing, Mike focused on building that bring out the creativity in all of us.
</p>

<p class="text">
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.
</p>
</div>
</body>

</html>
46 changes: 45 additions & 1 deletion instagram/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,45 @@
/* Add your CSS here */

* {
box-sizing: border-box;
}

.sidebar {
display: flex;
justify-content: flex-start;
flex-direction: column;
float: left;
border: solid 1px lightgray;
width: 20%;
height: 800px;
padding: 10px;
}

.navigation {
list-style: none;
}

h6, h5 {
font-size: 25px;
color: gray;
}

.main {
display: flex;
justofy-content: flex-start;
flex-direction: column;
padding: 20px;
margin-left: 5px 5px 0px 0px;
border: solid 1px lightgray;
width: 80%;
height: 800px;

}

ul {
font-size: 20px;
display; flex;
}

li {
text-decoration: none;
}
Loading