diff --git a/README.md b/README.md index fd32fb1..5a57f83 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,67 @@ -# Academy +demo of my version - http://vizman.ayz.pl/01-Landing-Page/ + +# Academy Projekty wykonywane przez społeczność discorda -[helloroman](https://discordapp.com/invite/VTyJc9N) -Projekt jest we wczesnej fazie i obecne challenge sa testowe. Wszelkie sugestie propozycje pomocy mile widziane. +[helloroman](https://discordapp.com/invite/VTyJc9N) +Projekt jest we wczesnej fazie i obecne challenge są testowe. Wszelkie sugestie, propozycje pomocy mile widziane. ## Challenge #1 - Landing Page -Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adressy e-mail osób zainteresowanych udziałem w akademii. -Stack Technologiczny do wykonania zadania to html/css/js bez zadnych frameworkow, preprocesorow. -Rozwiązanie powinno dzialać na: +Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adresy mail osób zainteresowanych udziałem w akademii. +Stack Technologiczny do wykonania zadania to html/css/js bez żadnych frameworkow, preprocesorow. +Rozwiązanie powinno dzialać na: * Chrome 58+ * Edge 16+ * Safari 10.1+ * Firefox 54+ -Przycisk do wysyania formularza powinien mieć ID: LandingEmail -Wykonane zadanie należy przesylac jako pull request na branch develop. -Zwrocie uwagę na sematyke html i accessibility. +Przycisk do wysłania formularza powinien mieć ID: LandingEmail +Wykonane zadanie należy przesyłac jako pull request na branch develop. +Zwrocie uwagę na semantykę html i accessibility. ### Grafiki -[Project.pdf](/assets/Layout.pdf.pdf}) -[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) -[Zeppelin](https://zpl.io/boKzeQv) - Marginesy mogą się trochę nie zgadzać dopiero się uczę figmy -#### Bonus challenge +[Project.pdf](/assets/Layout.pdf) +[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) +[Zeppelin](https://zpl.io/boKzeQv) + Marginesy mogą się trochę nie zgadzać, dopiero się uczę figmy +#### Bonus challenge * Wykonaj zadanie bez użycia javascriptu -* Stwórz warstwe backendowa(dowolny język) lub podepnij się do firebase -### Termin -Wstępny czas na wykonanie challenga 21.01.2019 - - +* Stwórz warstwę backendową(dowolny język) lub podepnij się do firebase +### Termin +Wstępny czas na wykonanie challenga 21.01.2019 + + Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D + +## Challenge #2 - Header + Home Page + +demo of my version - http://vizman.ayz.pl/doman-challange-02/index2.html + +Zadanie typowo frontendowe, zostało podzielone na 3 mini zadania i jednego bonusowego, tym razem widok tylko w jednej wersji mobilnej aby utrwalić podejście mobile first, a nie dlatego, że mi się nie chciało robić... +Jako że większośc z was próbowała stosować BEM w swoim CSSie jest to dziś oficjalna metodologia naszych challengy. +Zadania: +* Przygotuj Header strony +Zawiera logo i przycisk menu, przycisk ma zmieniac swoj wyglad gdy menu jest aktywne. +Menu ma zawierać linki które na razie prowadzą do #. +Zarówno przycisk jak i menu mają być animowane +Zadanie można wykonać zarówno z pomocą javascriptu jak i przy pomocy tzw. checkbox hack. +Staraj się w jak najlepszy sposób odwzorować grafikę, nawet jak wydaje sie brzydka +* Przygotuj sekcje strony zgodnie z załączoną grafiką. +Sekcja ma zawierać 3 checkboxy w których można zaznaczać postępy zadań. +* Javascript +Pierwsze zadania do którego wykonania niezbędne jest wykorzystania Javascriptu. +Do sekcji z poprzedniego zadania należy podpiąc skrypt, który będzie pokazywał czas do ukończenia zadania(10.02.2019 23:59:59) +Czas ma odmierzać dni jeżeli do końca zadania zostało więcej niż 48 godzin. +Jeżeli zostało mniej niż 48 godzin, sekcja ma pokazywać czas w formacie gg:mm:ss, wyswietlany czas ma miec kolor czerwony i ma sie zmieniac na bieżąco. +* Bonus zadanie +Napisz kod przy użyciu sassa i nowoczesnego javascriptu, zapoznaj się z narzędziami typu webpack,parcel,gulp, npm script i zaimplementuj je w wykonaniu zadania. +### Grafiki +Na razie tylko figma +[Figma](https://www.figma.com/file/bgjopxy8ZV8tWyxm0koix0wg/Header?node-id=0%3A1) +### Termin +Wstępny czas na wykonanie challenga 10.02.2019 +### Porada +BEM jest koncepcją nazwienictwa, ale nie tylko klass cssowych. Polega on na tym ze dzielimi klasy na bloki, elementy i modyfikatory. +Bloki są samodzielnymi elementami strony, oznacza to, że jeżeli możemy coś wyjąć i włożyć w dowolne miejsce na stronie, będzie wyglądać tak samo jak wcześniej. Elementy są elemntami bloku, które jednak nieco różnią się stylem od głownego bloku, nie powinno się ich wyjmować z bloku. Modyfikatory służa tylko do drobnych zmian wizualnych można stosować zarówno do elementów jak i bloków. +Dobra analogią może być np. prosta budowa człowieka. Blokiem w takim przypadku będzie ręka, elementem, łokieć a modyfikatorem lewa, palce natomiast beda juz oddzielnym elementem bo moga sie pojawic zarowno u rak jak i u nog - maja wlasne elementy np paznokncie imoga miec swoje modyfikatory np.brudne. +.reka-> -> reka__lokiec -> reka__lokiec--lewy +.palec -> palec__paznokiec --> palec__paznokiec--brudny \ No newline at end of file diff --git a/assets2/Header.pdf b/assets2/Header.pdf new file mode 100644 index 0000000..b47afba Binary files /dev/null and b/assets2/Header.pdf differ diff --git a/assets2/checkbox-blue-unchecked.svg b/assets2/checkbox-blue-unchecked.svg new file mode 100644 index 0000000..410c6b8 --- /dev/null +++ b/assets2/checkbox-blue-unchecked.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets2/checkbox-blue.svg b/assets2/checkbox-blue.svg new file mode 100644 index 0000000..205deda --- /dev/null +++ b/assets2/checkbox-blue.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets2/checkbox-white-unchecked.svg b/assets2/checkbox-white-unchecked.svg new file mode 100644 index 0000000..dead99e --- /dev/null +++ b/assets2/checkbox-white-unchecked.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets2/checkbox-white.svg b/assets2/checkbox-white.svg new file mode 100644 index 0000000..b3db63b --- /dev/null +++ b/assets2/checkbox-white.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets2/favicon.ico b/assets2/favicon.ico new file mode 100644 index 0000000..c0340a7 Binary files /dev/null and b/assets2/favicon.ico differ diff --git a/assets2/logo.jpg b/assets2/logo.jpg new file mode 100644 index 0000000..1dc64fc Binary files /dev/null and b/assets2/logo.jpg differ diff --git a/css/css2.css b/css/css2.css new file mode 100644 index 0000000..3a8c3f4 --- /dev/null +++ b/css/css2.css @@ -0,0 +1,269 @@ +/* Resets */ + +*, *::after, *::before{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html{ + font-size: 10px; /* 1rem = 10px */ +} +body{ + font-size: 1.6rem; + font-family: roboto, sans-serif; + background: #30C2FF; + color: #FAFAFA; + overflow-x: hidden; + -webkit-tap-highlight-color: transparent; +} +a{ + text-decoration: none; +} +button{ + font-family: inherit; + padding: 0; + border: 1px solid; + background: none; + outline: none; + cursor: pointer; +} + +/* Header */ + +.header{ + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: .5rem 1rem; +} + +/* Burger */ + +.burger{ + position: relative; + display: flex; + align-items: center; + width: 1em; + height: 1em; + font-size: 1.5rem; + cursor: pointer; +} + +.burger__lines, +.burger__lines::after, +.burger__lines::before{ + width: 100%; + height: .1em; + background-color: rgba(245, 245, 245, 1); + border-radius: .1em; + transition: .2s .15s; + opacity: 1; +} + +.burger__lines::after, +.burger__lines::before{ + content: ""; + position: absolute; + left: 0; +} + +.burger__lines::after{ + transform: translateX(0) translateY(.45em); +} + +.burger__lines::before{ + transform: translateX(0) translateY(-.45em); +} + +.burger.burger--open .burger__lines{ + background-color: rgba(245, 245, 245, 0); + transform: translateX(-1em); +} + +.burger.burger--open .burger__lines::before{ + transform: translateX(1em) translateY(0) rotate(-45deg); +} + +.burger.burger--open .burger__lines::after{ + transform: translateX(1em) translateY(0) rotate(45deg); +} + +/* Navigation */ + +.navbtn{ + position: relative; + display: flex; + align-items: center; + padding: 0 .5rem; + height: 3rem; + font-size: 2.2rem; + line-height: 2.4rem; + color: inherit; + border: 1px solid #FAFAFA; + border-radius: .5rem; +} + +.navbtn__text{ + padding-right: 1rem; +} + +.nav{ + position: absolute; + right: 0; + top: 100%; + min-width: 18rem; + background-color: #fafafa; + color: #000; + transform: translateX(100%); + transition: .5s; + z-index: 9; +} + +.nav--open{ + transform: translateX(0); +} + +.nav__list{ + list-style: none; + font-size: 1.6rem; + line-height: 3rem; +} + +.nav__item{ + display: block; + padding: 0 1rem; + color: inherit; + border-top: 1px solid #30C2FF; + transition: .2s +} + +.nav__item--login{ + border: none; + font-size: 2rem; + line-height: 5rem; + font-weight: bold; + text-align: center; + text-transform: uppercase; +} + +.nav__item:hover{ + background-color: rgba(48, 193, 255, 0.466); +} + +/* Logo */ + +.logo{ + color: #000; +} + +/* challange section */ + +.challange{ + text-align: center; +} + +.challange__title{ + margin: 2rem 0; + font-family: 'Open Sans', sans-serif; + font-weight: 300; + font-size: 2.4rem; + line-height: 2.4rem; +} + +.challange__subtitle{ + font-size: 1.8rem; + line-height: 1.8rem; + font-weight: normal; +} + +.challange_skills{ + display: flex; + margin: 1.5rem 1rem; + background-color: red; +} + +.challange_skill{ + flex-grow: 1; + width: 33.333%; + color: #000; + background-color:#fafafa; + padding-bottom: 2.8rem; +} + +.challange_skill--colorless{ + flex-grow: 1; + color: #fafafa; + background-color: #30C2FF; + border: 1px solid #fafafa +} + +.challange__label-name{ + margin-top: 1rem; + margin-bottom: .7rem; + font-size: 1.6rem; + line-height: 1.8rem; + font-weight: normal; +} + +.challange__label-container{ + position: relative; + margin: 0 auto; + width: 4.8rem; + height: 4.8rem; +} + +.challange__label-checkbox{ + position: relative; + width: 4.8rem; + height: 4.8rem; + opacity: 0; + z-index: 1; + cursor: pointer; +} + +.challange__label-redesigned-checkbox{ + display: block; + position: absolute; + top: 0; + left: 0; + content: ""; + width: 4.8rem; + height: 4.8rem; + background-image: url("../assets2/checkbox-blue.svg"); + background-position: top center; + background-repeat: no-repeat; +} + +.challange_skill--colorless .challange__label-redesigned-checkbox{ + background-image: url("../assets2/checkbox-white.svg"); +} + +.challange__label-checkbox:not(:checked) + .challange__label-redesigned-checkbox{ + background-image: url("../assets2/checkbox-blue-unchecked.svg"); +} + +.challange_skill--colorless +.challange__label-checkbox:not(:checked) + .challange__label-redesigned-checkbox{ + background-image: url("../assets2/checkbox-white-unchecked.svg"); +} + +/* timer */ + +.timer{ + padding: 0 1rem; +} + +.timer__text{ + font-size: 1.6rem; + line-height: 1.8rem; + text-align: left; + text-decoration: underline; +} + +.timer__counter{ + font-family: 'Open Sans', sans-serif; + font-weight: 300; + font-size: 4.8rem; + color: #000; +} \ No newline at end of file diff --git a/css/style-mobile.css b/css/style-mobile.css new file mode 100644 index 0000000..621efdf --- /dev/null +++ b/css/style-mobile.css @@ -0,0 +1,41 @@ +@media (max-width: 600px){ + .header__title{ + font-size: 4rem; + line-height: 8rem; + } + + .coming-soon{ + display: none; + } +} + +@media (max-width: 480px){ + body{ + background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%) fixed; + } + + .header__title{ + margin-top: -1rem; + margin-left: -1rem; + margin-right: -1rem; + font-size: 3rem; + line-height: 5rem; + } + + .contact__title{ + margin-top: 2rem; + font-size: 1.8rem; + } + + .footer__info{ + font-size: 1.6rem; + line-height: 2rem; + } +} + +@media (max-height: 600px){ + .addressbook__modal{ + height: 80%; + min-height: auto + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..09b6154 --- /dev/null +++ b/css/style.css @@ -0,0 +1,226 @@ +@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html{ + font-size: 10px; /* 1rem = 10px */ +} +body{ + height: 100vh; + font-size: 1.6rem; + font-family: 'Lato', sans-serif; + background: linear-gradient(90deg, #83EB94 0%, #47D95E 100%); + /* background-attachment: fixed; */ + /* background-repeat: no-repeat; */ + background-size: contain; + color: #fff; +} + +a{ + text-decoration: none; +} +button{ + font-family: roboto, sans-serif; + padding: 0; + border: 1px solid; + background: none; + outline: none; + cursor: pointer; +} + +.container{ + display: flex; + justify-content: space-between; + flex-direction: column; + position: relative; + margin: 0 auto; + padding: 6.3vh 5.3% 0 5.3%; + max-width: 100%; + height: 100%; + width: 1100px; + text-align: center; +} + +.header__img{ + width: 100%; + max-width: 688px; +} + +.header__title{ + margin-top: -2rem; + font-size: 6rem; + line-height: 10rem; + font-weight: 300; + letter-spacing: .5rem; + text-transform: uppercase; +} + +main{ + flex-grow: 10; +} + +.contact__title{ + margin: 4rem auto 1rem; + display: block; + font-size: 2.4rem; +} + +.contact__input-container{ + display: inline-block; + position: relative; +} + +.contact__input{ + width: 250px; + height: 48px; + margin: 2.9rem 1.4rem .9rem; + font-family: Lato; + font-weight: normal; + font-size: 1.6rem; + text-indent: 1rem; + color: black; + border-radius: 9px; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); + border: none; + outline: none; +} + +.contact__input::placeholder{ + font-weight: 300; +} + +.contact__input:focus{ + border: 2px solid #5AAF65; +} + +.contact__input:invalid{ + border: 2px solid red; +} + +.contact__input:invalid ~ .contact__input-warning--error{ + display: block; + opacity: 1; + color: red +} +.contact__input:valid ~ .contact__input-warning--info{ + display: block; + opacity: 1; +} + +.contact__input-warning{ + opacity: 0; + display: block; + top: 0; + position: absolute; + margin-left: 1.4rem; + font-size: 1.6rem; + line-height: 2rem; + color: #fff; + text-align: left; + user-select: none; + transition: .3s; +} + +.contact__submit{ + width: 250px; + height: 48px; + margin: .9rem 1.4rem; + color: #fff; + font-size: 1.6rem; + font-weight: 700; + text-transform: uppercase; + background: #0297EC; + border-radius: 9px; + border: none; + outline: none; + cursor: pointer; + transition: .2s +} + +.contact__submit:hover{ + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); +} + +.footer{ + margin-top: 1rem; + margin-bottom: 1rem; +} + +.footer__info{ + font-size: 2.4rem; + line-height: 2.8rem; +} + +.footer__img{ + width: 1.8rem; /* przy wiekszym troche pixeloza */ +} + +.coming-soon{ + position: fixed; + top: 0; + right: 0; +} + +.addressbook{ + position: fixed; + top: -150%; + left: 0; + width: 100%; + height: 100vh; + margin: 0 auto; + transition: .3s; +} + +.addressbook--active{ + top: 0; +} + +.addressbook__modal{ + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 50vh auto; + padding-top: 2rem; + padding-bottom: 2rem; + width: 100%; + max-width: 400px; + min-height: 600px; + transform: translateY(-50%); + background-color: orange; + border-radius: 9px; + box-shadow: 0px 25px 50px rgba(0, 0, 0,.24); +} + +.addressbook__list-container{ + position: absolute; + top: 2rem; + bottom: 9rem; + overflow: hidden; +} + +.addressbook__title{ + margin-bottom: 2rem; + font-weight: normal; + text-transform: uppercase; + letter-spacing: .2rem; +} + +.addressbook__list{ + list-style: none; +} + +.addressbook__list li{ + margin-bottom: 1rem; +} + +#contact__submit--close{ + position: absolute; + bottom: 2rem; + left: 50%; + margin: 0; + transform: translateX(-50%) +} \ No newline at end of file diff --git a/design.url b/design.url new file mode 100644 index 0000000..b85dd52 --- /dev/null +++ b/design.url @@ -0,0 +1,5 @@ +[{000214A0-0000-0000-C000-000000000046}] +Prop3=19,11 +[InternetShortcut] +IDList= +URL=http://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=6%3A1795 diff --git a/img/coming-soon-ribbon.png b/img/coming-soon-ribbon.png new file mode 100644 index 0000000..d53e4d3 Binary files /dev/null and b/img/coming-soon-ribbon.png differ diff --git a/img/header.svg b/img/header.svg new file mode 100644 index 0000000..730b082 --- /dev/null +++ b/img/header.svg @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/love.png b/img/love.png new file mode 100644 index 0000000..f4878f0 Binary files /dev/null and b/img/love.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e589da8 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + Landing Page + + + + +
+
+ +

