markdown template

Notebook


-------------------------------------------------------------------------------------

Hello Reader.


Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Section Header

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.


Lorem TOASTY .ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque orci nec facilisis iaculis. Sed accumsan placerat dolor. Donec sollicitudin nisi sit amet sodales molestie. Maecenas sit amet dolor nulla. Fusce sed elit et erat consequat dignissim. Nunc eu erat felis. Mauris pretium, arcu eu dapibus tempor, mauris eros tempor tortor, KLOAeu tincidunt erat libero sit amet mi.

Phasellus eu libero mollis, finibus lacus eget, sollicitudin nulla. Reprehenderit officia labore debitis quae neque fugiat iste sed, maiores nisi eligendi consequatur nesciunt possimus rem earum quidem inventore architecto praesentium, cum maxime, quaerat ipsam? Ea molestiae consequatur mollitia tempore expedita alias dicta quam tenetur.

Vero corporis ipsa facere tenetur explicabo

totam expedita delectus reprehenderit est eum. Eius, tenetur praesentium tempore dicta culpa labore sit hic similique at nesciunt temporibus perspiciatis aliquid dolorem esse voluptatem quis, cupiditate, aspernatur illo ipsam.

Deleniti provident nobis

maxime, qui molestias ex recusandae, magni consectetur iure nostrum sequi suscipit harum corrupti autem consequuntur animi veritatis? Eos laudantium quod beatae repudiandae accusamus fuga, adipisci tenetur odio nihil commodi optio ipsam voluptates quam esse reiciendis!

Eligendi inventore nesciunt veritatis mollitia cum! Veniam placeat saepe iure ab eius, ipsa quisquam voluptas quod ad libero ipsum vel officiis ullam eum.

Hello Cenrreal Lakgos

Oga - This Eligendi inventore nesciunt veritatis mollitia cum! Veniam placeat saepe iure ab eius, ipsa quisquam voluptas quod ad libero ipsum vel Oga - This Eligendi inventore nesciunt veritatis mollitia cum! Veniam placeat saepe iure ab eius, ipsa quisquam voluptas quod ad libero ipsum vel


This text is a paragraph. This won't be another paragraph, it will join the line above it.

This will be another paragraph, as it has a blank line above it.


This is bold and this is italic.

This is bold and italic.


Text to display will display a link.

Another text will do the same. Hover the mouse over it to see the title.

This link will do the same as well. It works as the identifier itself.

This link (same as above), has a second pair of empty brackets to indicate that the following parenthesis does not contain a link.

https://example.com works too. Must be used for explicit links.


Split List

Paragraph:

  1. Item one
    1. Sub item one
    2. Sub item two
    3. Sub item three
  2. Item two

IMAGES

Notebook

Flank leberkas turkey, bresaola beef ribs ham t-bone filet mignon pig capicola buffalo burgdoggen chislic boudin strip steak. Salami pork belly ground round ham hock jowl chislic, corned beef tail alcatra tri-tip cow pancetta cupim. Tenderloin alcatra shankle corned beef. Chuck spare ribs andouille, doner pork loin turkey beef pastrami salami jowl drumstick.


Display video from Youtube


Collapse

This is the summary text, click me to expand

This is the detailed text.

We can still use markdown, but we need to take the additional step of using the parse_block_html option as described in the Mix HTML + Markdown Markup section.

You can learn more about expected usage of this approach in the GitLab UI docs though the solution we use above is specific to usage in markdown.


Code Blocks

def hello
   puts "Hello world!"
end

Hamburger tenderloin boudin pig, jerky pork loin short loin alcatra ground round salami capicola andouille shank pork chop bresaola. Tri-tip frankfurter swine cow tail landjaeger porchetta meatloaf t-bone corned beef short loin kielbasa. Pork loin leberkas tenderloin jerky. Ribeye frankfurter bresaola porchetta salami boudin jerky tongue. Boudin beef ribs tenderloin short ribs. Bacon pork shank, chuck strip steak turducken tongue short loin rump meatball tail spare ribs.


TABLES

Boudin beef ribs tenderloin short ribs. Bacon pork shank, chuck strip steak turducken tongue short loin rump meatball tail spare ribs.

