diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 46c150e1..e1f424b3 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -16,14 +16,14 @@ Please complete the details below this message # Your Details -- Your Name: -- Your City: -- Your Slack Name: +- Your Name: Ehdaa Sakawi +- Your City:Glasgow +- Your Slack Name:Ehdaa Munier # Homework Details -- Module: -- Week: +- Module: html/css +- Week:1 # Notes diff --git a/Save-The-Children-logo.jpg b/Save-The-Children-logo.jpg new file mode 100644 index 00000000..dd54ab8f Binary files /dev/null and b/Save-The-Children-logo.jpg differ diff --git a/Why-Should-I-Choose-To-Save-The-Children.jpg b/Why-Should-I-Choose-To-Save-The-Children.jpg new file mode 100644 index 00000000..27681911 Binary files /dev/null and b/Why-Should-I-Choose-To-Save-The-Children.jpg differ diff --git a/css/style.css b/css/style.css index 75e9841e..90d27a7a 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,219 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + * { + margin: 0; + padding: 0; +} + +:root{ + --black:var(--black)#000000; + --red:var(#dc3545); + --white:var(#fff); + --light-gray:var(#d3d3d3); + --gray:var(#808080); +} + + + + +body{ + + +font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + +} +.headerfirst{ + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + +} +.header{ + +display: flex; +/* height: 10rem; */ +flex-direction: column; +justify-content:center; +align-items: center; +margin: 0rem; +/* padding: 1rem; */ + background-color:white + +} + +.header_title{ +text-align: center; +align-content: center; +width: 60%; +margin-top: 1rem; +/* padding-bottom: 2rem; */ + /* padding-left: 2rem; +padding-right: 2rem; */ +/* margin-left: 1rem; */ +/* margin-right: 30rem; +padding: 2rem; */ + +} + +.header-desc { + width: 45%; + margin-top: 1rem; + text-align: center; + +} + .navigation_list { + display: flex; + list-style: none; + align-items: end; + margin-left: 30rem; + height: 100%; + /* margin-right: 10rem; */ + align-items: center; + justify-content: space-between; + + +} + +.header_logo{ +height: 60px; +width: auto; + margin: 0; + padding: 0; + +} + +.navigation_item{ + padding: 1.5rem; + /* font-weight: bold; */ + /* font-size: larger; */ + +} + +.navigation_link{ + + + color: #000000; + font-weight: 800; + text-transform: uppercase; + text-decoration: none; + +} + +/* .img{ + background-color: aqua; +} */ + +.content{ + + + background-image: url("../original.img.jpg"); + /* background-color: white; */ + background-size: cover; + /* padding: 2rem; */ + line-height: 1.5; + align-content: center; + + +} + +/* .main{ + padding: 1rem; + margin: auto; + background-image: url('../original.img.jpg'); + +} */ + + + +.article{ + + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + /* color: #dc3545; */ + /* margin: 1.5rem; + padding: 1rem; */ + /* background-color: white; */ + + +} +.article1{ + width: fit-content; + border-style: solid; + border-radius: 5px; + border-width: thin; + border-color: #808080; + background-color:rgb(51, 51, 51 , 0.5) ; + margin: 1.5rem; + width: 500px; + height: 200px; +} + +.article2{ + width: fit-content; + border-style: solid; + border-radius: 5px; + border-width: thin; + border-color: #808080; + background-color:rgb(51, 51, 51 , 0.5) ; + margin: 1.5rem; + width: 500px; + height: 200px; +} + + .article3{ + width: fit-content; + border-style: solid; + border-radius: 5px; + border-width: thin; + border-color: #808080; + background-color:rgb(51, 51, 51 , 0.5) ; + margin: 1.5rem; + width: 500px; + height: 200px; +} +.article_title{ + color: black; + font-size: 30px; + padding: 0.5rem; +} + +.article_summary{ + color: black; + font-size: 20px; + + padding: 0.5rem; +} + +.arrow_right{ + color: orangered; + text-decoration:none; + padding: 0.5rem; + +} + +.footer{ + margin-top: 0rem; + /* padding: 1rem; + height: 7rem; */ + background-color: white; + +} + + +.footer_content{ +border-top: 2px solid var(--black); +margin: 1rem; +/* padding-top: 2rem; +padding-bottom: 2rem; */ +} +.footer p{ + /* padding-bottom: 2rem; */ + font-size: 1rem; + text-align: center; + margin: 1rem; +} \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..5fa92412 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,99 @@ rel="stylesheet" type="text/css" /> - + + + + + +
+

HELP CHILDREN GET THE FUTURE THEY DESERVE

+ +

Lorem, ipsum dolor.

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

HOW TO HELP SYRIA & TURKEY

+

A DEADLY EARTHQUAKE HAS KILLED 19,000+ IN TURKEY, SYRIA

+ + + Learn more + +
+ +
+

AFGHANISTAN

+

HOW THE BAN ON FEMALE NGO WORKERS WILL IMPACT CHILDREN

+ + + Learn more + + +
+
+

UKRAINE

+

MILLIONS OF DISPLACED CHILDREN BRACE FOR FREEZING COLD WINTER

+ + + Learn more + +
+
+ +
+
+ + + + +
+
+

+ In the UK and around the world, we make sure children keep safe, healthy and learning +

+

With children, for children, we change the future for good.

+
+
+ diff --git a/original.img.jpg b/original.img.jpg new file mode 100644 index 00000000..7698dc7b Binary files /dev/null and b/original.img.jpg differ diff --git a/stc-logo.svg b/stc-logo.svg new file mode 100644 index 00000000..8572f16f --- /dev/null +++ b/stc-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file