diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..aed73537 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -8,14 +8,64 @@ -

Product Pick

+

Chosee your clothes

+ +
+ +
+
+ +
+
+

What is your favorite color for T-Shirt?

+
+ + + +
+

What size would you like?

+
+ + + + + + +
+
+ +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..94cfe855 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,61 @@ + + +p.description{ + color: #da9137; +} + +h1{ + text-align: center; + font-family: fantasy; + font-size: 50px; +} + + +.form-control ,p{ + font-family: fantasy; + font-size: 20px; + +} + +body{ + background-image: url("https://images.pexels.com/photos/1884584/pexels-photo-1884584.jpeg"); +background-size: cover; +background-repeat: no-repeat;} + +.yellow{ + background-color:#f9e507; + color: rgb(72, 64, 64); + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 10px 30px; + border-radius: 30px; + transition: .4s; +} + +.blue{ + background-color:#404adb; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 10px 30px; + border-radius: 30px; + transition: .4s; +} + +.orange{ + background-color:#da9137; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 10px 30px; + border-radius: 30px; + transition: .4s; +} + +.date ,.form-size ,.form-control, p{ + text-align: center; +} + diff --git a/README.md b/README.md deleted file mode 100644 index 8402e81b..00000000 --- a/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# HTML-CSS-Challenges - -In this repository you will find a selection of challenges to do with HTML & CSS. diff --git a/Two-Truths-One-Lie/README.md b/Two-Truths-One-Lie/README.md deleted file mode 100644 index 6f104a8b..00000000 --- a/Two-Truths-One-Lie/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# HTML-CSS-W2-InClassProject - -## Aim - -- use CSS grid -- use CSS flexbox -- test your code - -## - -- Work in pairs. -- Write two truths and a lie each. -- Mark up your content with semantic HTML -- Lay out your page using flexbox and grid -- Test your work with Devtools. -- You can get pictures and choose custom size in the download at https://www.pexels.com/ -- If you want to use a different font, get them from https://fonts.google.com/ -- You can change the colours if you like - -## Testing your work - -Developers must test their work. Here are the tests for your project. Read your tests before you start coding. - -### CSS tests - -- [ ] we have used grid -- [ ] we have used flexbox -- [ ] we have used at least one media query - -### HTML tests - -- [ ] our names are at the bottom -- [ ] we have written semantic HTML -- [ ] we have looked in the Accessibility tree -- [ ] our Lighthouse Access score is 100 - -### Design tests - -- [ ] our layout works on desktop and mobile -- [ ] our cards are side by side on large screens and stacked on smaller screens -- [ ] we have taken a screenshot at laptop and Moto G4 device sizes using Devtools -- [ ] when we size the text up by 200%, our layout does not break diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html deleted file mode 100644 index 37cdbfa1..00000000 --- a/Two-Truths-One-Lie/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - Our Grid Project - - - - - - - -
-

Two Truths, One Lie

-
-
- -
- - - \ No newline at end of file diff --git a/Two-Truths-One-Lie/laptop.png b/Two-Truths-One-Lie/laptop.png deleted file mode 100644 index dbbc11b6..00000000 Binary files a/Two-Truths-One-Lie/laptop.png and /dev/null differ diff --git a/Two-Truths-One-Lie/moto-g4.png b/Two-Truths-One-Lie/moto-g4.png deleted file mode 100644 index 23c7c039..00000000 Binary files a/Two-Truths-One-Lie/moto-g4.png and /dev/null differ diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css deleted file mode 100644 index b8e36944..00000000 --- a/Two-Truths-One-Lie/styles.css +++ /dev/null @@ -1,33 +0,0 @@ -/* HTML/CSS W2 Project -* Work in pairs -* Mark up your content with semantic html -* Lay out your page using flexbox and grid -* Test your work with Devtools. -* You can get pictures and choose custom size in the download at -* https://www.pexels.com/ -* If you want to use a different font, get them from -* https://fonts.google.com/ -*/ - -/* Testing your work -== check your CSS -* uses grid -* uses flexbox -* uses at least one media query - -== check your HTML -* uses semantic HTML -* has a Lighthouse Access score of 100 <-- -* works on desktop and mobile -* works when you size the text up by 200% - -== check your design -* follows the example -* you can choose your own colours and fonts if you like -* write your names at the bottom -* take a screenshot at laptop and Moto G4 device sizes in Devtools -*/ - -body { - font: 100% "Poppins", sans-serif; -} diff --git a/zoo-css-challenge/README.md b/zoo-css-challenge/README.md deleted file mode 100644 index ef30e833..00000000 --- a/zoo-css-challenge/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# Zoo Exercise Instructions - -You have been hired by a zoo to build a website. - -I’ve done the first part but it is full of mistakes. It’s your job to fix them. The client has sent over a list of alterations and recommendations that they want to fix the site with. - -You are encouraged to use Google to help you find the answers to these problems. - -## 1) Introduction - -First of all, we don’t want the logo to have a purple border. The logo has an ID of logo, make sure this has no border. - -The first section has a class name of ‘introduction’. Give this section a white background. Add a paragraph to this section with the following text: - -‘The zoo is open every day of the year and features three major biomes: the Tropic Zone, Temperate Territory, and the Polar Circle. From tropical birds, to snow leopards, grizzly bears, and one of the nation’s largest colonies of Antarctic penguins, there are animals to enjoy in every season.’ - -Most of the text on the page is very close together. Increase the amount of space of the text so that there's more breathing space. - -## 2) Bears: - -All the images of bears have the same border colour, can all these images be given a different border colour? - -The images of the bears are also misaligned. Can all these images be vertically aligned to the top of the container. - -## 3) Tigers - -The purple headings are hard to read on dark backgrounds, change them to a lighter colour. Make sure it passes the WCAG AA standards for contrast. You can use this tool to help: https://webaim.org/resources/contrastchecker/ - -Change the heading of this section to ‘Tiger Facts’, remove the subheading, and change the ordered list to an unordered list. - -## 4) Giraffes - -Change the background colour to #483C46, the section titles to #F4743B, and the paragraph color to #BEEE62. - -Make the first paragraph have a larger font size. - -## 5) News - -Can the title of this section be centred in the middle of this page? - -Add another news item with the title with today's date, and the title of ‘Which big cat are you?’ - -## 6) Learning - -The buttons are a little hard to read. We’d like the buttons to have larger text, and also to change colour when you hover and focus on them. - -We don’t like the hard corners here. Can you give the container in the section some rounded corners? - -## 7) Membership - -Give the paragraph a maximum width of 700 pixels, and keep in the middle by adjusting the margin. - -## 8) Programs - -The cards are stacked on top of each other which looks like a poor use of space. Change these so that they display horizontally across the screen. - -Make sure all the links open in a new tab. - -## 9) Badge - -The badge that says ‘Opening 2021’ we’d like to be on the top right instead of the bottom right. - -When a user hovers over the badge, add a transition so the change in colour is smoother. - -## 10) New section - -If you have time, add a new section for your favorite animal. diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html deleted file mode 100644 index 0892fd58..00000000 --- a/zoo-css-challenge/index.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - - -
- - -
-
-
-

Birmingham Zoo

-
- -
-

Opening 2021!

-
- -
-

Bears

-

Did you know that a bear's closest relative is the seal? Or that bears can smell over 2,000 times better than humans?

-
- Grizzly Bear - Grizzly Bear - Grizzly Bear -
-
- -
-

Tiger

-

Top 5 Tiger Facts

-
    -
  1. Tigers are the largest cat species in the world reaching up to 3.3 meters in length and weighing up to 670 pounds! -
  2. Tigers are easily recognizable with their dark vertical stripes and reddish/orange fur. -
  3. The Bengal tiger is the most common tiger. -
  4. Tigers live between 20-26 years in the wild. -
  5. Unlike most other cats, tigers are great swimmers and actually like the water. -
-
- -
-

Giraffe

- -

Giraffes are the world's tallest mammals, thanks to their towering legs and long necks. A giraffe's legs alone are taller than many humans—about 6 feet . These long legs allow giraffes to run as fast as 35 miles an hour over short distances and cruise comfortably at 10 miles an hour over longer distances.

- -

Behavior

- -

Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.

- -

Bulls sometimes battle one another by butting their long necks and heads. Such contests aren't usually dangerous and end when one animal submits and walks away.

- -

Height and Size

- -

Giraffes use their height to good advantage and browse on leaves and buds in treetops that few other animals can reach (acacias are a favorite). Even the giraffe's tongue is long! The 21-inch tongue helps them pluck tasty morsels from branches. Giraffes eat most of the time and, like cows, regurgitate food and chew it as cud. A giraffe eats hundreds of pounds of leaves each week and must travel miles to find enough food.

-
- -
-

News

-
- -

Helping wild turtles in Seychelles

- Find out More -
-
- -

Learning about the rainforest

- Find out More -
-
- -
-
-

Learning resources for schools

-

Explore our activities, videos, and lesson plans to support a wide range of curriculum topics

- -
-
- -
-

Are there any benefits or discounts for members?

-

There are AMAZING benefits of becoming a member with Birmingham Zoo! Our members get special discounts in our shops, cafes, and unlimited entry

- -
- -
-

Programs

-
-

Children and Family Programs

- Find out More -
-
-

Adult Programs

- Find out More -
-
-

Youth and young adults

- Find out More -
-

Useful Links

-

-

- w3schools.com - National Geographic - Wikipedia -
- -
- - - \ No newline at end of file diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css deleted file mode 100644 index b9007645..00000000 --- a/zoo-css-challenge/style.css +++ /dev/null @@ -1,195 +0,0 @@ -* { - font-family: sans-serif; -} - -header { - background-color: #211a1d; - color: #ffffff; - width: 100%; - padding: 20px; -} - -nav { - display: inline-block; - width: 100%; -} - -header ul { - margin: 20px 0 0 0; - padding: 0; -} - -header ul li { - display: inline-block; - margin-right: 10px; -} - -section { - padding: 5%; - background-color: #f8f0fb; -} - -img { - border: 5px solid #8075ff; -} - -h1, -h2, -h3, -h4, -h5 { - /*Purple*/ - color: #6320ee; - margin-bottom: 1em; -} - -h1 { - font-size: 250%; -} - -h2 { - font-size: 175%; -} - -h3 { - font-size: 150%; -} - -button { - display: inline-block; - border-radius: 3px; - cursor: pointer; - padding: 10px 20px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); - background-color: #372772; - border: 2px solid black; - color: #fff; -} - -footer { - background-color: #211a1d; - color: #ffffff; - width: 100%; - padding: 20px; - display: flex; - justify-content: space-between; -} - -.introduction { -} - -#badge { - height: 120px; - width: 120px; - background-color: #bbb; - border-radius: 50%; - display: inline-block; - position: fixed; - bottom: 20px; - right: 20px; - - display: flex; - justify-content: center; - align-content: center; - flex-direction: column; -} - -#badge:hover { - background-color: yellow; -} - -#badge p { - text-align: center; - font-size: 125%; -} - -.image-container img { - vertical-align: top; - border: 5px solid #747c92; -} - -.image-container img:first-of-type { - vertical-align: bottom; -} - -.tigers { - background-color: #0b3c49; - color: #f0e100; -} - -.giraffe { - background-color: #465775; - color: #56e39f; -} - -.giraffe h2 { - color: #ef6f6c; -} - -.card { - display: inline-block; - background-color: white; - padding: 20px; - margin: 10px; - width: 30%; - border: 1px solid black; - border-radius: 10px; -} - -.card h4 { - margin-bottom: 1em; -} - -.card a { - text-decoration: underline; - font-weight: bold; -} - -.card time { - opacity: 0.5; - display: inline-block; - margin-bottom: 10px; -} - -/*Education*/ - -.education { - height: 500px; - background-image: url("https://source.unsplash.com/1200x900/?tiger"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - padding: 100px 5%; -} - -.education-container { - background-color: rgba(255, 255, 255, 0.75); - padding: 50px; - max-width: 400px; -} - -.education-container h3, -.education-container p { - margin-bottom: 1em; -} - -/*Membership*/ - -.membership { - text-align: center; - background-color: #fffffc; -} - -.membership h2 { - color: #ff3f00; -} - -.membership strong { - color: #ff7f11; -} - -/*Programs*/ - -.programs .card { - display: block; -}