ComputerSurvive uses cookies to make sure our websites work effectively and to improve your user experience.

If you continue to use this site we will assume that you are happy with this.

FORM STYLES


 

Radio options:            
 



 
       

TABS DESIGNS

These are shortcodes with tabs:

Style 1 // class = simple-tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 

 

Style 2 // class = tabs-minimal-style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 

 

Style 3 // class = tabs-clean-style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 

 

Style 4 // class = tabs-classic-style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 

SHORTCODE:

[tabgroup id="unique id here" class="predefined styles: simple-tabs / tabs-clean-style / tabs-minimal-style / tabs-classic-style"] [tab title="Tab 1"]Tab 1 content[/tab] [tab title="Tab 2"]Tab 2 content[/tab] [tab title="Tab 3"]Tab 3 content[/tab] [/tabgroup]

Start minimized

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Sed dignissim lacinia nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Aenean quam. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.

Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Ut fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Nulla facilisi.

Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Ut eu diam at pede suscipit sodales.

TYPOGRAPHY

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H1 Tag Header

[h1]H1 Tag Header[/h1]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H2 Tag Header

[h2]H2 Tag Header[/h2]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H3 Tag Header

[h3]H3 Tag Header[/h3]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H4 Tag Header

[h4]H4 Tag Header[/h4]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H5 Tag Header
[h5]H5 Tag Header[/h5]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H6 Tag Header
[h6]H6 Tag Header[/h6]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 

HTML code wrapped in [ code ]

#pre-sample {
  font-size:12px;
  color:#ffffff;
}

 

Blockquote

In hendrerit molestie sapien, et pretium urna lobortis et. Mauris felis tortor, auctor a congue quis, interdum a arcu. Vivamus suscipit posuere accumsan. Vestibulum vitae ante nec quam volutpat convallis a vitae est. Praesent facilisis eros in quam congue eget pellentesque nunc interdum. Vestibulum dapibus, dui at pulvinar malesuada, massa purus fringilla elit, et mattis magna purus nec urna.
[blockquote] .. content here .. [/blockquote]

 

Text with highlights

Nam ipsum risus, porttitor tincidunt rhoncus (black25) quis, rhoncus non purus. Nunc tempus iaculis risus, quis posuere turpis auctor eget. Vestibulum turpis sem, rhoncus eu scelerisque (black50) condimentum, varius a leo. Vivamus congue elit quis ante semper pellentesque.

Other highlights:

Red HighlightBlue Highlight / Green Highlight /  Yellow Highlight

 

Codes:

[hlight red] Red Highlight [/hlight] [hlight blue] Blue Highlight [/hlight] [hlight green] Green Highlight [/hlight] [hlight yellow] Yellow Highlight [/hlight]

 

Image in paragraph

.shadow css classJust add .shadow class to the image. Sed lacus risus, molestie eget fermentum in, vehicula ac est. Pellentesque vestibulum nunc nec quam fermentum at venenatis sapien consectetur. Nulla ut augue nec ligula ultricies pharetra ut nec dui. Etiam egestas facilisis volutpat. Quisque non fermentum nisl. Vivamus posuere laoreet augue, eget volutpat libero accumsan vitae. Aliquam ultrices, quam sed posuere pretium, sapien libero tempus mi, sed consequat erat leo et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at vestibulum libero. Phasellus nibh leo, pharetra vel dictum eu, faucibus in nibh.

.shadow css classAenean vulputate imperdiet arcu, eget tempus elit faucibus in. Suspendisse venenatis, justo ac faucibus imperdiet, neque dui suscipit ligula, ac condimentum dui neque et est. Duis sagittis rutrum erat sed aliquet. Ut eget purus et nunc iaculis congue eu eu nibh. Aliquam ac aliquet leo. Curabitur leo urna, vulputate id vulputate id, pulvinar et leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dapibus lectus eu lorem consectetur sed porttitor ipsum congue.

Etiam egestas facilisis volutpat. Quisque non fermentum nisl. Vivamus posuere laoreet augue, eget volutpat libero accumsan vitae. Aliquam ultrices, quam sed posuere pretium, sapien libero tempus mi, sed consequat erat leo et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at vestibulum libero. Phasellus nibh leo, pharetra vel dictum eu, faucibus in nibh.

 

Lists

  • List with no class
  • List with no class
  • List with no class
  • List with no class
  • List with no class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-9 class
  • List with .list-type-9 class
  • List with .list-type-9 class
  • List with .list-type-9 class

List on 2 columns

  • List with .list-type-5 class & 2 columns
  • List with .list-type-5 class & 2 columns
  • List with .list-type-5 class & 2 columns
  • List with .list-type-5 class & 2 columns

List on 3 columns

  • List 3 columns
  • List 3 columns
  • List 3 columns
  • List 3 columns

LEFT SIDEBAR PAGE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Sed dignissim lacinia nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Aenean quam. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.

Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Ut fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Nulla facilisi.

Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Ut eu diam at pede suscipit sodales.

  • Tweets

Please add WIDGET ID!! (Reconfigure the HG Live Social Module's settings.)