diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..5c98b42 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,2 @@ +# Default ignored files +/workspace.xml \ No newline at end of file diff --git a/.idea/HTML-CSS-PrepWork.iml b/.idea/HTML-CSS-PrepWork.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/HTML-CSS-PrepWork.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..7af0302 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Assessment 1/dove.png b/Assessment 1/dove.png new file mode 100644 index 0000000..6af46ef Binary files /dev/null and b/Assessment 1/dove.png differ diff --git a/Assessment 1/favorite-1.jpg b/Assessment 1/favorite-1.jpg new file mode 100644 index 0000000..3f2a96c Binary files /dev/null and b/Assessment 1/favorite-1.jpg differ diff --git a/Assessment 1/favorite-1_th.jpg b/Assessment 1/favorite-1_th.jpg new file mode 100644 index 0000000..35403a8 Binary files /dev/null and b/Assessment 1/favorite-1_th.jpg differ diff --git a/Assessment 1/favorite-2.jpg b/Assessment 1/favorite-2.jpg new file mode 100644 index 0000000..b841943 Binary files /dev/null and b/Assessment 1/favorite-2.jpg differ diff --git a/Assessment 1/favorite-2_th.jpg b/Assessment 1/favorite-2_th.jpg new file mode 100644 index 0000000..2813aa4 Binary files /dev/null and b/Assessment 1/favorite-2_th.jpg differ diff --git a/Assessment 1/favorite-3.jpg b/Assessment 1/favorite-3.jpg new file mode 100644 index 0000000..a0852b9 Binary files /dev/null and b/Assessment 1/favorite-3.jpg differ diff --git a/Assessment 1/favorite-3_th.jpg b/Assessment 1/favorite-3_th.jpg new file mode 100644 index 0000000..a396b1a Binary files /dev/null and b/Assessment 1/favorite-3_th.jpg differ diff --git a/Assessment 1/favorite-4.jpg b/Assessment 1/favorite-4.jpg new file mode 100644 index 0000000..b5a8d14 Binary files /dev/null and b/Assessment 1/favorite-4.jpg differ diff --git a/Assessment 1/favorite-4_th.jpg b/Assessment 1/favorite-4_th.jpg new file mode 100644 index 0000000..37114d4 Binary files /dev/null and b/Assessment 1/favorite-4_th.jpg differ diff --git a/Assessment 1/index.html b/Assessment 1/index.html new file mode 100644 index 0000000..5473891 --- /dev/null +++ b/Assessment 1/index.html @@ -0,0 +1,58 @@ + + + + + Birdwatching + + + + + + + + +
+

Birdwatching

+ a simple dove logo + + +
+ + +
+
+

Welcome

+ +

Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.

+ +

So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!

