isi judul web

w3.css

w3-color

London

ini w3-container w3-red.

w3-text-color

judul

ini w3-container w3-red w3-text-yellow.

w3-hover-color

judul

ini container w3-container w3-red w3-hover-yellow.

w3-hover-text-color

judul

ini container.

Ini w3-border.

Ini w3-border-top .

Ini w3-border-right.

Ini w3-border-bottom.

Ini w3-border-left .

Ini w3-border-0.

Ini w3-border-color.

Ini dengan hover w3-border w3-hover-border-color.

Ini w3-bottombar.

Ini w3-leftbar.

Ini w3-rightbar .

Ini border dengan size,w3-round-xlarge.

Ini dengan color.w3-panel w3-red

ini w3-card

ini dengan color ,w3-card w3-yellow

ini dengan hover,w3-green w3-hover-shadow w3-center

ini text kiri w3-left-align.

ini text kanan w3-right-align.

ini text tengah w3-center.

ini text w3-wide.

ini text w3-slim.

ini text shadow w3-text-shadow.

ini text opacity w3-opacity.

ini w3-round w3-teal

ini w3-round-small w3-teal

ini w3-round-medium w3-teal

ini w3-round-large w3-teal

ini w3-round-xlarge w3-teal

ini w3-round-xxlarge w3-teal

ini w3-round-jumbo w3-teal

ini w3-padding-32 w3-red w3-circle w3-center

Hello
W3.CSS!

ini w3-panel w3-padding.

ini w3-panel w3-padding-tiny.

ini w3-panel w3-padding-small .

ini w3-panel w3-padding-medium.

ini w3-panel w3-padding-xlarge.

ini w3-panel w3-padding-large.

ini w3-panel w3-padding-xlarge.

ini w3-panel w3-padding-xxlarge.

ini w3-panel w3-padding-jumbo.

ini w3-container w3-margin w3-green.

ini w3-container w3-margin-top w3-green.

ini w3-container w3-margin-right w3-green.

ini w3-container w3-margin-bottom w3-green.

ini w3-container w3-margin-left w3-green.

ini w3-container w3-margin-0 w3-green.

ini w3-container w3-section w3-green.

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right

Mouse over this box!

Top Mid

Bottom Mid

w3-left

w3-right

Toggle Show/Hide

Click on the button to show/hide a paragraph.

Paragraph 1.

Paragraph 2.

button dengan hover

button dengan shadow

button dengan float dan hover

button dengan kanan-kiri

button dengan block

button dengan Ripple Effects

button dengan group

dasar table

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-striped

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-bordered

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-striped w3-border

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-table-all w3-centered

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-table-all w3-hoverable

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-hover-color

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-responsive

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

dengan w3-table-all w3-card-4

Name depan	tlp	nilai
tarmin	09876543	50
jono	09876543	50
bejo	09876543	50

list (ul) w3-ul w3-card-4

To close/hide the list items, click on the "x":

Jill ×
Adam ×
Eve ×

ul dengan hoverable

Jill
Eve
Adam

ul dengan hover color

Jill
Eve
Adam

ol dengan hoverable

Jill
Eve
Adam

untuk album poto

Summer 2015

5 Terre

Monterosso

Vernazza

Manarola

Corniglia

Riomaggiore

w3-badge

News 6

Comments 8

badge dalam button

badge dalam list

Jill 1
Eve 2
Adam 3

w3-tag

Status: Done

w3-tag rotasi

STOP

w3-tag muter

STOP

ini w3 dengan icon bosstrap

Welcome!

Welcome!

Home
Home
Home
Home
Home
Home

Lebar w3-setengah kelas adalah 1/2 dari elemen induk (style = "width: 50%"). Pada layar yang lebih kecil dari 601 piksel itu mengubah ukuran 100%

w3-half

The w3-half class uses 50% of the parent container.

On screens smaller than 601 pixels it resizes to 100%.

w3-half

20%

60%

20%

coba refresh browser lihat tampilan top!

coba refresh browser lihat tampilan bottom!

coba refresh browser lihat tampilan left!

coba refresh browser lihat tampilan right!

coba refresh browser lihat tampilan opacity!

coba refresh browser lihat tampilan zoom!

coba refresh browser lihat tampilan fading!

coba refresh browser lihat tampilan spin!

Spinning Elements

Dropdown Button

Move the mouse over the button to open the dropdown content.

Animated Accordions

Link 1 Link 2 Link 3

Accordion Width

Use the CSS width property to change the width of the accordion:

Lorem ipsum 25% width

Lorem ipsum 50% width

Lorem ipsum 75% width

Lorem ipsum 100% width

navigation link kanan

navigation icon

Navbar dengan Inputs dan Buttons

Navbar dengan dropdown

Fixed Top Navigation (seperti diatas)

The w3-top class forces the navigation bar to stay at the top of the page, even when the user scrolls the page.

Scroll this page to see the effect.

Some text to enable scrolling..

Some text some text some text some text..

top navbar

menu navbar full

☰

My Header

In this example, the sidenav is hidden (style="display:none") and is only shown when you click on the menu icon in the top left corner. When it is opened, it hides the page content (it lays on top of it (100% width and height)).

navbar content geser

☰

My Header

In this example, the sidenav is hidden (style="display:none") and is only shown when you click on the menu icon in the top left corner. When it is opened, it shifts the page content to the right (we use JavaScript to add a 25% left margin to the div element with id="main" when this happens. The value "25%" matches the value used to set the width of the sidenav. Tip: If you change the left margin to 40%, you should change the width of the sidenav to 40% as well.

Tabs in a Grid

London

Paris

Tokyo

«
1
2
3
4
5
»

Pagination

The w3-pagination class can also be used to create next/previous buttons:

❮
❯

Dynamic Progress Bar with Labels

Label outside of the progress bar:

20%

Dynamic Progress Bar with Labels

Label outside of the progress bar:

Added 0 of 10 photos

Slideshow Caption

Add a caption text for each image slide with the w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or middle).