this is two assignments needs to be done
NortheasternIllinois University
CS 300: Client Side Web Development
Professor Yehuda Gutstein
HW – HTML & CSS – Colors and Selectors – Become an Artist
Due Dates:
HW is due prior to the start of the next class.
Objectives
• Set up an HTML page using the basic page elements.
• Be able to use HTML5 semantic elements to structure a web page.
• Understand the CSS box model and how to float and position elements on a page.
• Successfully use CSS to style and modify the appearance of page and the elements
contained within.
Basic Requirements
• Properly use and indent all tags.
• Set up page with ,
and tags.Assignment Details
Make your own Mondrian.
Paint makes a mess. Code is so much cleaner. Use this project to recreate a classic
Modern artwork, Piet Mondrian’s Composition II in Red, Blue, and Yellow in your
browser using basic web building blocks.
• View this link for details on Piet Mondrian:
https://en.wikipedia.org/wiki/Piet_Mondrian
• Create a work of art similar to Mondrian (or anything really).
• Make use of borders, padding, margins, floating and positioning to compose
your work of art.
• Definition of Complete: The artwork contains multiple HTML elements. The
elements are not stacked one above the other (i.e. no floating or positioning has
been used). Additionally, it is evident that margins, padding and borders have all
been used.
Submit your assignment
1. Combine all work files into a zip folder (include all HTML, CSS, font, and image files).
Keep the file structure the same as it was when you were working on the
assignment.
2. Submit the zip folder via desire2learn in the appropriate Assignment folder in order
to receive credit. While you may also submit screenshots, you are required to
submit the actual code files, not just screenshots of the code.
http://en.wikipedia.org/wiki/Piet_Mondrian
https://en.wikipedia.org/wiki/Piet_Mondrian
NortheasternIllinois University
CS 300: Client Side Web Development
Professor Yehuda Gutstein
HW 05 – HTML & CSS Images & Colors – Popup Penguins
Due Dates:
HW is due prior to the start of the next class.
Objectives
• Set up an HTML page using the basic page elements.
• Be able to use HTML5 semantic elements to structure a web page.
• Properly use images, CSS selectors
Basic Requirements
• Properly use and indent all tags.
• Set up page with ,
and tags.Assignment Details
Using the skills gained so far, make a simple game to play with your friends and family.
See if you can find all the penguins without waking the yeti!
• All required images are included in a zip folder.
• Place a series of hideouts on the page. When you hover over an image, you
should see the mound with a question mark. When you click on a mound, you
should either display a penguin or a yeti. There should only be one yeti on the
page.
• The game does not require any functionality declaring a winner or loser.
• Definition of Complete: You can hover over an image and make another image
appear
Sample Screenshots
Northeastern Illinois University
CS 300: Client Side Web Development
Professor Yehuda Gutstein
HW 05 – HTML & CSS Images & Colors – Popup Penguins
Submit your assignment
1. Combine all work files into a zip folder (include all HTML, CSS, font, and image files).
Keep the file structure the same as it was when you were working on the
assignment.
2. Submit the zip folder via desire2learn in the appropriate Assignment folder in order
to receive credit. While you may also submit screenshots, you are required to
submit the actual code files, not just screenshots of the code.
__MACOSX/._HtmlCss_Floating+Positioning
HtmlCss_Floating+Positioning/index.html
NEIU
CS300
HTML & CSS
Floating & Positioning
R1: C:1
R1: C:2
R1: C:3
R2: C:1
R3: C:1
R3: C:2
R3: C:3
R3: C:4
THIS IS BEHIND
ON TOP
Northeastern Illinois University – CS300
© Copyright 2018
Fixed
__MACOSX/HtmlCss_Floating+Positioning/._index.html
HtmlCss_Floating+Positioning/.DS_Store
__MACOSX/HtmlCss_Floating+Positioning/._.DS_Store
HtmlCss_Floating+Positioning/css/styles.css
body{
font-family: GeometriaThin, calibri, arial, sans-serif;
}
*{
/*padding: 0;
margin: 0;*/
}
header{
/*
* Set width = 90%
* Set height = 200px
*/
/*width: 90%;*/
/*height: 200px;*/
/*
* Set padding = 5% left and right
* Set padding = 25px left and right
*/
/*padding: 25px 5%;*/
/*
* Set border on the bottom = 2px solid black
*/
/*border-bottom: 2px solid black;*/
background: white;
}
footer{
/*width: 90%;
height: 50px;
padding: 25px 5%;
border-top: 2px solid black;*/
}
.big{
font-size: 50px;
text-transform: lowercase;
font-family: GeometriaHeavy;
}
.small{
font-size: 25px;
text-transform: lowercase;
letter-spacing: 5px;
font-family: GeometriaLight;
}
#scrollBtn{
/*
* This will be a “sticky” button
* I.E. stuck to the bottom right corner
*/
/*height: 100px;
width: 100px;*/
font-weight: 900;
line-height: 100px;
text-align: center;
font-size: 32px;
/*border: 2px solid black;*/
background: red;
color: white;
/*border-radius: 51px;
position: fixed;
right: 100px;
bottom: 100px;
z-index: 100;*/
}
#container{
background: #ecf0f1;
/*width: 100%;
height: 1500px;*/
}
.row{
/*width: 100%;*/
/*float: left;*/
}
.col{
/*margin: 10px 1%;*/
/*height: 150px;*/
line-height: 150px;
text-align: center;
font-size: 32px;
/*float: left;*/
/*border: 2px solid #2c3e50;*/
}
.col-third{
/*width: 30%;*/
}
.col-quarter{
/*width: 22%;*/
}
.col-full{
/*width: 98%;*/
}
.positioning{
/*float: left;*/
/*width: 100%;*/
}
.floating{
background: white;
/*height: 600px;
width: 90%;
margin: auto;
box-shadow: 5px 5px #7f8c8d;*/
}
.main{
background: #2c3e50;
color: #f1c40f;
font-size: 80px;
letter-spacing: 35px;
line-height: 150px;
font-weight: 900;
text-align: center;
/*position: relative;*/
font-family: GeometriaHeavy;
}
.overlay{
/*height: 100%;
width: 100px;*/
background: rgba(52,152,219 ,.75);
color: white;
font-size: 24px;
letter-spacing: 10px;
line-height: 75px;
/*position: absolute;
right: 30px;
z-index: 10;
top: 0;*/
}
__MACOSX/HtmlCss_Floating+Positioning/css/._styles.css
HtmlCss_Floating+Positioning/css/fonts.css
@font-face{
font-family: GeometriaBold;
src: url(../fonts/Geometria-Bold.ttf);
}
@font-face{
font-family: GeometriaLight;
src: url(../fonts/Geometria-Light.ttf);
}
@font-face{
font-family: GeometriaHeavy;
src: url(../fonts/Geometria-Heavy.ttf);
}
@font-face{
font-family: GeometriaThin;
src: url(../fonts/Geometria-Thin.ttf);
}
@font-face{
font-family: GeometriaMedium;
src: url(../fonts/Geometria-Medium.ttf);
}
__MACOSX/HtmlCss_Floating+Positioning/css/._fonts.css
HtmlCss_Floating+Positioning/images/favicon.ico
__MACOSX/HtmlCss_Floating+Positioning/images/._favicon.ico
HtmlCss_Floating+Positioning/fonts/Geometria-LightItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-LightItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-HeavyItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-HeavyItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraBold.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraBold.ttf
HtmlCss_Floating+Positioning/fonts/Geometria.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-MediumItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-MediumItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraLight.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraLight.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ThinItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ThinItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-BoldItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-BoldItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Medium.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Medium.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Heavy.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Heavy.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Italic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Italic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraLightItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraLightItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraBoldItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraBoldItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Bold.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Bold.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Light.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Light.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Thin.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Thin.ttf
HW_HTML+CSS_Images_Colors_PopupPenguins_Images.zip
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_1
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_1
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_1_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_1_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_2
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_2
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_2_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_2_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_3
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_3
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_3_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_3_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_4
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_4
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_4_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_4_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_5
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_5
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_5_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_5_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_6
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_6
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_6_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_6_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_7
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_7
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_7_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_7_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_8
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_8
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_8_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_8_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_9
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_9
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/mound_9_hover
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._mound_9_hover
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_1
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_1
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_2
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_2
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_3
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_3
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_4
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_4
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_5
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_5
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_6
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_6
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_7
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_7
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_8
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_8
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/penguin_title
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._penguin_title
HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/yeti
__MACOSX/HW05_HTML+CSS_Images_Colors_PopupPenguins_Images/._yeti
__MACOSX/._HW05_HTML+CSS_Images_Colors_PopupPenguins_Images
__MACOSX/._HtmlCss_Floating+Positioning
HtmlCss_Floating+Positioning/index.html
NEIU
CS300
HTML & CSS
Floating & Positioning
R1: C:1
R1: C:2
R1: C:3
R2: C:1
R3: C:1
R3: C:2
R3: C:3
R3: C:4
THIS IS BEHIND
ON TOP
Northeastern Illinois University – CS300
© Copyright 2018
Fixed
__MACOSX/HtmlCss_Floating+Positioning/._index.html
HtmlCss_Floating+Positioning/.DS_Store
__MACOSX/HtmlCss_Floating+Positioning/._.DS_Store
HtmlCss_Floating+Positioning/css/styles.css
body{
font-family: GeometriaThin, calibri, arial, sans-serif;
}
*{
padding: 0;
margin: 0;
}
header{
/*
* Set width = 90%
* Set height = 200px
*/
width: 90%;
height: 200px;
/*
* Set padding = 5% left and right
* Set padding = 25px left and right
*/
padding: 25px 5%;
/*
* Set border on the bottom = 2px solid black
*/
border-bottom: 2px solid black;
background: white;
}
header .left{
width: 30%;
float: left;
}
header .right{
width: 65%;
float: right;
text-align: right;
}
footer{
width: 90%;
height: 50px;
padding: 25px 5%;
border-top: 2px solid black;
}
.big{
font-size: 50px;
text-transform: lowercase;
font-family: GeometriaHeavy;
}
.small{
font-size: 25px;
text-transform: lowercase;
letter-spacing: 5px;
font-family: GeometriaLight;
}
#scrollBtn{
/*
* This will be a “sticky” button
* I.E. stuck to the bottom right corner
*/
height: 100px;
width: 100px;
font-weight: 900;
line-height: 100px;
text-align: center;
font-size: 32px;
border: 2px solid black;
background: red;
color: white;
border-radius: 51px;
position: fixed;
right: 100px;
bottom: 100px;
z-index: 100;
}
#container{
background: #ecf0f1;
width: 100%;
height: 1500px;
}
.row{
width: 100%;
float: left;
}
.col{
margin: 10px 1%;
height: 150px;
line-height: 150px;
text-align: center;
font-size: 32px;
float: left;
border: 2px solid #2c3e50;
}
.col-third{
width: 30.55%;
}
.col-quarter{
width: 22%;
}
.col-full{
width: 98%;
}
.positioning{
float: left;
width: 100%;
}
.floating{
background: white;
height: 600px;
width: 90%;
margin: auto;
box-shadow: 5px 5px #7f8c8d;
}
.main{
background: #2c3e50;
color: #f1c40f;
font-size: 50px;
letter-spacing: 35px;
line-height: 150px;
font-weight: 900;
text-align: center;
position: relative;
font-family: GeometriaHeavy;
}
.overlay{
height: 100%;
width: 100px;
background: rgba(52,152,219 ,.75);
color: white;
font-size: 24px;
letter-spacing: 10px;
line-height: 75px;
position: absolute;
right: 150px;
z-index: 10;
top: 0px;
}
__MACOSX/HtmlCss_Floating+Positioning/css/._styles.css
HtmlCss_Floating+Positioning/css/fonts.css
@font-face{
font-family: GeometriaBold;
src: url(../fonts/Geometria-Bold.ttf);
}
@font-face{
font-family: GeometriaLight;
src: url(../fonts/Geometria-Light.ttf);
}
@font-face{
font-family: GeometriaHeavy;
src: url(../fonts/Geometria-Heavy.ttf);
}
@font-face{
font-family: GeometriaThin;
src: url(../fonts/Geometria-Thin.ttf);
}
@font-face{
font-family: GeometriaMedium;
src: url(../fonts/Geometria-Medium.ttf);
}
__MACOSX/HtmlCss_Floating+Positioning/css/._fonts.css
HtmlCss_Floating+Positioning/images/favicon.ico
__MACOSX/HtmlCss_Floating+Positioning/images/._favicon.ico
HtmlCss_Floating+Positioning/fonts/Geometria-LightItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-LightItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-HeavyItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-HeavyItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraBold.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraBold.ttf
HtmlCss_Floating+Positioning/fonts/Geometria.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-MediumItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-MediumItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraLight.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraLight.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ThinItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ThinItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-BoldItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-BoldItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Medium.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Medium.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Heavy.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Heavy.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Italic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Italic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraLightItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraLightItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-ExtraBoldItalic.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-ExtraBoldItalic.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Bold.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Bold.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Light.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Light.ttf
HtmlCss_Floating+Positioning/fonts/Geometria-Thin.ttf
__MACOSX/HtmlCss_Floating+Positioning/fonts/._Geometria-Thin.ttf