Default alignedLeft alignedCenter alignedRight aligned
First body partSecond cellThird cellfourth cell
Second linefooStrongFoor baz
Third linequuxbazcwbar Stret
Fouth linesfuxkacfwzbar Stret
Fifth linesfc4fuxk3sdeazbar Stret

Other , Boudin beef ribs tenderloin short ribs. Bacon pork shank, chuck strip steak turducken tongue short loin rump meatball tail spare ribs. Gobe Other , Boudin beef ribs tenderloin short ribs. Bacon pork shank, chuck strip steak turducken tongue short loin rump meatball tail spare ribs.nvoe

Talks


Fatback swine sirloin, tenderloin buffalo bacon short loin pork loin landjaeger pork belly short ribs. T-bone frankfurter landjaeger, swine beef ribs buffalo pork belly chislic tail. Ground round ham boudin landjaeger cupim sausage t-bone beef ribs chicken turkey. Beef ribs doner filet mignon pork alcatra pastrami.


SINGLE SELECTOR

BlockQuote.


Hamburger tenderloin boudin pig, jerky pork loin short loin alcatra ground round salami capicola andouille shank pork chop bresaola. Tri-tip frankfurter swine cow tail landjaeger porchetta meatloaf t-bone corned beef short loin kielbasa. Pork loin leberkas tenderloin jerky. Ribeye frankfurter bresaola porchetta salami boudin jerky tongue. Boudin beef ribs tenderloin short ribs. Bacon pork shank, chuck strip steak turducken tongue short loin rump meatball tail spare ribs.


Blockquotes

This is a paragraph. This is a paragraph.

A nested blockquote. A nested blockquote. This is a paragraph. This is a paragraph.


Background color


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code "fences"

Sample text here...

Syntax highlighting

var foo = function (bar) {
return bar++;
};

console.log(foo(5));

Tables

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.

Strip steak chislic flank buffalo kielbasa filet mignon pastrami tenderloin. Ham picanha shoulder turducken beef. Shankle rump bacon boudin frankfurter, pastrami brisket fatback picanha. Sirloin venison short loin ribeye salami sausage rump biltong jowl prosciutto drumstick swine tail pastrami.


Hamburger tenderloin boudin pig, jerky pork loin short loin alcatra ground round salami capicola andouille shank pork chop bresaola. Tri-tip frankfurter swine cow tail landjaeger porchetta meatloaf t-bone corned beef short loin kielbasa. Pork loin leberkas tenderloin jerky. Ribeye frankfurter bresaola porchetta salami boudin jerky tongue. Boudin beef ribs tenderloin short ribs. Bacon pork shank, chuck strip steak turducken tongue short loin rump meatball tail spare ribs.


Embedded Tweets

{::options parse_block_html="false" /}


Strip steak chislic flank buffalo kielbasa filet mignon pastrami tenderloin. Ham picanha shoulder turducken beef. Shankle rump bacon boudin frankfurter, pastrami brisket fatback picanha. Sirloin venison short loin ribeye salami sausage rump biltong jowl prosciutto drumstick swine tail pastrami. Strip steak chislic flank buffalo kielbasa filet mignon pastrami tenderloin. Ham picanha shoulder turducken beef. Shankle rump bacon boudin frankfurter, pastrami brisket fatback picanha. Sirloin venison short loin ribeye salami sausage rump biltong jowl prosciutto drumstick swine tail pastrami.


I need to highlight these very important words and more list


I love supporting the EFF. This is the Markdown Guide. See the section on code.


Strip steak chislic flank buffalo kielbasa filet mignon pastrami tenderloin. Ham picanha shoulder turducken beef. Shankle rump bacon boudin frankfurter, pastrami brisket fatback picanha. Sirloin venison short loin ribeye salami sausage rump biltong jowl prosciutto drumstick swine tail pastrami.


Strip steak chislic flank buffalo kielbasa filet mignon pastrami tenderloin. Ham picanha shoulder turducken beef. Shankle rump bacon boudin frankfurter, pastrami brisket fatback picanha. Sirloin venison short loin ribeye salami sausage rump biltong jowl prosciutto drumstick swine tail pastrami.


-------------------------------------------------------------------------------------
First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.

I just love bold text. I just love bold text. Sirloin venison short loin ribeye salami sausage rump biltong jowl prosciutto drumstick swine tail pastrami.

The quarterly results look great!

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.



