From 2e12f9561cde3a8efdad75b7ca1059e65d421776 Mon Sep 17 00:00:00 2001
From: hanaa filsan <116567403+Hanaafilsan@users.noreply.github.com>
Date: Thu, 16 Mar 2023 23:16:35 +0300
Subject: [PATCH 1/2] Add files via upload

---
 index.css  | 299 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html | 192 ++++++++++++++++++----------------
 2 files changed, 402 insertions(+), 89 deletions(-)
 create mode 100644 index.css

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..6295a0c
--- /dev/null
+++ b/index.css
@@ -0,0 +1,299 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* Set every element's box-sizing to border-box */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: 'Bangers', cursive;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
+
+.container {
+    width: 880px;
+    margin: auto;
+}
+
+/* Header Styles */
+
+header {
+    width: 100%;
+    display: flex;
+}
+
+header nav {
+    margin-top: 40px; 
+    width: 610px;
+    justify-content: space-between;
+    display: flex;
+}
+
+header nav a {
+    text-decoration: none;
+    color: #b0b0b0;
+}
+
+header nav a:hover {
+    text-decoration: underline;
+    color: black;
+}
+
+header .logo {
+    align-self: flex-end;
+    margin: 28px 0 0 91px;
+}
+
+/* Call To Action (CTA) Styles */
+
+.cta {
+    display: flex;
+    margin-top: 72px;
+    justify-content: flex-end;
+}
+
+.cta .cta-text {
+    font-size: 72px;
+    text-align: center;
+    letter-spacing: 5px;
+    display: flex;
+    justify-content: center;
+    flex-flow: column;
+    align-items: center;
+    margin: 0 82px 0 0;
+}
+
+.cta .cta-text button {
+    border: 1px double black;
+    font-size: 16px;
+    background: white;
+    width: 170px;
+    height: 32px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+
+.cta .cta-text button:hover {
+    background: black;
+    color: white;
+}
+
+/* Main Content Styles */
+
+.main-content {
+   border-top: 2px solid black; 
+   border-bottom: 2px solid black;
+   margin: 75px 0 35px 0;
+   padding: 35px 0;
+   font-size: 16px;
+   line-height: 18px;
+}
+
+.main-content .top-content {
+    display: flex;
+    justify-content: space-around;
+}
+
+.main-content .middle-img {
+    display: block;
+    margin: 30px auto;
+}
+
+.main-content .bottom-content {
+    display: flex;
+    justify-content: space-around;
+}
+
+.main-content .bottom-content p {
+    padding-right: 20px;
+}
+
+/* Contact Styles */
+
+.contact p {
+    margin: 15px 0;
+}
+
+/* Footer Styles */
+
+footer {
+    text-align: center;
+    margin: 40px 0 20px;
+}
+
+/* Tablet */
+@media (max-width: 768px) {
+
+    .container {
+        width: 768px;
+    }
+
+    header {
+        flex-wrap: wrap;
+    }
+
+    header nav {
+        width: 768px;
+        padding: 0 30px;
+    }
+
+    header .logo {
+        order: -1;
+        display: block;
+        margin: 30px auto 0;
+    }
+
+    .cta {
+        justify-content: center;
+    }
+    
+    .cta .cta-text {
+        margin: 0;
+    }
+
+    .cta img {
+        display: none;
+    }
+
+    .main-content .middle-img {
+       width: 100%;
+    }
+
+    .main-content {
+       margin: 75px 20px 35px;
+    }
+
+    .text-content {
+        margin: 0 10px;
+    }
+
+    .contact {
+        margin: 0 30px;
+    }
+}
+
+/* Phone */
+@media (max-width: 400px) {
+
+    .container {
+        width: 400px;
+    }
+
+    header {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    header nav {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        align-items: center;
+        padding: 0;
+    }
+
+    header nav a {
+        width: 100%;
+        display: block;
+        text-align: center;
+        padding: 20px 0;
+        font-size: 20px;
+        border-bottom: 1px solid gray;
+    }
+
+    header nav a:first-child {
+        border-top: 1px solid gray;
+    }
+
+    header nav a:hover {
+        background: gray;
+    }
+
+    header .logo {
+        margin: 20px 0;
+    }
+
+    .cta {
+        margin-top: 50px;
+        flex-flow: column;
+        align-items: center;
+    }
+
+    .cta img {
+        max-width: 80%;
+    }
+
+    .main-content .top-content {
+        justify-content: space-around;
+        flex-direction: column;
+        height: 300px;
+    }
+
+    .main-content .bottom-content {
+        flex-wrap: wrap;
+        align-content: space-between;
+        height: 440px;
+    }
+
+    .text-content {
+        margin: 0;
+    }
+
+    .contact {
+        margin: 20px;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 01a8461..52f606e 100644
--- a/index.html
+++ b/index.html
@@ -1,90 +1,104 @@
-<!doctype html>
-
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <title>Great Idea! DOM</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
-    <link rel="stylesheet" href="css/index.css">
-</head>
-
-<body>
-    <div class="container">
-        <header>
-            <nav>
-                <a href="#"></a>
-                <a href="#"></a>
-                <a href="#"></a>
-                <a href="#"></a>
-                <a href="#"></a>
-                <a href="#"></a>
-            </nav>
-
-            <img id="logo-img" class="logo" src="" alt="Great Idea! Company logo.">
-        </header>
-
-        <section class="cta">
-            <div class="cta-text">
-                <h1></h1>
-                <button></button>
-            </div>
-            <img id="cta-img" src="" alt="Image of a code snippet.">
-        </section>
-
-        <section class="main-content">
-
-            <div class="top-content">
-                <div class="text-content">
-                    <h4></h4>
-                    <p></p>
-                </div>
-                <div class="text-content">
-                    <h4></h4>
-                    <p></p>
-                </div>
-            </div>
-
-            <img class="middle-img" id="middle-img" src="" alt="Image of code snippets across the screen">
-
-            <div class="bottom-content">
-                <div class="text-content">
-                    <h4></h4>
-                    <p></p>
-                </div>
-                <div class="text-content">
-                    <h4></h4>
-                    <p></p>
-                </div>
-                <div class="text-content">
-                    <h4></h4>
-                    <p></p>
-                </div>
-            </div>
-
-        </section>
-
-        <section class="contact">
-
-            <h4></h4>
-
-            <p></p>
-
-            <p></p>
-
-            <p></p>
-
-        </section>
-
-        <footer>
-            <p></p>
-        </footer>
-
-    </div><!-- container ends -->
-    <script src="js/index.js"></script>
-</body>
-
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Great Idea! DOM</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <header>
+            <nav>
+                <a href="#">Services</a>
+                <a href="#">Product</a>
+                <a href="#">Vision</a>
+                <a href="#">Features</a>
+                <a href="#">About</a>
+                <a href="#">Contact</a>
+            </nav>
+
+            <img id="logo-img" class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+        </header>
+
+        <section class="cta">
+            <div class="cta-text">
+                <h1>DOM<br> Is<br> Awesome</h1>
+                <button>Get Started</button>
+            </div>
+            <img id="cta-img" src="img/header-img.png" alt="Image of a code snippet.">
+        </section>
+
+        <section class="main-content">
+
+            <div class="top-content">
+                <div class="text-content">
+                    <h4>Features</h4>
+                    <p>Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio,
+                        in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                        scelerisque quis.</p>
+                </div>
+                <div class="text-content">
+                    <h4>About</h4>
+                    <p>About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in
+                        interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                        scelerisque quis.</p>
+                </div>
+            </div>
+
+            <img class="middle-img" id="middle-img" src="img/mid-page-accent.jpg"
+                alt="Image of code snippets across the screen">
+
+            <div class="bottom-content">
+                <div class="text-content">
+                    <h4>Services</h4>
+                    <p>Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio,
+                        in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                        scelerisque quis.</p>
+                </div>
+                <div class="text-content">
+                    <h4>Product</h4>
+                    <p>Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in
+                        interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                        scelerisque quis.</p>
+                </div>
+                <div class="text-content">
+                    <h4>Vision</h4>
+                    <p>Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in
+                        interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                        scelerisque quis.</p>
+                </div>
+            </div>
+
+        </section>
+
+        <section class="contact">
+
+            <h4>Contact</h4>
+
+            <p>123 Way 456 Street<br>
+                Somewhere, USA</p>
+
+            <p>1 (888) 888-8888</p>
+
+            <p>sales@greatidea.io</p>
+
+        </section>
+
+        <footer>
+            <p>Copyright Great Idea! 2023</p>
+        </footer>
+
+
+    </div><!-- container ends -->
+    <script src="js/index.js"></script>
+</body>
+
 </html>
\ No newline at end of file

From 81af008968938d68ae5d44fe1bc71c3338eadc55 Mon Sep 17 00:00:00 2001
From: hanaa filsan <116567403+Hanaafilsan@users.noreply.github.com>
Date: Thu, 16 Mar 2023 23:17:56 +0300
Subject: [PATCH 2/2] Add files via upload

---
 index.js | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 index.js

diff --git a/index.js b/index.js
new file mode 100644
index 0000000..960f04d
--- /dev/null
+++ b/index.js
@@ -0,0 +1,42 @@
+const siteContent = {
+    "nav": {
+      "nav-item-1": "Services",
+      "nav-item-2": "Product",
+      "nav-item-3": "Vision",
+      "nav-item-4": "Features",
+      "nav-item-5": "About",
+      "nav-item-6": "Contact",
+      "img-src": "img/logo.png"
+    },
+    "cta": {
+      "h1": "DOM Is Awesome",
+      "button": "Get Started",
+      "img-src": "img/header-img.png"
+    },
+    "main-content": {
+      "features-h4":"Features",
+      "features-content": "Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
+      "about-h4":"About",
+      "about-content": "About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
+      "middle-img-src": "img/mid-page-accent.jpg",
+      "services-h4":"Services",
+      "services-content": "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
+      "product-h4":"Product",
+      "product-content": "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
+      "vision-h4":"Vision",
+      "vision-content": "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
+    },
+    "contact": {
+      "contact-h4" : "Contact",
+      "address" : "123 Way 456 Street Somewhere, USA",
+      "phone" : "1 (888) 888-8888",
+      "email" : "sales@greatidea.io",
+    },
+    "footer": {
+      "copyright" : "Copyright Great Idea! 2018"
+    },
+  };
+  
+  // Example: Update the img src for the logo
+  let logo = document.getElementById("logo-img");
+  logo.setAttribute('src', siteContent["nav"]["img-src"])
\ No newline at end of file