+
+ + +
+ + + + + diff --git a/Assessment 1/style.css b/Assessment 1/style.css new file mode 100644 index 0000000..34f3e27 --- /dev/null +++ b/Assessment 1/style.css @@ -0,0 +1,138 @@ +/* || General setup */ + +html, body { + margin: 0; + padding: 0; +} + +html { + font-size: 10px; + background-color: #a9a9a9; +} + +body { + width: 70%; + min-width: 800px; + margin: 0 auto; +} + +/* || typography */ + +h1, h2, h3 { + font-family: 'Cinzel Decorative', cursive; + color: #2a2a2a; +} + +p, input, li { + font-family: 'Roboto Condensed', sans-serif; + color: #2a2a2a; +} + +h1 { + font-size: 4rem; + text-align: center; + text-shadow: 2px 2px 8px black; +} + +h2 { + font-size: 3rem; + text-align: center; +} + +h3 { + font-size: 2.2rem; +} + +p, li { + font-size: 1.6rem; + line-height: 1.5; +} + +/* || header layout */ + +header { + margin-bottom: 10px; + display: flex; + flex-flow: row wrap; +} + +body > * { + background-color: red; + padding: 1%; +} + +main, header, nav, article, aside, footer, section { + background-color: rgba(0,255,0,0.5); + padding: 1%; +} + +h1 { + flex: 5; + text-transform: uppercase; +} + +header img { + display: block; + height: 60px; + padding-top: 20.15px; +} + +nav { + height: 50px; + flex: 100%; + display: flex; +} + +nav ul { + padding: 0; + list-style-type: none; + flex: 2; + display: flex; +} + +nav li { + display: inline; + text-align: center; + flex: 1; +} + +nav a, nav span { + display: inline-block; + font-size: 2rem; + height: 3rem; + line-height: 1.7; + text-transform: uppercase; + text-decoration: none; + color: black; + +} + +/* || main layout */ + +main { + display: flex; +} + +article, section { + flex: 4; +} + +aside { + flex: 1; + margin-left: 10px; + padding: 1%; +} + +aside a { + display: block; + float: left; + width: 50%; +} + +aside img { + max-width: 100%; +} + +footer { + margin-top: 10px; +} diff --git a/Assessment 2/image/charlotte.jpg b/Assessment 2/image/charlotte.jpg new file mode 100644 index 0000000..a8d4eec Binary files /dev/null and b/Assessment 2/image/charlotte.jpg differ diff --git a/Assessment 2/index.html b/Assessment 2/index.html new file mode 100644 index 0000000..e60123d --- /dev/null +++ b/Assessment 2/index.html @@ -0,0 +1,29 @@ + + + + + Fundamental CSS comprehension + + + + +
+
+

Charlotte Beale

+
+
+ placeholder + +

1007 W Orange Street
+ Wilmington, Delaware 19805
+ USA
+ Tel: 215.512.1695
+ E-Mail: cbeale2000@gmail.com

+
+ +
+ + + diff --git a/Assessment 2/style-resources.css b/Assessment 2/style-resources.css new file mode 100644 index 0000000..e41e9f5 --- /dev/null +++ b/Assessment 2/style-resources.css @@ -0,0 +1,89 @@ +/* General styles - put these straight into your stylesheet */ + +body { + margin: 100px 0 0; + position: center; + max-width: 350px; +} + +html { + font-family: 'Helvetica neue', Arial, 'sans serif'; + font-size: 10px; + background-color: #bbc8cc; +} + +/* Selectors to be matched up with rulesets */ + +.card article img +.card footer +.card header +.card + +/* Rulesets to be matched up with selectors */ +.card { + width: 35em; + height: 22em; + margin: 5em auto; + background-colour: #927fff; + border: 0.2em solid black; + border-radius: 1.5em; + + /* Add shadows to create the "card" effect */ + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + +} + +/* Styles for the header/footer of the card */ +.card footer { + background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1)); + border-radius: 0 0 1.5em 1.5em; +} + +.card header { + background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0)); + border-radius: 1.5em 1.5em 0 0; +} + +.card header, .card footer { + height: 3em; + padding: 1em; + background-color: #072c80; +} + +/* Styles for the main content of the card */ +.card article img { + max-height: 100%; + float: right; +} + +.card h2, .card p { + margin: 0; +} +.card h2 { + font-size: 2em; + line-height: 1.5em; + +} + +.card footer p { + font-size: 1.5em; + line-height: 2em; +} + +.card article { + height: 12em; + background: #3452a0; +} + +.card article p { + padding: 1em; + color: rgba(7, 4, 4, 0.99); + line-height: 1.4; + +} + +/* On mouse-over, add a deeper shadow */ +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} diff --git a/Assessment 3/external-link-52.png b/Assessment 3/external-link-52.png new file mode 100644 index 0000000..7a34cff Binary files /dev/null and b/Assessment 3/external-link-52.png differ diff --git a/Assessment 3/index.html b/Assessment 3/index.html new file mode 100644 index 0000000..14b0c09 --- /dev/null +++ b/Assessment 3/index.html @@ -0,0 +1,81 @@ + + + + + St Huxley's Community College + + + + +
+

St Huxley's Community College

+
+ +
+

Brave new world

+ +

It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they start to move into the adult world of examinations, jobs, careers, and other life choices. Having the wrong mindset, becoming too emotional, or making the wrong choices can contribute to them experiencing difficulty in taking their rightful place in today's ideal society.

+ +

As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the right place.

+ +

The best start in life

+ +

At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them the societal and emotional intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data mining, and chemistry, but we also include compulsory lessons in:

+ + + +

If you are interested, then you next steps will likely be to:

+ +
    +
  1. Call us for more information
    2. +
  2. Ask for a brochure, which includes signup form
    3. +
  3. Book a visit!
    4. +
+
+ + + + + + + + + diff --git a/Assessment 3/style.css b/Assessment 3/style.css new file mode 100644 index 0000000..3201ca5 --- /dev/null +++ b/Assessment 3/style.css @@ -0,0 +1,161 @@ +/* General setup */ + +* { + box-sizing: border-box; +} + +body { + margin: 0 auto; + min-width: 1000px; + max-width: 1400px; +} + +header { + font-size: 15px; + font-style: italic; + line-height: 1.0; +} +/* Layout */ + +section { + float: left; + width: 50%; +} + +aside { + float:left; + width: 30%; +} + +nav { + float: left; + width: 20%; +} + +footer { + clear: both; +} + +header, section, aside, nav, footer { + padding: 20px; +} + +/* header and footer */ + +header, footer { + border-top: 5px solid #a66; + border-bottom: 5px solid #a66; +} + +/* WRITE YOUR CODE BELOW HERE */ +/* header and footer */ +header h1 { + font-size: 35px; + text-align: center; + letter-spacing: 0.1em; + font-family: 'open sans', sans-serif; +} + + +header, footer { + border-top: 5px solid #a66; + border-bottom: 5px solid #a66; +} + +/* aside */ +aside ul li a{ + color: #aa6666; + font-size: 15px; + line-height: normal; +} +aside ul li a:hover,aside:focus { + text-decoration: none; + color: #2a2a2a; +} +aside p a{ + font-size: 15px; +} +aside p a:hover,aside:focus{ + text-decoration: none; + color: #2a2a2a; +} + +a[target="_blank"]{ + color: #aa6666; +} + +a[target="_blank"]:hover, a[target="_blank"]:focus { + text-decoration: none; + color: #2a2a2a; +} + +section ol li{ + font-size: 15px; +} +section ol li a:hover, section:focus{ + text-decoration: none; + color: #2a2a2a; +} + +section ul li{ + font-size: 15px; +} +section ul li:hover, section:focus{ + font-size: smaller; +} + + +/* list styling */ + +ul, ol, aside p { + font-size: 1.5em; +} + +li { + line-height: 1em; + list-style-type: square; +} + +/* navigation tabs */ +nav{ + padding-left:0; + +} + +nav a { + text-decoration: none; + outline: none; +} + +nav ul{ + padding: 0; +} + + +nav ul li { + list-style-type: none; + +} + + +nav ul li a{ + display: inline-block; + font-family: sans-serif; + list-style-type: none; + line-height: 2em; + float: right; + width:100%; + height: 50px; + border: 1.2px solid #aa6666; + border-radius: 3px; + text-align: center; + margin-top: 1em; + color: #aa6666; +} + + +nav ul li a:hover,nav:focus { + text-decoration: none; + background-color:#aa6666; + color: white; +} diff --git a/Assessment 5/images/balloon-sq1.jpg b/Assessment 5/images/balloon-sq1.jpg new file mode 100644 index 0000000..3545f3f Binary files /dev/null and b/Assessment 5/images/balloon-sq1.jpg differ diff --git a/Assessment 5/images/balloon-sq2.jpg b/Assessment 5/images/balloon-sq2.jpg new file mode 100644 index 0000000..8fa8cf3 Binary files /dev/null and b/Assessment 5/images/balloon-sq2.jpg differ diff --git a/Assessment 5/images/balloon-sq3.jpg b/Assessment 5/images/balloon-sq3.jpg new file mode 100644 index 0000000..77ad92f Binary files /dev/null and b/Assessment 5/images/balloon-sq3.jpg differ diff --git a/Assessment 5/images/balloon-sq4.jpg b/Assessment 5/images/balloon-sq4.jpg new file mode 100644 index 0000000..5c9644c Binary files /dev/null and b/Assessment 5/images/balloon-sq4.jpg differ diff --git a/Assessment 5/images/balloon-sq5.jpg b/Assessment 5/images/balloon-sq5.jpg new file mode 100644 index 0000000..c3360a4 Binary files /dev/null and b/Assessment 5/images/balloon-sq5.jpg differ diff --git a/Assessment 5/images/balloon-sq6.jpg b/Assessment 5/images/balloon-sq6.jpg new file mode 100644 index 0000000..a42d38b Binary files /dev/null and b/Assessment 5/images/balloon-sq6.jpg differ diff --git a/Assessment 5/index.html b/Assessment 5/index.html new file mode 100644 index 0000000..4407654 --- /dev/null +++ b/Assessment 5/index.html @@ -0,0 +1,82 @@ + + + + + + Layout Task + + + + +
+ + + +
+ +
+ +
+

+ An Exciting Blog Post +

+ placeholder +

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic.

+ +

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens + dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+ +

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon + napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. + Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram + corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. + Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

+ +

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie + turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki + bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

+ +

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle + seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

+ +
+ + +
+ + + + diff --git a/Assessment 5/style.css b/Assessment 5/style.css new file mode 100644 index 0000000..1ba2063 --- /dev/null +++ b/Assessment 5/style.css @@ -0,0 +1,95 @@ +body { + background-color: #fff; + color: #333; + margin: 0; + font: 1.2em / 1.2 Arial, Helvetica, sans-serif; +} + +img { + max-width: 100%; + display: block; +} + +.logo { + font-size: 200%; + padding: 50px 20px; + margin: 0 auto; + max-width: 980px; +} + +/* navigation*/ +nav { + background-color: #000; + padding: .5em; + position: sticky; + top: 10px; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-flow: row wrap; + justify-content: space-around; +} + +nav a { + color: #fff; + text-decoration: none; + padding: .5em 1em; +} +nav ul li a:hover { + color: goldenrod; + +} + +/* "main" grid */ +.grid { + margin: 0 auto; + padding: 0 20px; + max-width: 980px; + display: grid; + grid-gap: 20px; +} +.photos { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-gap: 1px; +} + +.feature { + width: 200px; +} + + +article { + grid-column: 1/ 10; + grid-row: 1; + width: 100%; +} + +aside { + grid-column: 10; + grid-row: 1; + width: 100%; + flex: 1; + margin-left: 10px; + padding: 1%; +} + +article img { + float: left; + margin-right: 1em; + max-width: 100%; +} + +aside a { + display: block; + float: left; + width: 50%; +}