glasgow_6 - Ehdaa_Sakawi - HTML/CSS - Week1

.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
 

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;
+}

index.html

@@ -12,11 +12,99 @@
       rel="stylesheet"
       type="text/css"
     />
-    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="./css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
+
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
+
+<!-- <div class="container"> -->
+      <div class="header">
+        <h2 class="header_title">HELP CHILDREN GET THE FUTURE THEY DESERVE</h2>
+
+        <p class="header-desc">Lorem, ipsum dolor.</p>
+        <div class="headerfirst">
+
+
+          <a  href="#">
+            <img  class="header_logo"    src="stc-logo.svg" alt="Save The Chidren Logo">
+          </a>
+
+
+          <nav class="header-nav">
+
+               <ul class="navigation_list">
+                 <li class="navigation_item">
+                   <a class="navigation_link"  href="#">What We Do</a>
+                 </li>
+                 <li class="navigation_item">
+                   <a class="navigation_link" href="#">About</a>
+                 </li>
+                 <li class="navigation_item">
+
+                   <a  class="navigation_link" href="#">News & Stories</a>
+                 </li>
+                 <li class="navigation_item">
+                   <a class="navigation_link" href="#">Contact</a>
+                 </li>
+               </ul>
+
+          </nav>
+
+        </div>
+
+      </div>
+              <div class="content">
+                <div class="main">
+                  <!-- <div class="img"> -->
+                  <!-- <img class="main_img"  src="/home/coder/Documents/CYF/HTML-CSS-Coursework-Week1/Save-The-Children-logo.jpg" alt="save the children photo"> -->
+                  <div class="article">
+
+                    <div class="article1">
+                      <h3 class="article_title">HOW TO HELP SYRIA & TURKEY</h3>
+                      <p class="article_summary"> A DEADLY EARTHQUAKE HAS KILLED 19,000+ IN TURKEY, SYRIA</p>
+                      <a class="arrow_right"  href="#">
+
+                          Learn more
+                      </a>
+                    </div>
+
+                    <div class="article2">
+                      <h3 class="article_title">AFGHANISTAN</h3>
+                      <p class="article_summary"> HOW THE BAN ON FEMALE NGO WORKERS WILL IMPACT CHILDREN</p>
+                      <a class="arrow_right"    href="#">
+
+                        Learn more
+                      </a>
+
+                    </div>
+                    <div class="article3">
+                      <h3 class="article_title">UKRAINE</h3>
+                      <p class="article_summary">MILLIONS OF DISPLACED CHILDREN BRACE FOR FREEZING COLD WINTER</p>
+                      <a class="arrow_right"      href="#">
+
+                          Learn more
+                      </a>
+                    </div>
+                  </div>
+
+                </div>
+                </div>
+
+
+              </div>
+
+              <div class="footer">
+                <div class="footer_content">
+                  <p>
+                    <strong>In the UK and around the world, we make sure children keep safe, healthy and learning</strong>
+                  </p>
+                  <p>With children, for children, we change the future for good.</p>
+                </div>
+              </div>
+             <!-- </div> -->
   </body>
 </html>