DESIGN .


        Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. 
        Totalllyo  tbu ndipceno niwpni nivenv ninvw follows pon anos omo. 
        Zollows pon anos omo. Aand toBfni Ddvin nievnci oncqn cqoub5vvdi.  

Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo.Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo.

DESIGN .


        Aand to tfo follows pon anos omo. Aand to tfo follows pon Fanos ordmo. 
        Totalllyo  tbu ndipceno niwpni nivenv ninvw follows pon FFanos gbomo. 
        Zollows pon anos omo. Aand toBfni Ddvin nievnci oncqn DFcqoub5v vdi.
        Gthmo6ws pon anos omo. HJDnd toBfni Ddvin nievnci oncqn cqoub5vdi.             

Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo.Aand> to I need to highlight these very important words and more listtfo follows pon anos omo. Aand to tfo follows pon anos omo. Aand to tfo follows pon anos omo.

Create Multiple Columns

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

----------------------------------------------------------------------------------

A Fancy Table

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
North/SouthSimon CrowtherUK
Paris spécialitésMarie BertrandFrance


Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.



W3.CSS

Buttons (w3-button)

Link Button

Buttons (w3-btn)

Link Button


W3.CSS

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.



W3.CSS

Making the Web!

Making the Web!

Making the Web!



W3.CSS

Photo Card

Alps

The Italian / Austrian Alps


W3.CSS

Tabs in a Grid


----------------------------------------------------------------------------------W3.CSS

Slideshow Indicators

An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.


----------------------------------------------------------------------------------W3.CSS

Displaying Code

The w3-code class is designed to display example code:

Example

fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";

W3.CSS

W3.CSS Animated Modal

×

Modal Header

Some text..

Some text..

Modal Footer


W3.CSS

Accordion Buttons

You can use any HTML element to open the accordion content. We prefer a button with a w3-block class, because it spans the entire width of its parent element, just like the accordion content (100% width). Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want them left aligned instead. However, you do not have to follow our approach.

Lorem ipsum...

Lorem ipsum...

Centered content as well!


----------------------------------------------------------------------------------W3.CSS

Quotes with HTML Symbols

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.


----------------------------------------------------------------------------------

Auto Sidebar

This sidebar is as tall as its content (the links), and is always shown.



JavaScript ISO Dates


----------------------------------------------------------------------------------

Font Classes (w3-cursive)

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.


Displaying Tags in a Row

Ssss Aaaa Llll Eeee

----------------------------------------------------------------------------------

Quotes with Font Awesome Symbols


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.


----------------------------------------------------------------------------------

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H2O

Xn + Yn = Zn

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.


----------------------------------------------------------------------------------

Color Picker

Current color code:


----------------------------------------------------------------------------------

GLOWING TEXT REVIEW.


----------------------------------------------------------------------------------

Responsive Column Cards

Resize the browser window to see the effect.

Card 1

Some text

Some text

Card 2

Some text

Some text

Card 3

Some text

Some text

Card 4

Some text

Some text


----------------------------------------------------------------------------------

Filter Table

Search for a name in the input field.

NameCountry
Alfreds FutterkisteGermany
Berglunds snabbkopSweden
Island TradingUK
Koniglich EssenGermany
Laughing Bacchus WinecellarsCanada
Magazzini Alimentari RiunitiItaly
North/SouthUK
Paris specialitesFrance

Tip: Remove toUpperCase() if you want to perform a case-sensitive search.

Change tr[i].getElementsByTagName('td')[0] to [1] if you want to search for "Country" (index 1) instead of "Name" (index 0).



-----------------------------------------------------------------------------------

Card Flip with Text

Hover over the image below:

Avatar

John Doe

Architect & Engineer

We love that guy



Custom Scrollbar Example

Note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum


----------------------------------------------------------------------------------

Style HR

Default:


Different styles of HR:




----------------------------------------------------------------------------------

Scroll Down
when the user starts to scroll the page.

----------------------------------------------------------------------------------

We have created a "progress bar" to show how far a page has been scrolled.


----------------------------------------------------------------------------------

Smooth Scroll

Section 1

Click on the link to see the "smooth" scrolling effect.

Click Me to Smooth Scroll to Section 2 Below

Note: Remove the scroll-behavior property to remove smooth scrolling.

Section 2

Click Me to Smooth Scroll to Section 1 Above

