Skip to content
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

Jump to bottom

Sync work computer #38

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

Sync work computer #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d8e0ca4
change width of page
seanphunt18 Jan 16, 2017
daa3310
position exercise
seanphunt18 Jan 18, 2017
c806689
update
seanphunt18 Jan 18, 2017
97704f8
floats
seanphunt18 Jan 18, 2017
71889d8
update
seanphunt18 Jan 18, 2017
4172f6e
update
seanphunt18 Jan 18, 2017
a993bcb
merge
seanphunt18 Jan 18, 2017
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
8 changes: 7 additions & 1 deletion display-exercise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
</head>
<body>
<!-- your HTML here to implement the colored box design -->
<p>Placeholder!</p>
<main>
<div class="top-box green-box"></div>
<div class="top-box blue-box"></div>
<div class="bot-box grey-box"></div>
<div class="bot-box black-box"></div>
<div class="bot-box orange-box"></div>
</main>
</body>
</html>
2 changes: 1 addition & 1 deletion float-exercise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<h1>Nebulas</h1>
<h3>Are they really that nebulous?</h3>

<p>Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur <img src="images/nebula1.png"> labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat. Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad <img src="images/nebula2.png"> qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute.</p>
<p>Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur <img class="left-img" src="images/nebula1.png"> labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat. Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad <img class="right-img" src="images/nebula2.png"> qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute.</p>
<p>Nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat. Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat.</p>
</main>

Expand Down
9 changes: 7 additions & 2 deletions position-exercise.html
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@
<link rel="stylesheet" type="text/css" href="styles/position-page.css">
</head>
<body>
<img src="images/outerspace_landscape.jpeg" class="bg">
<!-- To finish the design, the HTML for the nav requires no additional elements, just the right CSS -->
<nav>
<img src="images/icon.png">
<nav class="container">
<img class="logo" src="images/icon.png">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="display-exercise.html">display</a></li>
Expand All @@ -29,6 +30,10 @@

<main>
<!-- Put the HTML you need to accomplish the design -->
<div class="box">
<img class="spacecat" src="images/spacecat.png">
<img class="spacedog" src="images/spacedog.png">
</div>
</main>
</body>
</html>
15 changes: 15 additions & 0 deletions styles/float-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,18 @@ main {
margin-left: auto;
margin-right: auto;
}

img {
width:300px;
margin: 15px 0;
}

.left-img {
float: left;
margin-right: 15px;
}

.right-img {
float: right;
margin-left: 15px;
}
41 changes: 41 additions & 0 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,49 @@
body * {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 0;
}

a {
text-decoration: none;
}

main {
width: 800px;
margin: 0 auto;
}

.top-box {
height: 200px;
width: 50%;
display: inline-block;
border: 1px solid #000;

}

.bot-box {
height: 300px;
width: 33.33%;
display: inline-block;
border: 1px solid #000;
}

.green-box {
background-color:green;
}

.blue-box {
background-color: blue;
}

.grey-box {
background-color: grey;
}

.black-box {
background-color: black;
}

.orange-box {
background-color: orange;
}
92 changes: 92 additions & 0 deletions styles/position-page.css
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,93 @@
<<<<<<< HEAD
body * {
font-size: 1em;
}

=======
>>>>>>> 71889d858836acc075c956ebc9af634754be6748
.container {
padding-right: 60px;
padding-left: 60px;
}

nav {
position: fixed;
height:100px;
width: 100%;
background-color: grey;
}

nav .logo {
position: absolute;
left: 60px;
top: 20px;
vertical-align: middle;
border: 1px solid black;
height: 60px;
width: 60px;
border-radius: 50%;
}

nav ul {
<<<<<<< HEAD
list-style: none;
font-size: 1em;
margin-left: 60px;
position: relative;
top: 20px;
=======
display: inline-block;
list-style: none;
>>>>>>> 71889d858836acc075c956ebc9af634754be6748
}

nav li {
margin-left: 5px;
<<<<<<< HEAD
display: inline-block;
text-decoration: none;
color: #000;
=======
>>>>>>> 71889d858836acc075c956ebc9af634754be6748
}

.links > li {
position: relative;
top: 20px;
right: 60px;
}

.box {
position: relative;
top: 300px;
left: 100px;
width: 600px;
height: 300px;
border: 10px green dotted;
}

.spacecat, .spacedog {
width: 200px;
height: 200px;
position: absolute;
}

.spacecat {
top: -100px;
left: -100px;
}

.spacedog {
top: 200px;
left: 500px;
}

img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}