From 7e5ec2f8364f9f428b5f7040abeb78f8371f66cf Mon Sep 17 00:00:00 2001 From: WING TSAN W CHENG Date: Thu, 19 Mar 2015 14:07:48 +0800 Subject: [PATCH 1/2] Website exercise --- css/style.css | 206 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 212 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 411 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29..1acc5d5 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,206 @@ + + +#header { + color: gainsboro; + font-size: 16px; + font-family: Arial; + background-color: black; + font-weight: lighter; + width: 870px; + padding: 30px; + border: 15px white; + margin-bottom: 15px; + +} + +#header2 { + color: white; + font-size: 14px; + font-family: Arial; + background-color: black; + font-weight: lighter: + width: 320px; + padding: 12px; + border: 15px white; + margin-bottom: 15px; +} + +#background { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 400px; + background-color: whitesmoke; + opacity: 0.4; + z-index:-1; + + border-bottom: thick none white; +} + +#photobanner { + display: block; + max-width:870px; + max-height:870px; + width: auto; + height: auto; + box-shadow: 15px 15px 100px gray; + margin-bottom: 30px; +} + + +/*the # is an ID selector. CAN ONLY BE USED ONCE?*/ + +#current-weather { + color:orange; +} + +#mid-box { + color: black; + /*border: solid green;*/ + padding: 10px ; + margin: 10px; + font-family: Arial; + font-size:16px; + font-weight: lighter; +} + +/*this is a class selector. all stuff of this class will get these styles*/ + +#headerrowwidth { + width: 100px; +} + +.threeimg { + padding:1px; + border:5px solid gainsboro; + background-color: white; +} + +.threebox { + color: black; + font-size: 18px; + font-family: Arial; + font-weight: lighter: + } + +.threeboxdesc { + color: black; + font-size: 12px; + font-family: Arial; + font-weight: lighter: + } + +.read-more { + color: deepskyblue; + font-family: Arial; + font-size: 12px; + } + +.threeboxtable { + margin-bottom: 20px; + } + +.footer { + color: gainsboro; + font-size: 14px; + font-family: Arial; + background-color: black; + font-weight: lighter; + width: 870px; + padding: 12px; + border: 15px white; + margin-bottom: 15px; +} + +.logoimg { + float: right; + display: block; + max-width:40px; + max-height:40px; + width: auto; + height: auto; +} + +.logoimg2 { + float: right; + max-width:400px; + max-height:400px; + width: auto; + height: auto; +} + +.hboxtitle { +} + +.footer-txt { + color: grey; + font-size: 12px; + font-family: Arial; +/* font-weight: lighter:*/ + /* width: 320px; + padding: 12px; + border: 15px white; + margin-bottom: 15px; */ +} + +} +.mammal { + background-color: lavender; + font-weight: bold; +} + +.bird { + background-color: lightGray; + font-style: italic; +} + +.fish { + background-color: lightYellow; + text-decoration: underline; +} + +/*Grouping Selectors*/ + +ul, ol { + text-align: left; + color: grey; +} + +#container { + display: block; + margin-left: 50px; + margin-right: auto; +} + +#mouse { color: grey;} + +#canary { color: orangeRed;} + +#penguin{ color: black;} + +#salmon{ color: salmon;} + +#cat{ color: sienna;} + +#goldfish{ color: gold;} + +#dog{ color: tan;} + +#sheep{ color: steelBlue;} + +#parakeet{ color: lime;} + +#tuna { color: purple;} + +.classSel { + background-color: red; + color: white; + } + +.classSel2 { + background-color: yellow; + color: white; + } \ No newline at end of file diff --git a/index.html b/index.html index 61786f7..24759d6 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,206 @@ - + + - - - - - \ No newline at end of file + + Hello World: Title On The Tab + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+ + + +
+ +
+ + + +
+ + + + + + + + +
/Description of the mid-box + +
+
+ + + + + + + + + + +
+

Home Box 1

+ +

/Description of pictures above.

+ Read more >> + 		+

Home Box 2

+ +

/Description of pictures above.

+ Read more >> + 		+

Home Box 3

+ +

/Description of pictures above.

+ Read more >> +
+ + + + + + + + + + + +
+

Blogroll

+

/Description of pictures above.

+

Read more >>

+ 		+

Text widget

+

/Description of pictures above.

+

Read more >>

+ 		+

Meta widget

+

/Description of pictures above.

+

Read more >>

+
+ + +

+ +

Drinks I like

+
+

There are many drinks I like, including:

+
+ +
+ +
+
+ +
+ + + + + + + + + + + + + +
+
+

Note: these are identical pictures of drinks. One of them also links to another website.

+

Foods I like

+

There are also many foods I like, including, in order of preferenceL

+
    +
  1. Solid foods
    2. +
  2. Non-solid foods
    3. +
  3. Semi-solid foods
    4. +
+ +

Note: this is a picture of food; but not a link to a website.

+

.

+

.

+ + + +

Below are solutions to CSS Paths Exercise 1

+
  • mouse
    • +
  • canary
    • +
  • penguin
    • +
  • salmon
    • +
  • cat
    • +
  • goldfish
    • +
  • dog
    • +
  • sheep
    • +
  • parakeet
    • +
  • tuna
    • + + + + + + From a11c18645355ea2ccd5b815d5ff37b81adfa25ba Mon Sep 17 00:00:00 2001 From: WING TSAN W CHENG Date: Sat, 21 Mar 2015 09:48:25 +0800 Subject: [PATCH 2/2] took out bottom logos --- css/style.css | 41 ++++++++++++++++++++++++++++++++++------- index.html | 48 ++++++++++++++++++++++++++---------------------- 2 files changed, 60 insertions(+), 29 deletions(-) diff --git a/css/style.css b/css/style.css index 1acc5d5..1e5b2df 100644 --- a/css/style.css +++ b/css/style.css @@ -1,16 +1,20 @@ +#container { + margin: 0 auto; + width: 960px; +} + #header { color: gainsboro; font-size: 16px; font-family: Arial; background-color: black; - font-weight: lighter; width: 870px; padding: 30px; border: 15px white; margin-bottom: 15px; - + } #header2 { @@ -73,6 +77,33 @@ width: 100px; } +/*note: the social-media doesn't work yet*/; +#social-media { + float: left; /* float the
  • elements inside #social-media element left */ + background:url(../images/socialNav.png); + margin: 3px; + text-indent: 100%; + white-space: nowrap; + overflow: hidden; +} + +/* social-media hover */ +#social-linked:hover { + background-position: 0px 0px; +} + +#social-twit:hover { + background-position: -60px 0px; +} + +#social-media .facebook:hover { + background-position: -120px 0px; +} + +#social-media .rss:hover { + background-position: -180px 0px; +} + .threeimg { padding:1px; border:5px solid gainsboro; @@ -169,11 +200,7 @@ ul, ol { color: grey; } -#container { - display: block; - margin-left: 50px; - margin-right: auto; -} + #mouse { color: grey;} diff --git a/index.html b/index.html index 24759d6..d4721cc 100644 --- a/index.html +++ b/index.html @@ -8,33 +8,33 @@ - - + +
    +
    -
    - +
    + @@ -45,22 +45,22 @@ --> @@ -73,8 +73,6 @@ --> - -
    @@ -139,9 +137,10 @@ -->
    + -

    - + + -

    Below are solutions to CSS Paths Exercise 1

    + + +