Code Academy

+
+
+
+ +
+ +

E-mail

+

Invalid E-mail

+
+ +
+
+ + + +
+ + + \ No newline at end of file diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..f88e97e --- /dev/null +++ b/index2.html @@ -0,0 +1,75 @@ + + + + + + + Challenge #2 - Header + Home Page + + + + +
+ + + +
+
+

Podejmij wyzwanie

+

Home Page #2

+
+
+ +
+
+ +
+
+ +
+
+
+

Do konca zostało:

+

14 dni

+
+
+ + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..4674ba9 --- /dev/null +++ b/js/app.js @@ -0,0 +1,66 @@ +const input = document.querySelector(".contact__input"); +const sendBtn = document.getElementById("contact__submit--send"); +const closeBtn = document.getElementById("contact__submit--close"); +const modal = document.querySelector(".addressbook"); +const emails = []; + +const addEmail = (e, tab) =>{ + e.preventDefault(); + tab.push(input.value); + tab.reverse(); + console.log(tab); + + const emailsList = document.querySelector(".addressbook__list"); + emailsList.textContent=""; + tab.map(item=>{ + const li = document.createElement("li"); + li.textContent = item; + emailsList.appendChild(li); + }) + tab.reverse(); + + modal.classList.add("addressbook--active"); +} + +const closeModal = (e) =>{ + e.preventDefault(); + modal.classList.remove("addressbook--active"); +} + +sendBtn.addEventListener("submit", (e)=>addEmail(e, emails)); +closeBtn.addEventListener("click", closeModal); + +// const input = document.querySelector(".contact__input"); +// const sendBtn = document.getElementById("contact__submit--send"); +// const closeBtn = document.getElementById("contact__submit--close"); +// const modal = document.querySelector(".addressbook"); +// const storage = localStorage.getItem("emailList"); +// console.log({ storage }); +// const emails = storage ? storage.split(",") : []; +// console.log({ emails }); +// const addEmail = e => { +// e.preventDefault(); + +// emails.push(input.value); + +// localStorage.setItem("emailList", emails); +// console.log({ storage }); +// console.log({ emails }); +// const emailsList = document.querySelector(".addressbook__list"); +// emailsList.textContent = ""; +// emails.map(email => { +// const li = document.createElement("li"); +// li.textContent = email; +// emailsList.appendChild(li); +// }); + +// modal.classList.add("addressbook--active"); +// }; + +// const closeModal = e => { +// e.preventDefault(); +// modal.classList.remove("addressbook--active"); +// }; + +// sendBtn.addEventListener("submit", addEmail); +// closeBtn.addEventListener("click", closeModal); \ No newline at end of file diff --git a/js/app2.js b/js/app2.js new file mode 100644 index 0000000..df10523 --- /dev/null +++ b/js/app2.js @@ -0,0 +1,45 @@ +const burger = document.querySelector(".burger"); +const navbtn = document.querySelector(".navbtn"); +const nav = document.querySelector(".nav"); + +navbtn.addEventListener("click", ()=>{ + burger.classList.toggle("burger--open"); + nav.classList.toggle("nav--open"); +}); + +// month as a number (0-11) +const targetTime = new Date(2019, 1, 11); + +const returnTime = (targetTime) =>{ + const currentTime = new Date(); + let time = Math.floor((targetTime - currentTime)/1000); + const hours = Math.floor(time / 3600); + time %= 3600; + const minutes = Math.floor(time / 60); + const seconds = time % 60; + return {hours, minutes, seconds}; +} + +// console.log(returnTime(targetTime)); + +const counter = document.querySelector(".timer__counter"); + +const showCounter = (targetTime) =>{ + if(returnTime(targetTime).hours>47) { + counter.textContent = Math.floor((returnTime(targetTime).hours)/24) + " dni"; + } + else if(returnTime(targetTime).hours < 0 || returnTime(targetTime).minutes < 0 || returnTime(targetTime).seconds < 0){ + counter.textContent = "Wyzwanie zakonczone" + } + else{ + counter.textContent = + (returnTime(targetTime).hours > 9 ? returnTime(targetTime).hours : "0" + returnTime(targetTime).hours) + + ":" + + (returnTime(targetTime).minutes > 9 ? returnTime(targetTime).minutes : "0" + returnTime(targetTime).minutes) + + ":" + + (returnTime(targetTime).seconds > 9 ? returnTime(targetTime).seconds : "0" + returnTime(targetTime).seconds); + } +} + +showCounter(targetTime); +setInterval(() => showCounter(targetTime), 1000); \ No newline at end of file