First commit
This commit is contained in:
79
Lab 4/basic.html
Executable file
79
Lab 4/basic.html
Executable file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fundamentals</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Lorem Ipsum</h1>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||
vel leo sed ante vulputate porta id ac sapien. Nulla lacinia commodo
|
||||
augue. Ut risus mauris, consectetur sed neque quis, sollicitudin sodales
|
||||
nulla. Nullam eu porta arcu. Curabitur in erat sagittis, malesuada lorem
|
||||
ac, vehicula nulla. Praesent rhoncus magna eu elit lobortis, ac congue
|
||||
augue semper. Duis interdum consequat cursus. Morbi rutrum dapibus est
|
||||
vel volutpat. Pellentesque in malesuada ante.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="basic.html">Basic</a></li>
|
||||
<li><a href="spaces.html">Spacing</a></li>
|
||||
<li><a href="colors.html">Colorful</a></li>
|
||||
<li><a href="navs.html">Navigation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Part One <span>1</span></h2>
|
||||
|
||||
<p>
|
||||
Etiam euismod pretium risus quis venenatis. Fusce finibus lacinia urna
|
||||
sit amet pretium. Interdum et malesuada fames ac ante ipsum primis in
|
||||
faucibus. Etiam consectetur, justo ac ornare volutpat, ante mi vehicula
|
||||
quam, eget vehicula velit ex at orci. Pellentesque turpis est, convallis
|
||||
eget finibus eu, hendrerit non mauris. Sed at sapien eu erat iaculis
|
||||
porta nec sed ante. Nullam quis aliquam felis. Mauris gravida urna
|
||||
blandit nisl posuere, tristique accumsan nibh mollis. Sed faucibus
|
||||
malesuada arcu, et ultrices turpis laoreet lobortis. Mauris hendrerit
|
||||
commodo ex, vitae venenatis arcu volutpat ut. In in nisi rhoncus,
|
||||
fringilla risus ac, aliquet nunc. Fusce ut quam eleifend, fringilla
|
||||
ante sed, congue nisi. Sed ut est elit.
|
||||
</p>
|
||||
|
||||
<p>Back to <a href="basic.html">basic</a>.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Part Two <span>2</span></h2>
|
||||
|
||||
<p>
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos. Quisque nec arcu eget eros fermentum efficitur non
|
||||
vitae ante. Suspendisse semper dapibus dui ac volutpat. Morbi consectetur
|
||||
mi a nunc posuere tristique. Vivamus interdum tincidunt arcu. Integer
|
||||
volutpat ipsum in pellentesque tempus. Nulla aliquet congue ex at
|
||||
elementum. Vestibulum imperdiet quam ac dui finibus, eget elementum erat
|
||||
aliquam. Sed erat neque, cursus vulputate consectetur et, vulputate sit
|
||||
amet orci. Duis fringilla aliquet mauris, nec semper nisl blandit ut.
|
||||
Fusce iaculis vestibulum pulvinar. Morbi facilisis, ligula non
|
||||
consectetur fringilla, elit magna auctor velit, at pretium magna lacus
|
||||
sit amet nulla.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="spaces.html">Lorem</a></li>
|
||||
<li><a href="color.html">Ipsum</a></li>
|
||||
<li><a href="navs.html">Dolor</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
Lab 4/colors-annot.png
Executable file
BIN
Lab 4/colors-annot.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
19
Lab 4/colors.css
Executable file
19
Lab 4/colors.css
Executable file
@@ -0,0 +1,19 @@
|
||||
/* colors.css -- Controlling the colors and borders for Lab 4
|
||||
* author: Nicholas Tamassia
|
||||
*/
|
||||
|
||||
header {
|
||||
background: #450084;
|
||||
color: #f5f5f5;
|
||||
border-bottom: solid #dacce6 1vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #dfd2aa;
|
||||
}
|
||||
|
||||
section {
|
||||
background: #f4efe1;
|
||||
border: solid black 3px;
|
||||
border-radius: 1vh;
|
||||
}
|
||||
81
Lab 4/colors.html
Executable file
81
Lab 4/colors.html
Executable file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fundamentals</title>
|
||||
<link href="spaces.css" rel="stylesheet">
|
||||
<link href="colors.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Lorem Ipsum</h1>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||
vel leo sed ante vulputate porta id ac sapien. Nulla lacinia commodo
|
||||
augue. Ut risus mauris, consectetur sed neque quis, sollicitudin sodales
|
||||
nulla. Nullam eu porta arcu. Curabitur in erat sagittis, malesuada lorem
|
||||
ac, vehicula nulla. Praesent rhoncus magna eu elit lobortis, ac congue
|
||||
augue semper. Duis interdum consequat cursus. Morbi rutrum dapibus est
|
||||
vel volutpat. Pellentesque in malesuada ante.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="basic.html">Basic</a></li>
|
||||
<li><a href="spaces.html">Spacing</a></li>
|
||||
<li><a href="colors.html">Colorful</a></li>
|
||||
<li><a href="navs.html">Navigation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Part One <span>1</span></h2>
|
||||
|
||||
<p>
|
||||
Etiam euismod pretium risus quis venenatis. Fusce finibus lacinia urna
|
||||
sit amet pretium. Interdum et malesuada fames ac ante ipsum primis in
|
||||
faucibus. Etiam consectetur, justo ac ornare volutpat, ante mi vehicula
|
||||
quam, eget vehicula velit ex at orci. Pellentesque turpis est, convallis
|
||||
eget finibus eu, hendrerit non mauris. Sed at sapien eu erat iaculis
|
||||
porta nec sed ante. Nullam quis aliquam felis. Mauris gravida urna
|
||||
blandit nisl posuere, tristique accumsan nibh mollis. Sed faucibus
|
||||
malesuada arcu, et ultrices turpis laoreet lobortis. Mauris hendrerit
|
||||
commodo ex, vitae venenatis arcu volutpat ut. In in nisi rhoncus,
|
||||
fringilla risus ac, aliquet nunc. Fusce ut quam eleifend, fringilla
|
||||
ante sed, congue nisi. Sed ut est elit.
|
||||
</p>
|
||||
|
||||
<p>Back to <a href="basic.html">basic</a>.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Part Two <span>2</span></h2>
|
||||
|
||||
<p>
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos. Quisque nec arcu eget eros fermentum efficitur non
|
||||
vitae ante. Suspendisse semper dapibus dui ac volutpat. Morbi consectetur
|
||||
mi a nunc posuere tristique. Vivamus interdum tincidunt arcu. Integer
|
||||
volutpat ipsum in pellentesque tempus. Nulla aliquet congue ex at
|
||||
elementum. Vestibulum imperdiet quam ac dui finibus, eget elementum erat
|
||||
aliquam. Sed erat neque, cursus vulputate consectetur et, vulputate sit
|
||||
amet orci. Duis fringilla aliquet mauris, nec semper nisl blandit ut.
|
||||
Fusce iaculis vestibulum pulvinar. Morbi facilisis, ligula non
|
||||
consectetur fringilla, elit magna auctor velit, at pretium magna lacus
|
||||
sit amet nulla.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="spaces.html">Lorem</a></li>
|
||||
<li><a href="color.html">Ipsum</a></li>
|
||||
<li><a href="navs.html">Dolor</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
Lab 4/colors.png
Executable file
BIN
Lab 4/colors.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
BIN
Lab 4/css.zip
Executable file
BIN
Lab 4/css.zip
Executable file
Binary file not shown.
BIN
Lab 4/navs-annot.png
Executable file
BIN
Lab 4/navs-annot.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
34
Lab 4/navs.css
Executable file
34
Lab 4/navs.css
Executable file
@@ -0,0 +1,34 @@
|
||||
/* navs.css -- Styling the nav elements for Lab 4
|
||||
* author: Nicholas Tamassia
|
||||
*/
|
||||
|
||||
nav a {
|
||||
font-family: sans-serif;
|
||||
text-decoration: none;
|
||||
font-weight: 900;
|
||||
color: #450084;
|
||||
}
|
||||
|
||||
nav {
|
||||
border: solid black 2px;
|
||||
border-radius: 1vh;
|
||||
overflow: hidden;
|
||||
color: #dcdcdc;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav > ul li {
|
||||
padding: 8px 13px;
|
||||
background-color: #dcdcdc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav > ul li:not(:last-child) {
|
||||
border-bottom: solid 2px #f5f5f5;
|
||||
}
|
||||
82
Lab 4/navs.html
Executable file
82
Lab 4/navs.html
Executable file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fundamentals</title>
|
||||
<link href="spaces.css" rel="stylesheet">
|
||||
<link href="colors.css" rel="stylesheet">
|
||||
<link href="navs.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Lorem Ipsum</h1>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||
vel leo sed ante vulputate porta id ac sapien. Nulla lacinia commodo
|
||||
augue. Ut risus mauris, consectetur sed neque quis, sollicitudin sodales
|
||||
nulla. Nullam eu porta arcu. Curabitur in erat sagittis, malesuada lorem
|
||||
ac, vehicula nulla. Praesent rhoncus magna eu elit lobortis, ac congue
|
||||
augue semper. Duis interdum consequat cursus. Morbi rutrum dapibus est
|
||||
vel volutpat. Pellentesque in malesuada ante.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="basic.html">Basic</a></li>
|
||||
<li><a href="spaces.html">Spacing</a></li>
|
||||
<li><a href="colors.html">Colorful</a></li>
|
||||
<li><a href="navs.html">Navigation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Part One <span>1</span></h2>
|
||||
|
||||
<p>
|
||||
Etiam euismod pretium risus quis venenatis. Fusce finibus lacinia urna
|
||||
sit amet pretium. Interdum et malesuada fames ac ante ipsum primis in
|
||||
faucibus. Etiam consectetur, justo ac ornare volutpat, ante mi vehicula
|
||||
quam, eget vehicula velit ex at orci. Pellentesque turpis est, convallis
|
||||
eget finibus eu, hendrerit non mauris. Sed at sapien eu erat iaculis
|
||||
porta nec sed ante. Nullam quis aliquam felis. Mauris gravida urna
|
||||
blandit nisl posuere, tristique accumsan nibh mollis. Sed faucibus
|
||||
malesuada arcu, et ultrices turpis laoreet lobortis. Mauris hendrerit
|
||||
commodo ex, vitae venenatis arcu volutpat ut. In in nisi rhoncus,
|
||||
fringilla risus ac, aliquet nunc. Fusce ut quam eleifend, fringilla
|
||||
ante sed, congue nisi. Sed ut est elit.
|
||||
</p>
|
||||
|
||||
<p>Back to <a href="basic.html">basic</a>.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Part Two <span>2</span></h2>
|
||||
|
||||
<p>
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos. Quisque nec arcu eget eros fermentum efficitur non
|
||||
vitae ante. Suspendisse semper dapibus dui ac volutpat. Morbi consectetur
|
||||
mi a nunc posuere tristique. Vivamus interdum tincidunt arcu. Integer
|
||||
volutpat ipsum in pellentesque tempus. Nulla aliquet congue ex at
|
||||
elementum. Vestibulum imperdiet quam ac dui finibus, eget elementum erat
|
||||
aliquam. Sed erat neque, cursus vulputate consectetur et, vulputate sit
|
||||
amet orci. Duis fringilla aliquet mauris, nec semper nisl blandit ut.
|
||||
Fusce iaculis vestibulum pulvinar. Morbi facilisis, ligula non
|
||||
consectetur fringilla, elit magna auctor velit, at pretium magna lacus
|
||||
sit amet nulla.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="spaces.html">Lorem</a></li>
|
||||
<li><a href="color.html">Ipsum</a></li>
|
||||
<li><a href="navs.html">Dolor</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
Lab 4/navs.png
Executable file
BIN
Lab 4/navs.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
BIN
Lab 4/spaces-annot.png
Executable file
BIN
Lab 4/spaces-annot.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
38
Lab 4/spaces.css
Executable file
38
Lab 4/spaces.css
Executable file
@@ -0,0 +1,38 @@
|
||||
/* basics.css -- Controlling the spacing for Lab 4
|
||||
* author: Nicholas Tamassia
|
||||
*/
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 10vw;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 1vh 2vw;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 80vw;
|
||||
padding: 3vh 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 3vh 0 0;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 2vw;
|
||||
}
|
||||
80
Lab 4/spaces.html
Executable file
80
Lab 4/spaces.html
Executable file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fundamentals</title>
|
||||
<link href="spaces.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Lorem Ipsum</h1>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||
vel leo sed ante vulputate porta id ac sapien. Nulla lacinia commodo
|
||||
augue. Ut risus mauris, consectetur sed neque quis, sollicitudin sodales
|
||||
nulla. Nullam eu porta arcu. Curabitur in erat sagittis, malesuada lorem
|
||||
ac, vehicula nulla. Praesent rhoncus magna eu elit lobortis, ac congue
|
||||
augue semper. Duis interdum consequat cursus. Morbi rutrum dapibus est
|
||||
vel volutpat. Pellentesque in malesuada ante.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="basic.html">Basic</a></li>
|
||||
<li><a href="spaces.html">Spacing</a></li>
|
||||
<li><a href="colors.html">Colorful</a></li>
|
||||
<li><a href="navs.html">Navigation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Part One <span>1</span></h2>
|
||||
|
||||
<p>
|
||||
Etiam euismod pretium risus quis venenatis. Fusce finibus lacinia urna
|
||||
sit amet pretium. Interdum et malesuada fames ac ante ipsum primis in
|
||||
faucibus. Etiam consectetur, justo ac ornare volutpat, ante mi vehicula
|
||||
quam, eget vehicula velit ex at orci. Pellentesque turpis est, convallis
|
||||
eget finibus eu, hendrerit non mauris. Sed at sapien eu erat iaculis
|
||||
porta nec sed ante. Nullam quis aliquam felis. Mauris gravida urna
|
||||
blandit nisl posuere, tristique accumsan nibh mollis. Sed faucibus
|
||||
malesuada arcu, et ultrices turpis laoreet lobortis. Mauris hendrerit
|
||||
commodo ex, vitae venenatis arcu volutpat ut. In in nisi rhoncus,
|
||||
fringilla risus ac, aliquet nunc. Fusce ut quam eleifend, fringilla
|
||||
ante sed, congue nisi. Sed ut est elit.
|
||||
</p>
|
||||
|
||||
<p>Back to <a href="basic.html">basic</a>.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Part Two <span>2</span></h2>
|
||||
|
||||
<p>
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos. Quisque nec arcu eget eros fermentum efficitur non
|
||||
vitae ante. Suspendisse semper dapibus dui ac volutpat. Morbi consectetur
|
||||
mi a nunc posuere tristique. Vivamus interdum tincidunt arcu. Integer
|
||||
volutpat ipsum in pellentesque tempus. Nulla aliquet congue ex at
|
||||
elementum. Vestibulum imperdiet quam ac dui finibus, eget elementum erat
|
||||
aliquam. Sed erat neque, cursus vulputate consectetur et, vulputate sit
|
||||
amet orci. Duis fringilla aliquet mauris, nec semper nisl blandit ut.
|
||||
Fusce iaculis vestibulum pulvinar. Morbi facilisis, ligula non
|
||||
consectetur fringilla, elit magna auctor velit, at pretium magna lacus
|
||||
sit amet nulla.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="spaces.html">Lorem</a></li>
|
||||
<li><a href="color.html">Ipsum</a></li>
|
||||
<li><a href="navs.html">Dolor</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
Lab 4/spaces.png
Executable file
BIN
Lab 4/spaces.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Reference in New Issue
Block a user