Typography

[epsilon_heading1 title= »Typograpgy Features » full_width= »0″ bgstyle= »bg-red-dark » bgcolor= » » tcolor= » » icon= »fa-bold » icolor= » » ]

[epsilon_rparagraph tcolor= » » position= »left » ]We’ve taken into account all possible typograpgy features you may require and made them as easy and pleasent to use as humanly possible![/epsilon_rparagraph]

[epsilon_hr]

[epsilon_heading2 title= »Columns » stitle= »Static and Responsive Columns » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4.jpg » ocolor= »1″ ]

[epsilon_rparagraph tcolor= » » position= »left » ]Columns that always stay the same even if you’re using a mobile or a tablet. Scroll below to see columns that adapt to different resolutions [/epsilon_rparagraph]

[epsilon_container fullscreen= »no »]

[epsilon_one_half]1/2
[epsilon_imagep url= »https://www.mir-family.fr/wp-content/uploads/2016/10/1w.jpg » pad= »half-bottom »][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_half]
[epsilon_one_half_last]1/2
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/2w.jpg » pad= »half-bottom »][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_half_last]
[epsilon_one_third]1/3
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3w.jpg » pad= »half-bottom »][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_third][epsilon_one_third]1/3
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4w.jpg » pad= »half-bottom »][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_third][epsilon_one_third_last]1/3
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/5w.jpg » pad= »half-bottom »][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_third_last]
[/epsilon_container]

[epsilon_hr]

These columns will adapt, on mobile devices they will show as rows, but on tablets they will change into columns

[epsilon_container fullscreen= »no »]

[epsilon_one_halft]1/2
[epsilon_imagep url= »https://www.mir-family.fr/wp-content/uploads/2016/10/1ww.jpg » pad= »half-bottom » ][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_halft]
[epsilon_one_halft_last]1/2
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/2ww.jpg » pad= »half-bottom » ][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_halft_last]
[epsilon_one_thirdt]1/3
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3ww.jpg » pad= »half-bottom » ][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_thirdt]
[epsilon_one_thirdt]1/3
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4ww.jpg » pad= »half-bottom » ][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_thirdt]
[epsilon_one_thirdt_last]1/3
[epsilon_imagep url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/5ww.jpg » pad= »half-bottom » ][epsilon_rparagraph tcolor= » » position= »left » ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_thirdt_last]

[/epsilon_container]

[epsilon_heading2 title= »Dropcaps » stitle= »Simple way of showing off paragraphs » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3.jpg » ocolor= »1″ ]

[epsilon_container fullscreen= »no »][epsilon_one_halft][epsilon_dropcap style= »dropcaps-1″ tcolor= » » bgcolor= » » ]Aorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_dropcap style= »dropcaps-2″ tcolor= » » bgcolor= » » ]Borem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft_last]
[epsilon_one_halft][epsilon_dropcap style= »dropcaps-3″ tcolor= »#fff » bgcolor= »#000″ ]Aorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_dropcap style= »dropcaps-4″ tcolor= »#fff » bgcolor= »#000″ ]Borem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft_last][/epsilon_container]

[epsilon_heading2 title= »Highlights » stitle= »Highlighting your text in style! » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4.jpg » ocolor= »1″ ]

[epsilon_container fullscreen= »no »][epsilon_hr]Text highlights are an extremly easy way to show something off or to make your text stand out when bold just isn’t enough![epsilon_space size= »10″ ]
[epsilon_one_halft][epsilon_highlight tcolor= »#ffffff » bgcolor= »#dd3333″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size= »10″ classes= » » ][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_highlight tcolor= »#ffffff » bgcolor= »#2980b9″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size= »10″ classes= » » ][/epsilon_one_halft_last]
[epsilon_one_halft][epsilon_highlight tcolor= »#ffffff » bgcolor= »#8e44ad » ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size= »10″ classes= » » ][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_highlight tcolor= »#ffffff » bgcolor= »#2abb67″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size= »10″ classes= » » ][/epsilon_one_halft_last]
[epsilon_one_halft][epsilon_highlight tcolor= »#ffffff » bgcolor= »#2c3e50″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size= »10″ classes= » » ][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_highlight tcolor= »#ffffff » bgcolor= »#d35400″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size= »10″ classes= » » ][/epsilon_one_halft_last]
[/epsilon_container]

[epsilon_heading2 title= »List Styles » stitle= »Ordered, unordered, nested styles » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3.jpg » ocolor= »1″ ]

[epsilon_container fullscreen= »no »]

Text highlights are an extremly easy way to show something off or to make your text stand out when bold just isn’t enough!

[epsilon_one_halft]

Unordered List

With 3 level nested elements

  • List Item 1
  • List Item 2
    • List Nested 1
    • List Nested 2
      • List Nested Nested 1
      • List Nested Nested 2
      • List Nested Nested 3
    • List Nested 3
  • List Item 3

[/epsilon_one_halft]
[epsilon_one_halft_last]

Ordered List

With 3 level nested elements

  1. List Item
  2. List Item
    1. List Nested 1
    2. List Nested 2
      1. List Nested Nested 1
      2. List Nested Nested 2
      3. List Nested Nested 3
    3. List Nested 3
  3. List Item

[/epsilon_one_halft_last]
[/epsilon_container]

[epsilon_heading2 title= »Tables » stitle= »Classic tables » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/6.jpg » ocolor= »1″ ]

And it’s pure CSS3! That means just fill in the data, and the table expands to fit the size you need!

[epsilon_table cols= »#,First Name, Last Name, Username » data= »1, Filip, Stefansson, filipstefansson, 2, Victor, Meyer, Pudge, 3, Mans, Ketola-Backe, mossboll » ][/epsilon_table]

[epsilon_heading2 title= »Blockquotes » stitle= »User reviews done with style » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4.jpg » ocolor= »1″ ]

We’ve included a few variations of blockquotes to aid you with whatever you require in your future project. Check them out below!

[epsilon_qtslider exclude= » » auto= »true » auto_time= »5000″ loop= »true » hover= »true » nav= »true » orderby= »ID » order= »asc » ]

[epsilon_space size= »25″ ]

[epsilon_heading2 title= »Heading Variations » stitle= »This is heading style too! » tcolor= » » tcolor2= » » full_width= »1″ url= »http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3.jpg » ocolor= »1″ ]

[epsilon_container fullscreen= »no »]

[epsilon_one_thirdt][epsilon_heading1 title= »Demo 1″ full_width= »0″ bgstyle= »bg-red-dark » bgcolor= » » tcolor= » » icon= »fa-cogs » icolor= » » ][epsilon_rparagraph tcolor= » » position= »left » ]Headings with clickable top columns and differnent colors for lines and icon backgrounds.[/epsilon_rparagraph][/epsilon_one_thirdt]
[epsilon_one_thirdt][epsilon_heading4 title= »Demo 2″ stitle= »Larger center headings for even more information can be added as well! » full_width= »0″ bgstyle= »bg-magenta-light » bgcolor= » » tcolor= » » ][/epsilon_one_thirdt]
[epsilon_one_thirdt_last][epsilon_heading5 title= »Demo 3″ stitle= »Maybe incorporate an icon as well? Makes it even better! » full_width= »0″ bgstyle= »bg-green-dark » bgcolor= » » tcolor= » » icon= »fa-cogs » icolor= » » ][/epsilon_one_thirdt_last]

[/epsilon_container]

 

Envoi
User Review
0 (0 votes)