Develop #19
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| body{ | ||
| padding: 0 auto; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| #layout{ | ||
| background: linear-gradient(90deg, #83EB94 0%, #47D95E 100%); | ||
| padding-bottom: 10px; | ||
| width: 100%; | ||
| padding-top: 40px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| #coming_soon{ | ||
| position: absolute; | ||
| right: 0%; | ||
| top:0%; | ||
|
|
||
| } | ||
|
|
||
| #guy{ | ||
| width: 70%; | ||
| position: relative; | ||
| left: 15vw; | ||
| filter: brightness(70%); | ||
| padding: 5px; | ||
| } | ||
|
|
||
| #code{ | ||
| font-family: 'Lato'; | ||
| font-style: normal; | ||
| font-weight: 300; | ||
| font-size: 60px; | ||
| text-align: center; | ||
| letter-spacing: 15px; | ||
| color: black; | ||
| width: 100%; | ||
|
|
||
| } | ||
|
|
||
| h3{ | ||
|
There was a problem hiding this comment. To samo mogę powiedzieć o stylowaniu po znacznikach :) |
||
| text-align: center; | ||
| color: #FFFFFF; | ||
| font-family: 'Lato'; | ||
| font-style: normal; | ||
| font-weight: 200; | ||
| position: relative; | ||
| top:5px; | ||
| font-size: 24px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| #get_mail{ | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 100%; | ||
| height: 80px; | ||
| margin-bottom: 200px; | ||
| text-align: center; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| } | ||
|
|
||
| #email_field{ | ||
|
|
||
| border-radius: 9px; | ||
| border-style: none; | ||
| box-shadow:inset 0 0 10px #000000; | ||
| font-family: 'Lato'; | ||
| font-size: 16px; | ||
| text-indent: 10px; | ||
| font-style: normal; | ||
| font-weight: 300; | ||
| color: #A0A0A0; | ||
| font-weight: 300; | ||
| line-height: normal; | ||
| width: 250px; | ||
| height: 48px; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| #button{ | ||
|
|
||
| background:#0297EC; | ||
| border-radius: 9px; | ||
| padding: 13px; | ||
| color:#FFFFFF; | ||
| border-style: none; | ||
| padding-left: 30px; | ||
| padding-right: 30px; | ||
| font-size: 16px; | ||
| text-align: center; | ||
| font-family: 'Lato'; | ||
| width: 250px; | ||
| height: 48px; | ||
| margin: 0; | ||
| position: relative; | ||
| bottom: 10px; | ||
|
|
||
|
|
||
|
|
||
|
|
||
| } | ||
|
|
||
| #foot{ | ||
|
|
||
| font-family: 'Lato'; | ||
| font-style: normal; | ||
| font-weight: 300; | ||
| text-align:center; | ||
| color: #FFFFFF; | ||
| width: 100%; | ||
| font-size: 24px; | ||
| line-height: 28px; | ||
| } | ||
| .sexiflexi{ | ||
|
There was a problem hiding this comment. Za nic nie mogę się domyśleć co to jest... Pisz nazwy klas bardziej mówiące o tym, co jest czym ;) |
||
|
|
||
| margin-top: 10px; | ||
| margin-right: 14px; | ||
| margin-left: 14px; | ||
| } | ||
| #button:hover{ | ||
| box-shadow:2px 2px 10px #000000; | ||
|
|
||
| } | ||
| #email_field:focus{ | ||
| border-style: solid; | ||
| border-color: black; | ||
| border-width: thin; | ||
|
|
||
|
There was a problem hiding this comment. Nie lepiej użyć border: thin solid black;? |
||
|
|
||
|
|
||
| } | ||
|
|
||
|
|
||
| .form-control-placeholder { | ||
| position: relative; | ||
| top:-35px; | ||
| right: 90px; | ||
| transition: all 200ms; | ||
| opacity: 0.5; | ||
|
There was a problem hiding this comment. Tutaj to nie jest błąd, lecz podpowiedź. Możesz pisać po prostu .5 ;) |
||
| display: block; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .form-control:focus + .form-control-placeholder, | ||
| .form-control:valid + .form-control-placeholder { | ||
|
There was a problem hiding this comment. .form-control:focus:valid + .form-control-placeholderMyślę, że lepiej stosować krótszy zapis ;) |
||
| font-size: 100%; | ||
| transform: translate3d(0, -200%, 0); | ||
| font-family: 'Lato'; | ||
|
There was a problem hiding this comment. n-ty raz widzę tą czcionkę. Nie lepiej jest jej użyć raz, dla rodzica będącego najwyżej w hierarchii? |
||
| color: white; | ||
| font-weight: 300; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="stylesheet" href="1zadanie.css" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Lato:200,300,300i,400,400i,700,700i&subset=latin-ext" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
| <section id="layout" > | ||
| <img src="coming-soon-ribbon.png" id="coming_soon"> | ||
| <img src="undraw_developer_activity_bv83.svg" id="guy" > | ||
| <div id="code" style="color: white;">CODE ACADEMY</div> | ||
|
There was a problem hiding this comment.
text-transform: uppercase; |
||
| <h3>Leave your email</h3> | ||
|
There was a problem hiding this comment. tak się z ciekawości spytam, a muszą być? ;> nie można sobie użyć h3 jak nigdzie nie było h1, ani h2? przecież to pełnoprawny element HTML'a There was a problem hiding this comment. @mateuszlittwin-gf, jeśli masz gdzieś semantykę, to nie muszą ;) Najlepiej jest dać tytuł główny dokumentu w H1, H2 jako tytuły sekcji, H3 jako artykułów itd ;) Choćby ze względu na czytelność kodu i stworzenie swoistego "drzewka" strony. There was a problem hiding this comment. to tym bardziej tutaj nie pasuje h1 ani h2, bo to też nie są tytuły sekcji ;) bardziej tu pasuje There was a problem hiding this comment. Myślę, że użycie nagłówka tutaj jest do przyjęcia. Choćby ze względu na fakt, że element powinien zwrócić uwagę odwiedzającego. Jednak po drodze zabrakło właśnie header tagów poprzednich ;) There was a problem hiding this comment. Teraz tak patrze szerzej i <h1>Code Academy</h1>
<h2>Leave you email</h2>There was a problem hiding this comment. O coś takiego mi dokładnie chodzi ;) Gdyby dodatkowo ładnie rozdzielić plik na sekcje header, main i footer byłoby niemal idealnie :) |
||
| <div id="get_mail"> | ||
| <div class="form-group"> | ||
| <div class="sexiflexi"> <input required type="email" name="email" id="email_field" class="form-control"> | ||
| <label for="email" class="form-control-placeholder" width="30%">E-mail</label> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div class="sexiflexi"> <input type="submit" value="GET EARLY ACCESS" id="button"></div> | ||
| </div> | ||
| <P id="foot">User © 2019<br> | ||
| Made with <img src="love.png"> in Poland<br> | ||
| We're using cookies to improve your experience. | ||
| </P> | ||
|
There was a problem hiding this comment. Yyy? To jest ble. Bardzo ble. Jeśli chcesz przejść do następnej linii to tworzysz p. Te |
||
|
|
||
|
|
||
| </section> | ||
|
There was a problem hiding this comment. Co do całości. Zabrakło tu m.in tagów There was a problem hiding this comment. Dodatkowo. Tagi |
||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Średnio mi się podoba stylowanie po id. Zwykło się widzieć stylowanie po klasach