diff --git a/.DS_Store b/.DS_Store index c1b8ea4..545d7ed 100644 Binary files a/.DS_Store and b/.DS_Store differ 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 + + + +
+ +
+ +
+
+
+
+ CREATIVE COMMONS + GLOBAL SUMMIT 2015 +

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

+ logo +
+
+
+
+
+ +
+
+
+
+
+

View past global summits

+

+
+
+

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

+
+
+ photo +
+
+ photo +
+
+
+
+
+
+
+ +
+
+
+
+
+

partner

+

+
+
+ mozilla + google + naver + kakao + airbnb +
+
+
+
+
+ + + + + \ 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/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/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.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/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 abba0db..34303d0 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,4 @@ -@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; @@ -16,10 +16,26 @@ html { body { font-family: 'lato' !important; /* stylelint-disable-line */ background: #fff; - color: #000; 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 { @@ -34,16 +50,21 @@ body { height: 100vh; } -header { +header nav { display: flex; flex-direction: column; margin: 0; padding: 0; - position: fixed; width: 100%; top: 0; } +footer, +nav { + margin: 0; + padding: 0; +} + ul { list-style: none; } @@ -53,13 +74,17 @@ a { } .cover-darker { - background-color: rgba(0, 0, 0, 0.761); + 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%; @@ -69,8 +94,9 @@ a { } .container { - margin: 0 5em; - width: auto; + max-width: 1100px; + width: 98%; + margin: 0 auto; } .top-tag { @@ -92,8 +118,8 @@ a { } .top-nav .logo img { - width: 7em; - height: 7em; + width: auto; + height: 63px; } .top-nav .humberger { @@ -107,26 +133,29 @@ a { margin: 6px 0; } -.top-nav nav { - display: flex; - margin: 0 5em; +.top-nav .home-mobile { + display: none; +} + +.top-nav .active a { + color: rgb(198, 27, 27) !important; } -.top-nav nav ul { +.top-nav ul { display: flex; flex-direction: row; gap: 2em; font-size: large; - font-weight: 900; + font-weight: 700; flex-wrap: nowrap; } -.top-nav nav ul a { +.top-nav ul a { color: rgb(78, 72, 72); - font-size: 1.4em; + font-size: 0.938em; } -.top-nav nav ul a:focus { +.top-nav ul a:focus { color: rgb(199, 47, 47); } @@ -142,8 +171,8 @@ a { justify-content: center; align-items: center; font-weight: bolder; - text-transform: uppercase; color: red; + margin-left: 1em; } .top-nav .tag span { @@ -151,31 +180,469 @@ a { margin: 0 2em; } -/* xxxxxxxxxxxxxxx */ +/* xxxxxxxxxxxxxxx About page */ -.partners { +.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%; } -.partners > div { +.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: 20px 0; + 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: #fff; + color: #b2b0b0; +} + +.partners h2, +.featured-speakers h2, +.main-program h2, +.past-summits h2, +.logo-page h2 { text-transform: capitalize; - font-size: 2.5em; - padding-bottom: 0.4em; + 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 { @@ -184,7 +651,7 @@ a { margin: 0 20px; } -/* xxxxxxxxxxxxxxx */ +/* xxxxxxxxxxxxxxx footer */ footer .container > div { width: 100%; @@ -201,17 +668,21 @@ footer .container > div > a { justify-content: start; } -footer .container > div > a span { +footer .content span, +footer .content p { margin-left: 0.5em; - font-size: 2em; - font-weight: 900; + font-size: 0.85em; text-transform: capitalize; } +footer .content span { + font-size: 0.95em; + color: #000; +} + footer .container > div a img { - height: 5em; - width: 5em; - border-radius: 50%; + height: 3em; + width: auto; } footer .container > div > div { diff --git a/index.html b/index.html index b49dd69..a43fb56 100644 --- a/index.html +++ b/index.html @@ -1,112 +1,264 @@ - - - - - - - - - Capstone project - + + + + + + + + + + Capstone project + - -
-
-
-
    -
    • -
    • -
  • Logout
    • -
  • Mypage
    • -
  • Korean
    • -
-
-
-
-
-
- -
-
-
-
-
- +
+ +
+
+
+
+ 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

+

+
+
+
+
+ program +
+
+ conference +
+
+ + Listen to lectures from speakers from + around the world and learn about the + latest trends in the world. + +
+
+
+
+ program +
+
+ CC exhibition +
+
+ + Let's meet the creations of artists + from + various fields who share the open + spirit + of CC. + +
+
+
+
+ program +
+
+ forum +
+
+ + We have time to share our thoughts + and + opinions with experts by topic. + +
+
+
+
+ program +
+
+ workshop +
+
+ + You can create your own creations + using + open source instead of just looking + at + them. + +
+
+
+
+ program +
+
+ CC party +
+
+ + Create opportunities to freely + network + with CC personnel from around the + world. + +
+
+
+
+ + see the whole proram + +
+
+ +
+
+
+
+
-
-
-
-
-
-

partner

+
+
+
+
+
+

featured speakers

+

+
+
+
-
- mozilla - google - naver - kakao - airbnb +
+
+
+ +
+
+
+
+
+

partner

+

+
+
+ mozilla + google + naver + kakao + airbnb +
-
-
- - + + \ No newline at end of file diff --git a/index.js b/index.js index 21620c9..a6cfd6c 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,17 @@ /* eslint-disable no-unused-vars */ + function toggleMobileMenu() { document.querySelector('.humberger').classList.toggle('d-none'); - document.querySelector('.top-nav nav').classList.toggle('d-flex'); document.querySelector('.humberger-close').classList.toggle('d-flex'); + document.querySelector('.top-nav ul').classList.toggle('d-flex'); document.querySelector('.top-nav').classList.toggle('VH100'); -} \ No newline at end of file +} + +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 index 4bf46eb..53609f6 100644 --- a/mobile.css +++ b/mobile.css @@ -1,4 +1,21 @@ +/* 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; @@ -11,73 +28,321 @@ .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 nav { - margin: 0 0; - flex-basis: 100%; + .top-nav ul { + flex-direction: column; + padding: 0; width: 100%; - order: 2; display: none; } - .top-nav nav ul { - flex-direction: column; - padding: 0; - width: 100%; + .top-nav .home-mobile { + display: flex; } - .top-nav nav ul li { + .top-nav ul li { border-bottom: 1px solid gray; } - .top-nav nav ul li a { + .top-nav ul li a { font-size: xxx-large; } .top-nav .humberger-close { - /* display: block; */ margin-top: 1em; align-self: end; + order: -1; } .top-nav .tag { display: none; } - /* xxxxxxxxxxxxxxx */ + /* 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 { + .partners > div, + .featured-speakers > div, + .main-program > div, + .past-summits > div, + .logo-page > div { padding: 20px 0; + padding-top: 1em; } - .partners h2 { + .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 */ + /* xxxxxxxxxxxxxxxxxx footer */ footer .container > div a img { - height: 3em; - width: 3em; - } - - footer .container > div > a span { - font-size: 1em; + height: auto; + width: 8em; } footer .container > div > div > p {