----------------------------------------------------------------------------------
Home Link 1 Link 2 Link 3

Fixed Bottom Navigation

The w3-bottom class forces the navigation bar to stay at the bottom 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..

Some text some text some text some text..


----------------------------------------------------------------------------------W3.CSS

Background Colors

The w3-color classes defines background colors for HTML elements:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.


----------------------------------------------------------------------------------
----------------------------------------------------------------------------------

D3.js Scatter-Plot


----------------------------------------------------------------------------------


----------------------------------------------------------------------------------W3.CSS Container holding contiainer

Header Option Cool design

This is the summary text, click me to expand

This is the detailed text.

We can still use markdown, but we need to take the additional step of using the parse_block_html option as described in the Mix HTML + Markdown Markup section.

You can learn more about expected usage of this approach in the GitLab UI docs though the solution we use above is specific to usage in markdown.

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)

Panels as Cards

The w3-panel class can be used to display cards:

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Panels as Cards

The w3-panel class can be used to display cards:

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

HTML div class container

HTML Tutorial » HTML div class container - size - width 75%

This is box is: <div class="container">

You can replace 75% width with 990px.

Your text here

- Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut.

================================================================

Accordions

An accordion is used to show (and hide) HTML content:

Section 1 More of that and the rest of theose

Some text, some more fine tect ans the others..

===========================================================

Active Accordions

In this example we add the w3-red class to an active accordion (when the button is clicked on and the content is opened).

Some text..

Some other text..

========================================================

MAIN first level collapsible item>>FjngDVfbFOKLorem iAnd pievv vepiv pivr pei psum dolor sit amet.vgeotgDDDvmks.**

=======================================================

First level collapsible item**Lorem ipsum dolor sit amet...**
Second level collapsible item*Sed ut perspiciatis unde omnis iste natus...*

==========================================================
First level collapsible item**Lorem ipsum dolor sit amet...**
Second level collapsible item*Sed ut perspiciatis unde omnis iste natus...*

========================================================
First level collapsible item**Lorem iAnd pievv vepiv pivr pei psum dolor sit amet.vgeotgDDD..**

=======================================================

First level collapsible item>>FjngDVfbFOKLorem iAnd pievv vepiv pivr pei psum dolor sit amet.vgeotgDDDvmks.**

=======================================================

Display other videos

======================================================
Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. -



Footer

----------------------------------------------------------------------------------

HTML Web Storage API

Click the button to see the counter increase.

Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).


----------------------------------------------------------------------------------

Take photos like a pro.
You should buy this app because lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

lorem space

lorem space

Pixels, who?

A revolution in resolution. Sharp and clear photos with the world's best photo engine, incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.



The border-style Property

Within a Container

The w3-container class is one of the most important W3.CSS classes.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.



A demonstration on how to set the border style.

INNNER CONTAINER

Bold Content Bold Content Bold Content

Bold Content

Bold Content Bold Content Bold ContentBold Content

Bold Content



It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.



Full screen video


------------------------------------------------------------------------------------

The border-style Property

Within a Container

The w3-container class is one of the most important W3.CSS classes.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to mosts.

INNNER CONTAINER

Bold Content Bold Content Bold Content

Bold Content

First level collapsible item**Lorem ipsum dolor sit amet...**
Second level collapsible item*Sed ut perspiciatis unde omnis iste natus...*

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.


---------------------------------------------------------------------

News Ticker

Breaking News

----------------------------------------------------------------------------------

Colored Tooltips

W3.CSS

Colored Tooltips

Hover over the sentence below!

London 9 million inhabitants is the capital of England.


--------------------------------------------------------------------------

The border-style Property

Within a Container

The w3-container class is one of the most important W3.CSS classes.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.


ImageX__TITLE.DROP .Shoe Me Stuff!

Notebook


A demonstration on how to set the border style.

INNNER CONTAINER

Bold Content Bold Content Bold Content

Bold Content

Bold Content Bold Content Bold ContentBold Content

Bold Content



It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.

It provides correct margins, padding, alignments, and more, to most HTML elements.


--------------------------------------------------------------------------W3.CSS

Yellow Cards

Create paper-like cards with the w3-card classes, and use a w3-color class to add a color:

w3-card

w3-card-2

w3-card-4


--------------------------------------------------------------------------Font Awesome Icons

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


