Skip to content

...these website mockups mock me... #23

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
Vanillan-MellonDrop wants to merge 9 commits into
base: master
Choose a base branch
from
Open

...these website mockups mock me... #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a0f4beb
More CSS Practice Lab
Vanillan-MellonDrop Oct 1, 2019
bcb0449
Delete index.html
Vanillan-MellonDrop Oct 1, 2019
a199cba
Delete styles.css
Vanillan-MellonDrop Oct 1, 2019
dd5b0e3
Delete example.png
Vanillan-MellonDrop Oct 1, 2019
e340160
Add files via upload
Vanillan-MellonDrop Oct 1, 2019
610ca5a
Delete index.html
Vanillan-MellonDrop Oct 1, 2019
b769e97
Delete styles.css
Vanillan-MellonDrop Oct 1, 2019
9df1db5
Add files via upload
Vanillan-MellonDrop Oct 1, 2019
2f279fb
Add files via upload
Vanillan-MellonDrop 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
40 changes: 39 additions & 1 deletion airbnb/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">
<title>AirBNB</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<img src="https://cdn.kreezalid.com/kreezalid/files/2/airbnb.jpg" alt="Image of the skyline with a skylift.">
<form>
WHERE<br>
<input class="Anywhere" name="Anywhere">
</form>
<form>
CHECK IN
<input type="CheckIn" name="CheckIn">
</form>
<form>
CHECK OUT
<input type="CheckOut" name="CheckOut">
</form>
<p>Guests</p>
<select size="1">
<option value="insertion">1</option>
<option value="insertion">2</option>
<option value="insertion">3</option>
<option value="insertion">4</option>
<option value="insertion">5</option>
<option value="insertion">6</option>
<option value="insertion">7</option>
<option value="insertion">8</option>
<option value="insertion">9</option>
<option value="insertion">10+</option>
</select>
</body>

</html>
14 changes: 13 additions & 1 deletion airbnb/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,13 @@
/* Add your CSS here */
img {
width: 100%;
;
}

input {
display: inline-flex;
flex-direction: row;
}

.Anywhere {
width: 100%;
}
43 changes: 42 additions & 1 deletion amazon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,42 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

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

<body>
<h1>Computer &amp Technology Books</h1>
<p class="single">Browse a wide selection of programming guides, Android resources, and Java books.</p>
<h2>Shop by category</h2>
<section class="line">
</section>
<div class="top">
<img src="https://prodimage.images-bn.com/pimages/9780984782857_p0_v1_s550x406.jpg∑" alt="Picture of Book"></img>
<img src="https://m.media-amazon.com/images/S/aplus-media/vc/11714e04-b1a6-439d-9482-87e757822f94.jpg" alt="Picture of Book"></img>
<img src="https://images-na.ssl-images-amazon.com/images/I/51F48HFHq6L._SX376_BO1,204,203,200_.jpg" alt="Picture of Book"></img>
<img src="https://m.media-amazon.com/images/I/51m0lXcTFlL._AC_UL436_.jpg" alt="Picture of Book"></img>
</div>
<div class="top-link">
<a href='#'>Programming</a>
<a href='#'>Computer Science</a>
<a href='#'>Programming Languages</a>
<a href='#'>Networking &amp Cloud Computing</a>
</div>
<div class="bottom">
<img src="https://images-na.ssl-images-amazon.com/images/I/51Vogw4seHL._SX378_BO1,204,203,200_.jpg" alt="Picture of Book"></img>
<img src="https://images-na.ssl-images-amazon.com/images/I/41FdGH12pOL._SX389_BO1,204,203,200_.jpg" alt="Picture of Book"></img>
<img src="https://images-na.ssl-images-amazon.com/images/I/51oYzgTCiyL._SX427_BO1,204,203,200_.jpg" alt="Picture of Book"></img>
<img src="https://investorplace.com/wp-content/uploads/2017/01/amznmsn-300x165.jpg" alt="Picture of an Amazon Sign"></img>
</div>
<div class="bottom-link">
<a href='#'>Security &amp Encryption</a>
<a href='#'>Software</a>
<a href='#'>Operating Systems</a>
<a href='#'>Games &amp Strategey Guides</a>
</div>
</body>

</html>
70 changes: 69 additions & 1 deletion amazon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,69 @@
/* Add your CSS here */
h1 {
color: darkorange;
font-size: 48pt;
font-family: arial;

}

.single {
color: grey;
font-size: 14pt;
font-family: arial;
}

p {
font-family: arial;
}

h2 {
font-family: arial;
font-size: 28pt;
}

.line {
background-color: lightgrey;
border: 0;
border-top: 1px solid lightgrey;
height: 1px;
margin: 2rem auto;
text-align: center;
width: 99%;
}

img {
width: 200px;
height: 250px;
}

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

.top-link {
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: stretch;
color: blue;
font-family: arial;
font-weight: bold;
}

.bottom {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 100px;
}

.bottom-link {
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: stretch;
color: blue;
font-family: arial;
font-weight: bold;
}