added section on causes

kithenry · Aug 8, 2024 · c567de6 · c567de6
1 parent 75f911e
commit c567de6
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 5 deletions.
diff --git a/Assets/img01.jpg b/Assets/img01.jpg
diff --git a/Assets/img02.jpg b/Assets/img02.jpg
diff --git a/Assets/img03jpg b/Assets/img03jpg
diff --git a/Assets/signature.png b/Assets/signature.png
diff --git a/index.html b/index.html
@@ -9,6 +9,39 @@
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 	<link rel="stylesheet" type="text/css" href="styles.css" />
+	<style>
+		img {
+			border: 0;
+			vertical-align: middle;
+			max-width: 100%;
+		}
+
+		img.full-width {
+
+			width: 100% !important;
+
+			/* Ensures the image covers the entire area without distortion */
+		}
+
+
+		.custom-row {
+			height: auto;
+			max-height: min-content;
+			display: flex;
+			flex-direction: row;
+			width: 100%;
+		}
+
+		.custom-col {
+			display: flex;
+			flex-direction: column;
+			width: 50%;
+		}
+
+		.space {
+			height: 19px;
+		}
+	</style>
 </head>
 
 <body class="text-sm">
@@ -91,16 +124,69 @@
 
 
 		<div class="main-content">
-			<section class="1">
+			<section id="home">
 				<div class="container-fluid p-0">
 					<div class="row">
-						<div class="col-md- bg" style="background-image: url('Assets/bg01.jpg'); height: 800px; background-position: 70% 10%; background-size: 140% auto; background-repeat: no-repeat;">
-
+						<div class="col-md- bg m-0 p-0"
+							style="background-image: url('Assets/bg01.jpg'); height: 800px; background-position: 70% 10%; background-size: 140% auto; background-repeat: no-repeat;">
+							<div class=" text-white p-5  d-flex flex-column justify-content-center align-items-start"
+								style="margin-top: 100px; margin-left: 70px;">
+								<h1>DONATE</h1>
+								<h2>FOR THE POOR CHILDREN</h2>
+								<p>Every day we bring home to millions of children in the world's
+									<br>
+									hardest places as a sign of God's unconditional love.
+								</p>
+								<button class="btn btn-info" style="background-color: #f26522; border: none;">
+									Donate Now
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>
 			</section>
-			<section class="2">section 2</section>
+			<section id="causes">
+				<div class="container">
+					<div class="custom-row mt-5">
+						<div class="left-main">
+							<div class="left-minor">
+								<img src="Assets/img01.jpg" alt="">
+							</div>
+							<div class="right-minor">
+								<div class="left-upper">
+									<img src="Assets/img02.jpg" alt="">
+								</div>
+								<div class="left-lower">
+									<img src="Assets/img03jpg" alt="">
+								</div>
+							</div>
+						</div>
+						<div class="right-main">
+							<h2>
+								Welcome Home to this site
+							</h2>
+							<p>
+								Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates eos nisi ab debitis,
+								tempore totam recusandae exercitationem eligendi iure, provident aliquid velit
+								aspernatur
+								voluptate ipsam nulla ad. Cumque delectus fuga nihil ad atque vel accusantium dolorum,
+								deserunt voluptatum provident possimus expedita ipsam dolor consequatur suscipit!
+							</p>
+							<div id="signature">
+								<img src="Assets/signature.png" alt="">
+							</div>
+							<div>
+								<button class="btn btn-info">
+									Read More
+								</button>
+								<button class="btn btn-info">
+									Get Quote
+								</button>
+							</div>
+						</div>
+					</div>
+				</container>
+			</section>
 			<section class="3">section 3</section>
 			<section class="4">section 4</section>
 			<section class="5">section 5</section>
@@ -118,4 +204,4 @@
 	</div>
 </body>
 
-</html>
+</html>
diff --git a/styles.css b/styles.css
@@ -1,3 +1,10 @@
+/* css variables */
+/* causes section margin-value */
+:root {
+    --cause-mg: 5px;
+  }
+
+
 .bg-primary {
     background-color: #f26522 !important;
 }
@@ -18,4 +25,78 @@
 
 .header-nav {
     background-color: #f7f8fa;
+}
+
+/* section causes css */
+
+section#causes > * {
+    padding: 0;
+    margin: 0;
+}
+
+.custom-row {
+    display: flex;
+    flex-direction: row;
+    /* border: 1px solid black; */
+    margin: 10px 60px;
+}
+
+
+
+.left-main {
+    /* border: 1px solid red; */
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    margin-right: var(--cause-mg);
+}
+
+.left-minor {
+    /* border: 1px solid green; */
+    width: 50%;
+    margin-right:  var(--cause-mg);
+}
+
+.right-minor {
+    /* border: 1px solid green; */
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-left:  var(--cause-mg);
+}
+
+.left-upper {
+    /* border: 1px solid rgb(254, 227, 120); */
+    height: 50%;
+    width: 100%;
+    margin-bottom:  var(--cause-mg);
+}
+
+.left-lower {
+     /* border: 1px solid rgb(52, 32, 201); */
+     height: 50%;
+     width: 100%;
+     margin-top:  var(--cause-mg);
+}
+
+.right-main {
+    /* border: 1px solid red; */
+    width: 50%;
+    margin-left:  var(--cause-mg);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+#causes img {
+    height: 100%;
+    width: 100%;
+}
+
+#causes #signature {
+    height: 110px;
+    width: 230px;
 }