-------------------------------------------------------------------------

Icon Buttons

Icon buttons:

Icon buttons with text:


-------------------------------------------------------------------------
Top

-------------------------------------------------------------------------

Size Text

Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.


-------------------------------------------------------------------------
-------------------------------------------------------------------------JSON To HTML using codebeautify.org

Weather Header

coord.loncoord.latweather.0.idweather.0.mainweather.0.descriptionweather.0.iconbasemain.tempmain.feels_likemain.temp_minmain.temp_maxmain.pressuremain.humidityvisibilitywind.speedwind.degwind.gustclouds.alldtsys.typesys.idsys.countrysys.sunrisesys.sunsettimezoneidnamecod
13935804Cloudsovercast clouds04nstations291.66291.39291.66291.66101170100001.38692.12100165071954022019346JP16506577591650705709324001851632Shuzenji200
                           

-------------------------------------------------------------------------W3.CSS

Card Content

Add containers inside the card to create different sections:

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Active Accordions

In this example we add the w3-red class to an active accordion (when the button is clicked on and the content is opened).

Some Picanha prosciutto boudin frankfurter pork fatback sirloin chislic ham hock. Turkey boudin ground round cupim flank ham prosciutto kevin pork chop rump bresaola.


Chuck tongue sirloin, rump buffalo hamburger venison bacon ham. Tongue beef turducken salami pork chop tri-tip ribeye chicken burgdoggen beef ribs. other text..


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


JSON To HTML using codebeautify.org

Weather Header

weather.0.mainweather.0.descriptionmain.temp_minmain.temp_maxmain.humidity
Cloudsovercast clouds291.66101170
     

BIGER TEXT.


2nd sklobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 3rd dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


Hello W3.CSS LayTurkey porchetta rump spare ribs, bresaola jowl drumstick leberkas. Jerky buffalo shank ham hock. Jerky spare ribs prosciutto, bresaola chislic bacon capicola pork loin jowl shank pancetta biltong pastrami meatball. Venison pork loin meatloaf picanha. Cow ribeye pastrami pork chop. Pork kielbasa chicken strip steak.out.

Sirloin cupim ball tip fatback ground round. Salami alcatra pork loin, sausage beef ribs shoulder short loin capicola pork belly pork chop. Chuck shank ground round biltong, fatback jowl doner strip steak ball tip. Shank pastrami jowl meatball chislic sirloin strip steak ham hock pork loin biltong pig flank kevin.

Different type of Dividers

Solid


Rounded



About Blog Projects Contact

Hoverable Sidenav Buttons

Hover over the buttons in the left side navigation to open them.


I love you the more in that I believe you had liked me for my own sake and for nothing else

- John Keats

But man is not made for defeat. A man can be destroyed but not defeated.

- Ernest Hemingway

I have not failed. I've just found 10,000 ways that won't work.

- Thomas A. Edison



W3.CSS Container holding contiainer

Reference List Header

This is the summary text, click me to expand

This is the summary text, click me to expand
  1. First item frankfurter brisket rump cupim sirloin beef capicola
  2. Second item frankfurter brisket rump cupim sirloin beef capicola
  3. Third item frankfurter brisket rump cupim sirloin beef capicola
  4. Fourth item frankfurter brisket rump cupim sirloin beef capicola

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.


Page Title

This is an ANIMATE CSS Heading

This is a paragraph.

An animated element

An animated Pulse element

Example

Page Title

My Weater Report

My first paragraph.


W3.CSS

The w3-animate-fading class animates an element in and out (takes about 10 seconds).


Use Keyboard Arrow Keys To Go Left And Right

  1. Application UI code in Tailwind CSS

    Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

    Learn more
  2. Marketing UI design in Figma

    All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.

  3. E-Commerce UI code in Tailwind CSS

    Get started with dozens of web components and interactive elements built on top of Tailwind CSS.

This timeline component is part of a larger, open-source library of Tailwind CSS components. Learn more by going to the official Flowbite Documentation.


W3.CSS

Animated Tooltips

Hover over the sentence below!

London 9 million inhabitants is the capital of England.

London 9999 million inhabitants is the capital of England.

London 5555 million inhabitants is the capital of England.

London 77777 million inhabitants is the capital of England.




JavaScript ISO Dates


Top

Click the button to see the counter increase.


-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------