Capstone project

diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..545d7ed Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 005c6c6..0dbcd26 100644 --- 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 new file mode 100644 index 0000000..3b46d48 --- /dev/null +++ b/about.html @@ -0,0 +1,202 @@ + + + + + + + + + + + + Capstone project + + + +

Logout
Mypage
Korean

+ +

+ + CC Campaign + +

+ +

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. +

+ +

Please contact us via email for + any questions about LIVE AWARE summit 2022

liveaware2022@cckorea.org >

+ +

Creative Commons Global Summit 2015 Logo

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. +

+ +

View past global summits

Take a look at the recent global summits held in Buenos Aires, Argentina and Warsaw, Poland. +

+ +

partner

+ + + + + \ No newline at end of file diff --git a/home.js b/home.js new file mode 100644 index 0000000..d640ff1 --- /dev/null +++ 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 new file mode 100644 index 0000000..cf602f3 Binary files /dev/null and b/images/about_2011.png differ diff --git a/images/about_2013.png b/images/about_2013.png new file mode 100644 index 0000000..49217bd Binary files /dev/null and b/images/about_2013.png differ diff --git a/images/about_bg_01.png b/images/about_bg_01.png new file mode 100644 index 0000000..0950679 Binary files /dev/null and b/images/about_bg_01.png differ diff --git a/images/about_logo.png b/images/about_logo.png new file mode 100644 index 0000000..2df58ae Binary files /dev/null and b/images/about_logo.png differ diff --git a/images/about_title.png b/images/about_title.png new file mode 100644 index 0000000..97ea8d4 Binary files /dev/null and b/images/about_title.png differ diff --git a/images/bnb.png b/images/bnb.png new file mode 100644 index 0000000..c340a60 Binary files /dev/null and b/images/bnb.png differ diff --git a/images/cck-logo1.png b/images/cck-logo1.png new file mode 100644 index 0000000..1c31a62 Binary files /dev/null and b/images/cck-logo1.png differ diff --git a/images/draft.jpg b/images/draft.jpg new file mode 100644 index 0000000..34e45b5 Binary files /dev/null and b/images/draft.jpg differ diff --git a/images/google.png b/images/google.png new file mode 100644 index 0000000..14de11d Binary files /dev/null and b/images/google.png differ diff --git a/images/kakao.png b/images/kakao.png new file mode 100644 index 0000000..7acdf2b Binary files /dev/null and b/images/kakao.png differ diff --git a/images/landing.png b/images/landing.png new file mode 100644 index 0000000..225cf52 Binary files /dev/null and b/images/landing.png differ diff --git a/images/logo.jpeg b/images/logo.jpeg new file mode 100644 index 0000000..31743ab Binary files /dev/null and b/images/logo.jpeg differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..9357bda Binary files /dev/null and b/images/logo.png differ diff --git a/images/logo_cck_w_208x35.png b/images/logo_cck_w_208x35.png new file mode 100644 index 0000000..0135613 Binary files /dev/null and b/images/logo_cck_w_208x35.png differ diff --git a/images/mobile_intro_bg.png b/images/mobile_intro_bg.png new file mode 100644 index 0000000..727a854 Binary files /dev/null and b/images/mobile_intro_bg.png differ diff --git a/images/mozilla.png b/images/mozilla.png new file mode 100644 index 0000000..5d8b831 Binary files /dev/null and b/images/mozilla.png differ diff --git a/images/naver.png b/images/naver.png new file mode 100644 index 0000000..6868144 Binary files /dev/null and b/images/naver.png differ diff --git a/images/pattern_bg.png b/images/pattern_bg.png new file mode 100644 index 0000000..a245e03 Binary files /dev/null and b/images/pattern_bg.png differ diff --git a/images/pf1.jpg b/images/pf1.jpg new file mode 100644 index 0000000..68051bb Binary files /dev/null and b/images/pf1.jpg differ diff --git a/images/pf2.jpg b/images/pf2.jpg new file mode 100644 index 0000000..d5ac6ef Binary files /dev/null and b/images/pf2.jpg differ diff --git a/images/pf3.jpg b/images/pf3.jpg new file mode 100644 index 0000000..ec28fb0 Binary files /dev/null and b/images/pf3.jpg differ diff --git a/images/pf4.jpg b/images/pf4.jpg new file mode 100644 index 0000000..25f7712 Binary files /dev/null and b/images/pf4.jpg differ diff --git a/images/pf5.jpg b/images/pf5.jpg new file mode 100644 index 0000000..76e7544 Binary files /dev/null and b/images/pf5.jpg differ diff --git a/images/pf6.jpg b/images/pf6.jpg new file mode 100644 index 0000000..d2395a1 Binary files /dev/null and b/images/pf6.jpg differ diff --git a/images/program_icon_01.png b/images/program_icon_01.png new file mode 100644 index 0000000..0eec2f6 Binary files /dev/null and b/images/program_icon_01.png differ diff --git a/images/program_icon_02.png b/images/program_icon_02.png new file mode 100644 index 0000000..09999dd Binary files /dev/null and b/images/program_icon_02.png differ diff --git a/images/program_icon_03.png b/images/program_icon_03.png new file mode 100644 index 0000000..5427112 Binary files /dev/null and b/images/program_icon_03.png differ diff --git a/images/program_icon_04.png b/images/program_icon_04.png new file mode 100644 index 0000000..7116c5f Binary files /dev/null and b/images/program_icon_04.png differ diff --git a/images/program_icon_05.png b/images/program_icon_05.png new file mode 100644 index 0000000..1329627 Binary files /dev/null and b/images/program_icon_05.png differ diff --git a/images/summit1.jpg b/images/summit1.jpg new file mode 100644 index 0000000..5d7181b Binary files /dev/null and b/images/summit1.jpg differ diff --git a/images/summit2.jpeg b/images/summit2.jpeg new file mode 100644 index 0000000..663e74e Binary files /dev/null and b/images/summit2.jpeg differ diff --git a/images/title.png b/images/title.png new file mode 100644 index 0000000..b847e6e Binary files /dev/null and b/images/title.png differ diff --git a/index.css b/index.css index 8cf4072..34303d0 100644 --- a/index.css +++ b/index.css @@ -1,8 +1,10 @@ -@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inter:wght@400;500&family=Poppins&family=Lato&family=Roboto:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inter:wght@400;500&family=Poppins&family=cocogoose&family=Lato&family=Roboto:wght@700&display=swap'); /* stylelint-disable no-descending-specificity */ html { box-sizing: border-box; scroll-behavior: smooth; + margin: 0; + padding: 0; } *, @@ -10,3 +12,681 @@ html { *::after { box-sizing: inherit; } + +body { + font-family: 'lato' !important; /* stylelint-disable-line */ + background: #fff; + margin: 0; + padding: 0; + overflow-x: hidden !important; + color: #333; +} + +.d-on { + display: block; +} + +.m-on { + display: none; +} + +.cover-toggle { + background-color: #272a32 !important; +} + +.color-toggle { + color: #fff !important; +} + +.d-none { + display: none !important; +} + +.d-flex { + display: flex !important; +} + +.VH100 { + height: 100vh; +} + +header nav { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + width: 100%; + top: 0; +} + +footer, +nav { + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +.cover-darker { + background-color: #272a32; + width: 100%; + height: auto; + margin: 0; + padding: 0; +} + +.pattern { + background-image: url('images/pattern_bg.png'); +} + +.cover-white { + background-color: #fff; + width: 100%; + height: auto; + margin: 0; + padding: 0; +} + +.container { + max-width: 1100px; + width: 98%; + margin: 0 auto; +} + +.top-tag { + display: flex; + flex-direction: row; + justify-content: end; + gap: 1em; + color: white; +} + +.top-nav { + display: flex; + flex-direction: row; + align-items: center; +} + +.top-nav .logo { + flex-basis: 100%; +} + +.top-nav .logo img { + width: auto; + height: 63px; +} + +.top-nav .humberger { + display: none; +} + +.top-nav .humberger div { + width: 35px; + height: 5px; + background-color: black; + margin: 6px 0; +} + +.top-nav .home-mobile { + display: none; +} + +.top-nav .active a { + color: rgb(198, 27, 27) !important; +} + +.top-nav ul { + display: flex; + flex-direction: row; + gap: 2em; + font-size: large; + font-weight: 700; + flex-wrap: nowrap; +} + +.top-nav ul a { + color: rgb(78, 72, 72); + font-size: 0.938em; +} + +.top-nav ul a:focus { + color: rgb(199, 47, 47); +} + +.top-nav .humberger-close { + display: none; +} + +.top-nav .tag { + border: 5px red solid; + height: 3em; + width: auto; + display: flex; + justify-content: center; + align-items: center; + font-weight: bolder; + color: red; + margin-left: 1em; +} + +.top-nav .tag span { + white-space: nowrap; + margin: 0 2em; +} + +/* xxxxxxxxxxxxxxx About page */ + +.about-page { + background: #f7f7f8 url('images/about_bg_01.png') center no-repeat; +} + +.about-page .container > div { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + gap: 5em; + padding: 12em 0; +} + +.about-page .container > div h1 { + margin: 0; + padding: 0; + text-transform: uppercase; + font-weight: 900; + font-size: 38pt; + letter-spacing: 2px; + width: 70%; + font-family: system-ui; + background: -webkit-linear-gradient(rgb(197, 110, 110), rgb(92, 29, 29)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about-page .container > div .greeting { + color: rgb(218 56 56); + font-size: 1.4em; + font-weight: 100; + margin: 3em 0 0 0; + padding: 0; + visibility: hidden; +} + +.about-page .container > div .about { + margin: auto; + padding: 38px 38px; + line-height: 25px; + border: 1px solid #dfdfdf; + width: 960px; + height: 272px; + background-color: #fff; + font-size: 0.875em; + text-align: center; +} + +.about-page .container > div .contactus { + color: rgb(78, 72, 72); + font-size: 1.2em; + margin: 0; + padding: 0; +} + +.about-page .container > div .mail { + text-align: center; +} + +.about-page .container > div .mail a { + color: #000; + font-size: 1.2em; + margin: 0; + padding: 0; + text-decoration: underline; +} + +/* xxxxxxxxxxx logopage */ + +.logo-page { + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + border-bottom: 1px solid rgba(128, 128, 128, 0.271); +} + +.logo-page h2 { + color: rgb(78, 72, 72); +} + +.logo-page .about { + color: rgb(78, 72, 72); + font-size: 1.2em; + margin: 0; + padding: 1.5em 1em; + width: 80%; + text-align: center; +} + +.logo-page img { + margin-left: auto; + margin-right: auto; + margin-bottom: 2em; + padding: 0 7em; +} + +/* xxxxxxxxxxxxxx past summits */ + +.past-summits { + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} + +.past-summits h2 { + color: rgb(78, 72, 72); +} + +.past-summits .about { + color: rgb(78, 72, 72); + font-size: 1.2em; + margin: 0; + padding: 1.5em 1em; + width: 80%; + text-align: center; +} + +.past-summits .summits { + display: flex; + gap: 1em; + justify-content: center; + align-items: center; + width: 100%; +} + +.past-summits .summits > div { + position: relative; + flex-basis: 40%; +} + +.past-summits .summits > div .text { + position: absolute; + color: aliceblue; + top: 30%; + left: 15%; +} + +.past-summits .summits > div .text h3 { + font-size: 3em; + margin: 0; + padding: 0; +} + +.past-summits .summits > div .text p { + font-size: 1.3em; +} + +.past-summits .summits > div img { + outline-offset: -11em; + overflow: hidden; + height: 22em; + width: 33em; +} + +/* xxxxxxxxxxxxxxx landing page */ + +.landing-page { + background-image: url('images/landing.png'); + background-repeat: no-repeat; + background-size: cover; +} + +.landing-page .container > div { + display: flex; + flex-flow: column; + justify-content: center; + align-items: start; + padding-top: 140px; + padding-bottom: 140px; + gap: 0.5em; +} + +.landing-page .container > div img { + width: 70%; +} + +.landing-page .container > div .about { + text-align: justify; + width: 631px; + border: 4px solid #fff; + background-color: #f7f7f8; + margin: 15px 0 40px; + line-height: 180%; + padding: 10px 25px 0; + font-size: 1.125em; +} + +.landing-page .container > div .date { + font: 700 36px Verdana; /* stylelint-disable-line */ + color: #575757; + letter-spacing: -2px; + margin: 0; + padding: 0; +} + +.landing-page .container > div .location { + font-size: 1.5em; + font-family: 'Nanum Gothic';/* stylelint-disable-line */ + color: #333; + margin: 0; + padding: 0; +} + +/* xxxxxxxxxxxxxxx program */ + +.main-program { + display: flex; + flex-direction: column; + width: 100%; +} + +.main-program h2 { + color: #fff; +} + +.main-program .program-list { + display: flex; + flex-wrap: nowrap; + gap: 2px; + justify-content: center; + align-items: center; + width: 100%; + padding: 47px 0; +} + +.main-program .program-list .program { + margin: 0 0 0 3px; + padding: 0; + border: 0; + float: left; + width: calc(20% - 3px); + height: 250px; + background: rgba(255, 255, 255, 0.1); +} + +.main-program .program-list .program:hover { + border: 1px wheat solid; +} + +.main-program .program-list .program .icon { + margin-top: 21px; + position: relative; + text-align: center; + color: rgb(255, 255, 255); +} + +.main-program .program-list .program .title { + color: rgb(239, 81, 60); + font-size: 1.5em; + font-weight: 700; + text-align: center; + margin-top: 17px; +} + +.main-program .program-list .program .text { + text-align: center; + word-break: keep-all; + color: rgb(255, 255, 255); + font-size: 0.913em; + padding: 0 17px; + line-height: 1.5em; + margin-top: 22px; + margin-bottom: 10px; +} + +.main-program .link-all a { + color: #fff; + text-decoration: underline; + text-transform: uppercase; + font-size: 1.2em; + margin: 3em 0; +} + +.main-program .input-btn { + display: none; +} + +.main-program .input-field { + width: 100%; + padding: 40px; + text-align: center; + font-size: 1.1em; + font-weight: 900; + background-color: rgb(220, 72, 72); + border: none; + color: #fff; + white-space: nowrap; +} + +/* xxxxxxxxxxxxxxx speakers */ +.featured-speakers h2 { + color: rgb(78, 72, 72); +} + +.featured-speakers .speakers { + display: flex; + justify-content: end; + align-items: start; + gap: 4em; + margin: 3em 0; +} + +.featured-speakers .speakers > div { + flex-basis: 45%; +} + +.featured-speakers .speakers .speaker { + display: flex; + flex-direction: row; + gap: 0.5em; +} + +.featured-speakers .speakers .speaker > div:first-child { + flex-basis: 40%; +} + +.featured-speakers .speakers .speaker > div:nth-child(2) { + flex-basis: 60%; + padding-left: 10px; +} + +.featured-speakers .speakers .profile { + position: relative; +} + +.featured-speakers .speakers .profile img:first-child { + width: 7em; + height: 7em; + position: absolute; + top: -30px; + left: -30px; + filter: blur(2px); +} + +.featured-speakers .speakers .profile img:nth-child(2) { + width: 14em; + height: 14em; + position: relative; +} + +.featured-speakers .speaker .bio { + display: flex; + flex-direction: column; + padding: 0.5em; +} + +.featured-speakers .speaker .biodata h3 { + color: inherit; + text-transform: capitalize; + font-size: 22px; + text-align: left; + margin: 0; +} + +.featured-speakers .speaker .biodata .position { + padding: 0; + margin: 0%; + font-size: 15px; + color: #ff4f38; + text-align: left; +} + +.featured-speakers .speaker .biodata .spliter { + width: 2em; + border: 1px gray solid; +} + +.featured-speakers .speaker .biodata .description { + color: rgb(78, 72, 72); + padding: 0; + margin: 0%; + word-break: keep-all; + text-align: left; + font-size: 1em; + padding-right: 1em; + line-height: 24px; +} + +.featured-speakers .speaker-btn { + display: none; +} + +.featured-speakers .input-speakers { + width: 100%; + margin-bottom: 10px; +} + +.featured-speakers .icon { + position: absolute; + padding: 10px; + color: red; + min-width: 50px; + text-align: center; + right: 7em; +} + +.featured-speakers .input-field { + width: 100%; + padding: 10px; + text-align: center; +} + +/* xxxxxxxxxxxxxxx partners */ + +.partners { + display: flex; + flex-direction: column; + width: 100%; +} + +.partners > div, +.featured-speakers > div, +.main-program > div, +.past-summits > div, +.logo-page > div { + display: flex; + flex-wrap: wrap; + gap: 2px; + justify-content: center; + align-items: center; + width: 100%; + padding: 47px 0; +} + +.partners > div:first-child, +.featured-speakers > div:first-child, +.main-program > div:first-child, +.past-summits > div:first-child, +.logo-page > div:first-child { + flex-direction: column; +} + +.partners h2 { + color: #b2b0b0; +} + +.partners h2, +.featured-speakers h2, +.main-program h2, +.past-summits h2, +.logo-page h2 { + text-transform: capitalize; + font-size: 30px; + font-weight: 400; + margin: 0; + padding: 0; +} + +.partners p.underline, +.featured-speakers p.underline, +.main-program p.underline, +.past-summits p.underline, +.logo-page p.underline { + border-bottom: 1px solid red; + width: 4%; + margin: 0; + padding: 10px 0 0 0; +} + +.partners img { + width: 14.33%; + height: 96px; + margin: 0 20px; +} + +/* xxxxxxxxxxxxxxx footer */ + +footer .container > div { + width: 100%; + display: flex; + color: rgb(62, 60, 60); + padding: 1em 0; +} + +footer .container > div > a { + flex-basis: 40%; + display: flex; + color: black; + align-items: center; + justify-content: start; +} + +footer .content span, +footer .content p { + margin-left: 0.5em; + font-size: 0.85em; + text-transform: capitalize; +} + +footer .content span { + font-size: 0.95em; + color: #000; +} + +footer .container > div a img { + height: 3em; + width: auto; +} + +footer .container > div > div { + flex-basis: 60%; + display: flex; + flex-direction: column; +} diff --git a/index.html b/index.html index 1b8eb07..a43fb56 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,264 @@ - - - - - - - - - - Capstone project - - - - + + + + + + + + + + + Capstone project + + + +

