SSEKPIUS · SSEKPIUS · Oct 28, 2022 · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -54,6 +54,8 @@ A mighty, modern linter that helps you avoid errors and enforce conventions in y
 - Twitter: [@twitterhandle](https://twitter.com/SSEK_PIUS)
 - LinkedIn: [LinkedIn](https://linkedin.com/in/pius-ssekweyama-23665794)
 
+# Original design idea by Cindy Shin in Behance. (https://www.behance.net/adagio07)
+
 ## 🤝 Contributing
 Contributions, issues, and feature requests are welcome!
 Feel free to check the [issues page](../../issues/).

diff --git a/about.html b/about.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="index.js" defer></script>
+        <link rel="stylesheet"
+            href="font-awesome-4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="index.css">
+        <link rel="stylesheet" href="mobile.css">
+        <title>Capstone project</title>
+    </head>
+
+    <body>
+        <header>
+            <nav>
+                <div class="cover-darker">
+                    <div class="container">
+                        <ul class="top-tag">
+                            <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
+                            <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
+                            <li>Logout</li>
+                            <li>Mypage</li>
+                            <li>Korean</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="cover-white">
+                    <div class="container">
+                        <div class="top-nav">
+                            <a class="logo" href="/#">
+                                <img src="images/logo.png" alt="logo">
+                            </a>
+                            <div class="humberger">
+                                <div></div>
+                                <div></div>
+                                <div></div>
+                            </div>
+                            <ul>
+                                <li >
+                                    <a href="/">Home</a>
+                                </li>
+                                <li class="active">
+                                    <a href="about.html">About</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link" href="#Program">Program</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#Join">Join</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#Sponsor">Sponsor</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link disabled"
+                                        href="#News">News</a>
+                                </li>
+                            </ul>
+                            <div class="humberger-close">
+                                <i class="fa fa-times fa-2x" aria-hidden="true"></i>
+                            </div>
+                            <div class=" tag">
+                                <span>
+                                    CC Campaign
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </header>
+
+        <section>
+            <div class="about-page">
+                <div class="container">
+                    <div>
+                        <img src="/images/title.png" alt="CREATIVE COMMONS
+                            GLOBAL SUMMIT 2015" class="title_image">
+                        <p class="about">Welcome to the International Stuttering
+                            Awareness Day (ISAD) Online Conference,
+                            October 1-31, 2022, celebrating the 25th time the
+                            Online Conference has been held!
+                            An enthusiastic team made up of Anita Blom, Hanan
+                            Hurwitz, McKenzie Jemmett, Pamela Mertz,
+                            Tiffani Kittilstved, Jaime Michise, Elias Apreko,
+                            Shilpa Sagwal and Bruce Imhoff will coordinate
+                            this year’s event, continuing the hard work of Judy
+                            Kuster who ran previous Online Conferences.
+                            The ISAD online conference is a private initiative
+                            by volunteers, and totally independent from any
+                            organisation.This year, the Online Conference will
+                            start October 1 and finish October 31,
+                            acknowledging the many events around the world on
+                            October 22, International Stuttering Awareness Day.
+                            If browsing the conference on a computer or tablet
+                            device, navigate through the conference using the
+                            menu bar at the top. If using a mobile device, use
+                            the ‘Menu’ button at the top.
+                        </p>
+                        <span>
+                            <p class="contactus">Please contact us via email for
+                                any questions about LIVE AWARE summit 2022</p>
+                            <p class="mail"><a href="/">[email protected] ></a></p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <div class="cover-white ">
+                <div class="container">
+                    <div class="logo-page">
+                        <div>
+                            <h2>Creative Commons Global Summit 2015 Logo</h2>
+                            <p class="underline"></p>
+                        </div>
+                        <div>
+                            <p class="about">The logo was chosen from the most trusted source for custom logo contests. 
+                                Work with the best designers today! Collaborated with expert designers on our logo. 
+                                Fast & affordable logo design contests. 1M+ samples completed. 
+                                Expert vetted designers. 500,000+ happy designers. Build our entire brand.
+                            </p>
+                            <img src="images/about_logo.png" alt="logo">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <div class="cover-white ">
+                <div class="container">
+                    <div class="past-summits">
+                        <div>
+                            <h2>View past global summits</h2>
+                            <p class="underline"></p>
+                        </div>
+                        <div>
+                            <p class="about">Take a look at the recent global summits held in Buenos Aires, Argentina and Warsaw, Poland.
+                            </p>
+                            <div class="summits">
+                                <div>
+                                    <img src="images/about_2013.png" alt="photo">
+                                </div>
+                                <div>
+                                    <img src="images/about_2011.png" alt="photo">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <div class="cover-darker m-on">
+                <div class="container">
+                    <div class="partners">
+                        <div>
+                            <h2>partner</h2>
+                            <p class="underline"></p>
+                        </div>
+                        <div>
+                            <img src="images/mozilla.png" alt="mozilla">
+                            <img src="images/google.png" alt="google">
+                            <img src="images/naver.png" alt="naver">
+                            <img src="images/kakao.png" alt="kakao">
+                            <img src="images/bnb.png" alt="airbnb">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            <div class="cover-white cover-toggle">
+                <div class="container">
+                    <div>
+                        <a href="/">
+                            <img src="images/logo_cck_w_208x35.png" alt="logo" class="d-on"> 
+                            <img src="images/cck-logo1.png" alt="logo" class="m-on">
+                        </a>
+                        <div class="color-toggle">
+                            <span><b>2015 Creative Commons Korea. Some Rights Reserved.</b></span>
+                            <p>Lorem ipsum dolor sit amet, consectetur
+                                adipisicing elit.
+                                Eaque sed in perferendis, quod aperiam optio
+                                maiores omnis ipsum,
+                                et pariatur tempore fuga quisquam reprehenderit
+                                veritatis.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </body>
+
+</html>
diff --git a/home.js b/home.js
@@ -0,0 +1,130 @@
+/* eslint-disable no-unused-vars */
+const featuredSpeakers = [
+  {
+    name: 'yochai Benkler',
+    photo: 'images/pf1.jpg',
+    position: 'program Manager Live Alive',
+    description: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      Labore, saepe molestias. Nemo animi, quaerat voluptatem recusandae tenetur a`,
+  },
+  {
+    name: 'kilnam Chon',
+    photo: 'images/pf2.jpg',
+    position: '',
+    description: `Est dolores sit ea labore tempor Eirmod sadipscing sed et est vero vero invidunt. 
+      Vero consetetur ipsum voluptua no Lorem kasd diam ipsum eos nonumy ut diam accusam kasd. Est invidunt`,
+  },
+  {
+    name: 'SohYeong Noh',
+    photo: 'images/pf3.jpg',
+    position: 'Director of Art Center Nabi and a board member of Live Alive',
+    description: `Est dolores sit ea labore tempor Eirmod sadipscing sed et est vero vero invidunt. 
+      Vero consetetur ipsum voluptua no Lorem kasd diam ipsum eos nonumy ut diam accusam kasd. Est invidunt`,
+  },
+  {
+    name: 'Julia Leda',
+    photo: 'images/pf4.jpg',
+    position: 'President of Young Pirates of Europe',
+    description: `Est dolores sit ea labore tempor Eirmod sadipscing sed et est vero vero invidunt. 
+      Vero consetetur ipsum voluptua no Lorem kasd diam ipsum eos nonumy ut diam accusam kasd. Est invidunt`,
+  },
+  {
+    name: 'Lila Tretikov',
+    photo: 'images/pf5.jpg',
+    position: 'Executive Director of the Wikipedia Foundation',
+    description: `Est dolores sit ea labore tempor Eirmod sadipscing sed et est vero vero invidunt. 
+      Vero consetetur ipsum voluptua no Lorem kasd diam ipsum eos nonumy ut diam accusam kasd. Est invidunt`,
+  },
+  {
+    name: 'Ryan Merkley',
+    photo: 'images/pf6.jpg',
+    position: 'CEO of LiveLive, ex COO of thr Moxilla Foundation',
+    description: `Est dolores sit ea labore tempor Eirmod sadipscing sed et est vero vero invidunt. 
+      Vero consetetur ipsum voluptua no Lorem kasd diam ipsum eos nonumy ut diam accusam kasd. Est invidunt`,
+  },
+];
+
+function showBottom() {
+  document.querySelector('.partners').classList.remove('m-hidden');
+  document.querySelector('.bottom').classList.remove('m-hidden');
+}
+
+const container = document.querySelector('.featured-speakers .speakers');
+const isMobile = window.matchMedia('all and (max-width: 768px)').matches;
+function showSpeakers(override = false) {
+  featuredSpeakers.every((speaker, index) => {
+    const draftImg = document.createElement('img');
+    draftImg.src = 'images/draft.jpg';
+    draftImg.alt = 'draft pic';
+
+    const img = document.createElement('img');
+    img.src = speaker.photo;
+    img.alt = 'profile pic';
+
+    const profileDv = document.createElement('div');
+    profileDv.classList.add('profile');
+    profileDv.appendChild(draftImg);
+    profileDv.appendChild(img);
+
+    const h = document.createElement('h3');
+    h.innerText = speaker.name;
+
+    const p1 = document.createElement('p');
+    p1.classList.add('position');
+    p1.innerText = speaker.position;
+
+    const p2 = document.createElement('p');
+    p2.classList.add('spliter');
+
+    const p3 = document.createElement('p');
+    p3.classList.add('description');
+    p3.innerText = speaker.description;
+
+    const biodataDv = document.createElement('div');
+    biodataDv.classList.add('biodata');
+    biodataDv.appendChild(h);
+    biodataDv.appendChild(p1);
+    biodataDv.appendChild(p2);
+    biodataDv.appendChild(p3);
+
+    const speakerDv = document.createElement('div');
+    speakerDv.classList.add('speaker');
+    speakerDv.appendChild(profileDv);
+    speakerDv.appendChild(biodataDv);
+
+    if (isMobile && index > 1 && override === false) {
+      const icon = document.createElement('i');
+      icon.classList.add('fa', 'fa-chevron-down', 'icon');
+      icon.setAttribute('aria-hidden', 'true');
+
+      const input = document.createElement('input');
+      input.classList.add('input-field');
+      input.setAttribute('type', 'text');
+      input.setAttribute('placeholder', 'MORE');
+
+      const inputSpeakers = document.createElement('div');
+      inputSpeakers.classList.add('input-speakers');
+      inputSpeakers.appendChild(icon);
+      inputSpeakers.appendChild(input);
+
+      const speakerBtn = document.createElement('div');
+      speakerBtn.classList.add('speaker-btn');
+      speakerBtn.appendChild(inputSpeakers);
+
+      speakerBtn.addEventListener('click', () => {
+        container.innerHTML = '';
+        showBottom();
+        showSpeakers(true);
+      });
+
+      container.appendChild(speakerBtn);
+      return false;
+    }
+    container.appendChild(speakerDv);
+    return true;
+  });
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+  showSpeakers();
+});
diff --git a/images/about_2011.png b/images/about_2011.png
diff --git a/images/about_2013.png b/images/about_2013.png
diff --git a/images/about_bg_01.png b/images/about_bg_01.png
diff --git a/images/about_logo.png b/images/about_logo.png
diff --git a/images/about_title.png b/images/about_title.png
diff --git a/images/bnb.png b/images/bnb.png
diff --git a/images/cck-logo1.png b/images/cck-logo1.png
diff --git a/images/draft.jpg b/images/draft.jpg
diff --git a/images/google.png b/images/google.png
diff --git a/images/kakao.png b/images/kakao.png
diff --git a/images/landing.png b/images/landing.png
diff --git a/images/logo.jpeg b/images/logo.jpeg
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logo_cck_w_208x35.png b/images/logo_cck_w_208x35.png
diff --git a/images/mobile_intro_bg.png b/images/mobile_intro_bg.png
diff --git a/images/mozilla.png b/images/mozilla.png
diff --git a/images/naver.png b/images/naver.png
diff --git a/images/pattern_bg.png b/images/pattern_bg.png
diff --git a/images/pf1.jpg b/images/pf1.jpg
diff --git a/images/pf2.jpg b/images/pf2.jpg
diff --git a/images/pf3.jpg b/images/pf3.jpg
diff --git a/images/pf4.jpg b/images/pf4.jpg
diff --git a/images/pf5.jpg b/images/pf5.jpg
diff --git a/images/pf6.jpg b/images/pf6.jpg
diff --git a/images/program_icon_01.png b/images/program_icon_01.png
diff --git a/images/program_icon_02.png b/images/program_icon_02.png
diff --git a/images/program_icon_03.png b/images/program_icon_03.png
diff --git a/images/program_icon_04.png b/images/program_icon_04.png
diff --git a/images/program_icon_05.png b/images/program_icon_05.png
diff --git a/images/summit1.jpg b/images/summit1.jpg
diff --git a/images/summit2.jpeg b/images/summit2.jpeg
diff --git a/images/title.png b/images/title.png