i complete all changes in html and css both files

CodeYourFuture · Sep 12, 2024 · 1d4c3fe · 1d4c3fe
1 parent 9ab27d4
commit 1d4c3fe
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
   </head>
 
   <body>
-    <div class="header">
+    <header class="header">
 
         <a href="#">
           <img
@@ -47,12 +47,12 @@
           </ul>
         </div>
 
-        <button>Donate Now</button>
+        <button class="btn">Donate Now</button>
 
-    </div>
+    </header>
 
     <div class="content">
-        <div class="main">
+        <main class="main">
           <div class="alert">
             You've helped us give <span class="text-highlight">72</span> bikes
             to refugees and asylum seekers so far. <strong>Thank you!</strong>
@@ -68,11 +68,11 @@ <h1>Bikes for Refugees</h1>
             <button>Volunteer</button>
           </div>
 
+
           <div>
             <h2 class="heading-underline">Learn more</h2>
-
-            <div>
-              <div class="article">
+            <div class="bottom-content">
+              <div class="article1">
                 <h3 class="article__title">Why do refugees need bikes?</h3>
                 <p class="article__summary">
                   Many refugees are placed in housing in areas where there are
@@ -87,7 +87,7 @@ <h3 class="article__title">Why do refugees need bikes?</h3>
                 </p>
               </div>
 
-              <div class="article">
+              <div class="article1">
                 <h3 class="article__title">How can I help?</h3>
                 <p class="article__summary">
                   We need lots of bikes and bike accessories! If you have an
@@ -103,16 +103,16 @@ <h3 class="article__title">How can I help?</h3>
               </div>
             </div>
           </div>
-        </div>
+        </main>
 
         <div class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
           <div class="article">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
-              alt=""
+              src="images/spring-fundraisers_thumbnail.jpg"
+              alt="thumbimg"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -128,7 +128,7 @@ <h3 class="article__title">
           <div class="article">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
+              src="images/bikes-for-refugees_logo.jpg"
               alt=""
             />
             <div class="article__content">
@@ -141,7 +141,7 @@ <h3 class="article__title">
           <div class="article">
             <img
               class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
+              src="images/edinburgh-damascus_thumbnail.png"
               alt=""
             />
             <div class="article__content">
@@ -154,7 +154,6 @@ <h3 class="article__title">
               </p>
             </div>
           </div>
-
           <a
             href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
             target="_blank"

diff --git a/styles/style.css b/styles/style.css
@@ -23,6 +23,36 @@ button {
   color: var(--grey-dark);
   font-size: 1rem;
 }
+.hero button:nth-child(3){
+  background-color: #c05326;
+  color: white;
+  padding: 5px;
+  border: 1px solid #c05326;
+  font-size: small;
+  border-radius: 5px;
+  margin-left: 2rem;
+  position: absolute;
+  top: 57%;
+}
+.hero button:nth-child(4){
+  background-color: white;
+  color: #c05326;
+  padding: 5px;
+  border: 1px solid white;
+  font-size: small;
+  border-radius: 5px;
+  margin-left: 9.8rem;
+  position: absolute;
+  top: 57%;
+}
+.btn{
+    background-color: #c05326;
+    color: white;
+    padding: 5px;
+    border: 1px solid #c05326;
+    font-size: small;
+    border-radius: 5px;
+}
 
 h1,h2,h3,h4,h5,h6 {
   margin-top: 0;
@@ -67,6 +97,7 @@ p {
 
 .navigation__item {
   padding: 0.5rem 0;
+  padding: 20px;
 }
 
 .navigation__link {
@@ -120,18 +151,29 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
+  height: 315px;
+  background-image: url('/images/header-bike.jpg');
   background-color: var(--grey-light);
+  position: relative;
 }
 
 .hero h1 {
   margin-bottom: 1rem;
   font-size: 2.5rem;
+  color: white;
+  font-weight: bold;
+  margin-left: 2rem;
+  position: absolute;
+  top: 20%;
 }
 
 .hero p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
+  color: white;
+  margin-left: 2rem;
+  position: absolute;
+  top: 40%;
 }
 
 
@@ -145,6 +187,7 @@ p {
   font-size: 1rem;
   font-weight: 600;
   text-transform: uppercase;
+  margin-top: 40px;
 }
 
 .heading-underline:before {
@@ -163,14 +206,21 @@ p {
 
 .article {
   margin-bottom: 1rem;
+  border: 1px solid #d5d7d8;
+  display: flex;
+  gap: 15px;
+}
+.article1{
+  padding: 20px;
 }
-
 .article__title {
   margin-bottom: 0.5rem;
   font-size: 1rem;
   font-weight: 700;
 }
-
+.article__content{
+  padding: 15px;
+}
 .article__title-link {
   text-decoration: none;
   color: var(--orange-dark);
@@ -209,6 +259,7 @@ p {
 
 .facebook-link {
   color: var(--orange-dark);
+  text-align: right;
 }
 
 /* Sidebar */
@@ -218,7 +269,10 @@ p {
   flex-direction: column;
   min-width: 350px;
 }
-
+.bottom-content{
+  display: flex;
+  gap: 15px;
+}
 /* Footer */
 
 .footer {