Logout
Mypage
Korean

+ +

+ + CC Campaign + +

+ +

welcome sharing world!
+ creative commons global summit 2015

A joyful celebration believing in the + value of openness and sharing, + creating a positive change with poeple from all over + 100 countries is taking place in October + ,in korea. +

2022.10.17(THUR) ~ 30(FRI)

@ National Museum of Korea, Art + Center Nabi and more

+ +

main program

+ conference +

+ + Listen to lectures from speakers from + around the world and learn about the + latest trends in the world. + +

+ CC exhibition +

+ + Let's meet the creations of artists + from + various fields who share the open + spirit + of CC. + +

+ forum +

+ + We have time to share our thoughts + and + opinions with experts by topic. + +

+ workshop +

+ + You can create your own creations + using + open source instead of just looking + at + them. + +

+ CC party +

+ + Create opportunities to freely + network + with CC personnel from around the + world. + +

+ + see the whole proram + +

+ +

featured speakers

+ +

partner

+ + + + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..a6cfd6c 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,17 @@ +/* eslint-disable no-unused-vars */ + +function toggleMobileMenu() { + document.querySelector('.humberger').classList.toggle('d-none'); + document.querySelector('.humberger-close').classList.toggle('d-flex'); + document.querySelector('.top-nav ul').classList.toggle('d-flex'); + document.querySelector('.top-nav').classList.toggle('VH100'); +} + +window.addEventListener('DOMContentLoaded', (event) => { + document.querySelector('.humberger').addEventListener('click', (e) => { + toggleMobileMenu(); + }); + document.querySelector('.humberger-close').addEventListener('click', (e) => { + toggleMobileMenu(); + }); +}); diff --git a/mobile.css b/mobile.css new file mode 100644 index 0000000..53609f6 --- /dev/null +++ b/mobile.css @@ -0,0 +1,356 @@ +/* stylelint-disable no-descending-specificity */ +@media all and (max-width: 768px) { + .d-on { + display: none; + } + + .m-on { + display: block; + } + + .cover-toggle { + background-color: #fff !important; + } + + .color-toggle { + color: #000 !important; + } + + .container { + margin: 0 1em; + width: auto; + } + + .top-tag { + display: none; + } + + .top-nav { + flex-direction: column; + align-items: start; + margin: 0 0; + flex-basis: 100%; + width: 100%; + order: 2; + } + + .top-nav .logo { + display: none; + } + + .m-hidden { + display: none !important; + } + + .top-nav .humberger { + display: block; + } + + .top-nav ul { + flex-direction: column; + padding: 0; + width: 100%; + display: none; + } + + .top-nav .home-mobile { + display: flex; + } + + .top-nav ul li { + border-bottom: 1px solid gray; + } + + .top-nav ul li a { + font-size: xxx-large; + } + + .top-nav .humberger-close { + margin-top: 1em; + align-self: end; + order: -1; + } + + .top-nav .tag { + display: none; + } + + /* xxxxxxxxxxxxxxx About page */ + + .about-page .container > div { + height: auto; + gap: 1em; + padding: 2em 0; + } + + .about-page .container img { + width: 98%; + } + + .about-page .container > div h1 { + font-size: 28pt; + width: 100%; + text-align: center; + } + + .about-page .container > div .greeting { + visibility: visible; + } + + .about-page .container > div .about { + width: 100%; + padding: 18px 18px; + line-height: 25px; + height: auto; + font-size: 0.875em; + text-align: center; + } + + .about-page .container > div .contactus { + font-size: 1em; + text-align: center; + } + + .about-page .container > div .mail a { + font-size: 0.98em; + margin-bottom: 3em; + } + + /* xxxxxxxxxxxx logo page */ + + .logo-page h2 { + margin: 0.5em 0; + margin: 0; + padding: 0; + text-align: center; + font-size: 1.5em; + } + + .logo-page .about { + font-size: 1.1em; + padding: 1em 0; + width: 100%; + } + + .logo-page img { + margin-bottom: 2em; + width: 98%; + padding: 0; + } + + /* xxxxxxxxxxxxxx past summits */ + + .past-summits h2 { + margin: 0.5em 0; + margin: 0; + padding: 0; + text-align: center; + font-size: 1.5em; + } + + .past-summits .about { + font-size: 1.1em; + padding: 1em 0; + width: 100%; + } + + .past-summits .summits { + flex-direction: column; + width: 100%; + } + + .past-summits .summits > div { + flex-basis: 100%; + } + + .past-summits .summits > div .text { + top: 15%; + left: 0; + text-align: center; + } + + .past-summits .summits > div .text h3 { + font-size: 3em; + } + + .past-summits .summits > div .text p { + font-size: 1.3em; + } + + .past-summits .summits > div img { + outline-offset: -8em; + height: 13em; + width: 18em; + } + + /* xxxxxxxxxxxxxxx landing page */ + + .landing-page { + background: url('images/mobile_intro_bg.png') no-repeat top; + height: auto; + } + + .landing-page .container > div { + gap: 1em; + padding-top: 25px; + padding-bottom: 25px; + } + + .landing-page .container > div img { + width: 100%; + } + + .landing-page .container > div .about { + margin: 17px 0; + width: 100%; + padding: 1em 0.5em; + line-height: 150%; + font-size: 13px; + height: auto; + text-align: justify; + word-break: break-all; + } + + .landing-page .container > div .date { + font-size: 1.25em; + } + + .landing-page .container > div .location { + font-size: 1em; + } + + /* xxxxxxxxxx main program */ + + .main-program .program-list { + flex-direction: column; + padding-bottom: 0; + } + + .main-program .program-list .program { + width: 100%; + height: auto; + margin: 0 0 5px 3px; + display: table; + } + + .main-program .program-list .program .icon { + float: left; + } + + .main-program .program-list .program .title { + float: left; + width: 26%; + font-size: 14px; + line-height: 52px; + vertical-align: middle; + } + + .main-program .program-list .program .text { + float: left; + width: calc(74% - 6.5em); + font-size: 0.75em; + text-align: left; + word-break: keep-all; + } + + .main-program .link-all a { + display: none; + } + + .main-program .input-btn { + display: flex; + } + + /* xxxxxxxxxxxxxxx speakers */ + + .featured-speakers .speakers { + margin: 2em 0; + } + + .featured-speakers .speakers > div { + flex-basis: 100%; + } + + .featured-speakers .speakers .speaker > div:first-child { + flex-basis: 32%; + } + + .featured-speakers .speakers .speaker > div:nth-child(2) { + flex-basis: 78%; + } + + .featured-speakers .speakers .profile img:first-child { + width: 3em; + height: 3em; + top: -8px; + left: -8px; + } + + .featured-speakers .speakers .profile img:nth-child(2) { + width: 6em; + height: 6em; + } + + .featured-speakers .speaker .biodata h3 { + font-size: 1.2em; + } + + .featured-speakers .speaker .biodata .position { + font-size: 1em; + } + + .featured-speakers .speaker .biodata .description { + font-size: 1em; + } + + .featured-speakers .speaker-btn { + display: block; + } + + /* xxxxxxxxxxxxxxx partners */ + + .partners > div, + .featured-speakers > div, + .main-program > div, + .past-summits > div, + .logo-page > div { + padding: 20px 0; + padding-top: 1em; + } + + .partners h2, + .featured-speakers h2, + .main-program h2, + .logo-page h2 { + font-size: 1.5em; + } + + .partners p.underline, + .featured-speakers p.underline, + .main-program p.underline, + .logo-page p.underline { + width: 15%; + } + + .partners img { + width: 21.33%; + height: 37px; + margin: 0 18px; + } + + /* xxxxxxxxxxxxxxxxxx footer */ + + footer .container > div a img { + height: auto; + width: 8em; + } + + footer .container > div > div > p { + display: none; + } + + footer .container > div > div span { + font-size: 0.8em; + padding-left: 1em; + } +}