-
Notifications
You must be signed in to change notification settings - Fork 238
practice htm and css #198
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Sebpie0203
wants to merge
12
commits into
devmentor-pl:master
Choose a base branch
from
Sebpie0203:master
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
practice htm and css #198
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
5574739
added html structure without css styling
Sebpie0203 8c6d64a
add id ac-1,2,3,4 to index.css
Sebpie0203 31e48b3
add div to ul list
Sebpie0203 25cab58
add missing selectors to index.css
Sebpie0203 038b04b
added styled by css
Sebpie0203 0be3685
add cascading menu
Sebpie0203 63fc02a
add index.html, style and reset css
Sebpie0203 84b54db
add simple website leyout
Sebpie0203 13415d5
add float and dispay leyouts
Sebpie0203 331dd0e
changed BEM classes
Sebpie0203 09484ce
new navigation
Sebpie0203 a89e224
I have made my first website project
Sebpie0203 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,154 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pl"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>devmentor.pl - HTML & CSS BASICS - #01</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| </body> | ||
| </html> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| <title>devmentor.pl - HTML & CSS BASICS - #01</title> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div> | ||
| <h1>logo</h1> | ||
| </div> | ||
| <div> | ||
| <ul> | ||
| <li><a href="">element</a></li> | ||
| <ul> | ||
| <li><a href="">element</a></li> | ||
| <li><a href="">element</a></li> | ||
| <ul> | ||
| <li><a href="">element</a></li> | ||
| <li><a href="">element</a></li> | ||
| </ul> | ||
| </ul> | ||
| <li><a href="">element</a></li> | ||
| <li><a href="">element</a></li> | ||
| <li><a href="">element</a></li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main> | ||
| <article> | ||
| <div> | ||
| <h2>tytul jakiegos podania</h2> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus | ||
| porro quisquam soluta perspiciatis, et maxime! Explicabo qui odio in | ||
| saepe. Lorem ipsum dolor sit amet consectetur adipisicing elit. | ||
| Laborum non numquam neque, voluptates illo praesentium at reiciendis | ||
| nobis ducimus minima? | ||
| </p> | ||
|
|
||
| <p>data publikacji</p> | ||
| <span>Sebastian Pietrzykowski</span> | ||
| </div> | ||
|
|
||
| <figure> | ||
| <img | ||
| src="../01/img/portfolio2.jpg" | ||
| alt="komputer na biurku" | ||
| style="width: 200px" | ||
| /> | ||
| </figure> | ||
|
|
||
| <caption> | ||
| <div> | ||
| <table> | ||
| <thead> | ||
| Naglowek tabeli | ||
| <tr> | ||
| <th>Nazwa</th> | ||
| <th>Ilosc</th> | ||
| <th>Cena</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>ABC</td> | ||
| <td>1</td> | ||
| <td>100 pln</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </caption> | ||
| </article> | ||
|
|
||
| <form action=""> | ||
| <div> | ||
| <label for="" | ||
| >imie | ||
| <input type="text" name="firstName" /> | ||
| </label> | ||
| </div> | ||
| <div> | ||
| <label for="" | ||
| >nazwisko | ||
| <input type="text" name="lastName" /> | ||
| </label> | ||
| </div> | ||
| <div> | ||
| <label for="" | ||
| >tresc emaila | ||
| <textarea id="" cols="30" rows="10" name="emailText"></textarea> | ||
| </label> | ||
| </div> | ||
| <div><input type="submit" /></div> | ||
| </form> | ||
|
|
||
| <section> | ||
| <div> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse | ||
| reprehenderit expedita rerum, voluptatum non quidem aliquam eaque | ||
| hic amet quam? | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p>Sylvester Stallone</p> | ||
| <p>data utworzenia</p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse | ||
| reprehenderit expedita rerum, voluptatum non quidem aliquam eaque | ||
| hic amet quam? | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p>Jason Statham</p> | ||
| <p>data utworzenia</p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse | ||
| reprehenderit expedita rerum, voluptatum non quidem aliquam eaque | ||
| hic amet quam? | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p>Denzel Washington</p> | ||
| <p>data utworzenia</p> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <p> | ||
| © 2024<span | ||
| >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, | ||
| earum!</span | ||
| > | ||
| </p> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="#Home">Home</a></li> | ||
| </ul> | ||
| </nav> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,61 @@ | ||
| /*Acco*/ | ||
| .ac-container { | ||
| max-width: 400px; | ||
| max-width: 400px; | ||
| } | ||
|
|
||
| /* | ||
| Znacznik label, którego przodkiem jest klasa .ac-container | ||
| (0, 1, 1) | ||
| */ | ||
| ?? { | ||
| height: 30px !important; | ||
| line-height: 21px !important; | ||
| font-size: 12px !important; | ||
| font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important; | ||
| padding: 5px 20px; | ||
| position: relative; | ||
| z-index: 20; | ||
| display: block; | ||
| height: 30px; | ||
| cursor: pointer; | ||
| color: #777; | ||
| text-shadow: 1px 1px 1px rgba(255,255,255,0.8); | ||
| line-height: 33px; | ||
| font-size: 19px; | ||
| background: #fff; | ||
| background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%); | ||
| background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea)); | ||
| background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%); | ||
| background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%); | ||
| background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%); | ||
| background: linear-gradient(top,#fff 1%,#eaeaea 100%); | ||
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 ); | ||
| box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1); | ||
| font-size: 12px; | ||
| height: 30px; | ||
| line-height: 20px; | ||
| .ac-container label { | ||
| height: 30px !important; | ||
| line-height: 21px !important; | ||
| font-size: 12px !important; | ||
| font-family: "Open Sans", "Arial Narrow", Arial, sans-serif !important; | ||
| padding: 5px 20px; | ||
| position: relative; | ||
| z-index: 20; | ||
| display: block; | ||
| height: 30px; | ||
| cursor: pointer; | ||
| color: #777; | ||
| text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); | ||
| line-height: 33px; | ||
| font-size: 19px; | ||
| background: #fff; | ||
| background: -moz-linear-gradient(top, #fff 1%, #eaeaea 100%); | ||
| background: -webkit-gradient( | ||
| linear, | ||
| left top, | ||
| left bottom, | ||
| color-stop(1%, #fff), | ||
| color-stop(100%, #eaeaea) | ||
| ); | ||
| background: -webkit-linear-gradient(top, #fff 1%, #eaeaea 100%); | ||
| background: -o-linear-gradient(top, #fff 1%, #eaeaea 100%); | ||
| background: -ms-linear-gradient(top, #fff 1%, #eaeaea 100%); | ||
| background: linear-gradient(top, #fff 1%, #eaeaea 100%); | ||
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 ); | ||
| box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), | ||
| 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1); | ||
| font-size: 12px; | ||
| height: 30px; | ||
| line-height: 20px; | ||
| } | ||
|
|
||
| .ac-container { | ||
| width: 100%; | ||
| margin: 10px auto 30px auto; | ||
| text-align: left; | ||
| width: 100%; | ||
| margin: 10px auto 30px auto; | ||
| text-align: left; | ||
| } | ||
|
|
||
| /* | ||
| Zmiana koloru tła po najechaniu przez kursor myszy na znacznik label, | ||
| który znajduje się wewnątrze elementu o klasie .ac-container | ||
| (0, 2, 1) | ||
| */ | ||
| ?? { | ||
| background: #fff; | ||
| .ac-container label:hover { | ||
| background: #fff; | ||
| } | ||
|
|
||
| /* | ||
|
|
@@ -61,26 +68,26 @@ i ten brat musi posiadać przodka o klasie .ac-container | |
| to samo co w 1) ale z efektem najechania kursorem na label | ||
| (0, 3, 2) | ||
| */ | ||
| ??, | ||
| ?? { | ||
| background: #f1f2f3; | ||
| color: #666; | ||
| text-shadow: 0 1px 1px rgba(255,255,255,0.6); | ||
| box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1); | ||
| height: 30px; | ||
| line-height: 21px; | ||
| font-size: 13px; | ||
| .ac-container input:checked + label, | ||
| .ac-container input:checked + label:hover { | ||
| background: #f1f2f3; | ||
| color: #666; | ||
| text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); | ||
| box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1); | ||
| height: 30px; | ||
| line-height: 21px; | ||
| font-size: 13px; | ||
| } | ||
|
|
||
| .ac-container label:hover:after, | ||
| .ac-container input:checked + label:hover:after { | ||
| content: ''; | ||
| position: absolute; | ||
| width: 24px; | ||
| height: 24px; | ||
| right: 13px; | ||
| top: 7px; | ||
| background: transparent url(../images/arrow_down.png) no-repeat center center; | ||
| content: ""; | ||
| position: absolute; | ||
| width: 24px; | ||
| height: 24px; | ||
| right: 13px; | ||
| top: 7px; | ||
| background: transparent url(../images/arrow_down.png) no-repeat center center; | ||
| } | ||
|
|
||
| /* | ||
|
|
@@ -89,60 +96,60 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), | |
| którego przodek to element o klasie .ac-container | ||
| (0, 3, 3) | ||
| */ | ||
| ?? { | ||
| background-image: url(../images/arrow_up.png); | ||
| .ac-container label:hover:after + input:checked { | ||
| background-image: url(../images/arrow_up.png); | ||
| } | ||
|
|
||
| .ac-container input { | ||
| display: none; | ||
| display: none; | ||
| } | ||
|
|
||
| .ac-container article { | ||
| background: rgba(255,255,255,0.5); | ||
| margin-top: -1px; | ||
| overflow: hidden; | ||
| height: 0; | ||
| position: relative; | ||
| z-index: 10; | ||
| -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; | ||
| -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; | ||
| -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; | ||
| -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; | ||
| transition: height 0.3s ease-in-out,box-shadow 0.6s linear; | ||
| background: rgba(255, 255, 255, 0.5); | ||
| margin-top: -1px; | ||
| overflow: hidden; | ||
| height: 0; | ||
| position: relative; | ||
| z-index: 10; | ||
| -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; | ||
| -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; | ||
| -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; | ||
| -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; | ||
| transition: height 0.3s ease-in-out, box-shadow 0.6s linear; | ||
| } | ||
|
|
||
| .ac-container article p { | ||
| font-style: normal; | ||
| color: #777; | ||
| line-height: 23px; | ||
| font-size: 10px; | ||
| padding: 20px; | ||
| text-shadow: 1px 1px 1px rgba(255,255,255,0.8); | ||
| font: normal normal 12px 'Open Sans'; | ||
| font-style: normal; | ||
| color: #777; | ||
| line-height: 23px; | ||
| font-size: 10px; | ||
| padding: 20px; | ||
| text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); | ||
| font: normal normal 12px "Open Sans"; | ||
| } | ||
|
|
||
| /* | ||
| Rodzeństwo o typie article, dla elementu input, który jest zaznaczony (użyj pseudoklasy) | ||
| oraz posiada przodka o klasie .ac-container | ||
| (0, 2, 2) | ||
| */ | ||
| ?? { | ||
| -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| box-shadow: 0 0 0 1px rgba(155,155,155,0.3); | ||
| .ac-container input:checked + article { | ||
| -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; | ||
| -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; | ||
| -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; | ||
| -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; | ||
| transition: height 0.5s ease-in-out, box-shadow 0.1s linear; | ||
| box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3); | ||
| } | ||
|
|
||
| .ac-container input:checked ~ article.ac-small { | ||
| height: 140px; | ||
| height: 140px; | ||
| } | ||
|
|
||
| .ac-container input:checked ~ article.ac-medium { | ||
| height: 180px; | ||
| height: 180px; | ||
| } | ||
|
|
||
| .ac-container input:checked ~ article.ac-large { | ||
| height: 230px; | ||
| } | ||
| height: 230px; | ||
| } | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Osobiście napisałbym to tak:
article- bo komentarz to niezależny element|footer- bo to element mniej istotny - dodatek do treścirel="author"- wskazuje, że to autortime- tworzę jasny znacznik czasowy dla robotów wyszukiwarek