LIVE DEMO - WEBSICO

.WS_PAGE_END {} .wstextarea_Button a { } .wstextarea_Button a:hover, .wstextarea_Button a.hover { } .wstextarea_Button { text-align: center; line-height: 1em; } .wsstitle_Title { font-family: Verdana,Geneva,sans-serif; font-weight: bold; font-variant: normal; letter-spacing: 0.05em; border-width: 0px; text-transform: uppercase; font-size: 3em; } .wstextarea_Paragraph { font-size: 1.2em; } .wsstitle_Title-02 { font-family: Verdana,Geneva,sans-serif; font-variant: normal; letter-spacing: 0.05em; border-width: 0px; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 2.5em; } .wsimage_Center { margin-left: auto; margin-right: auto; } .wstextarea_Paragraph-02 { text-align: center; background-color: transparent; padding-right: 40px; padding-left: 40px; padding-bottom: 40px; } .wstextarea_Button-02 a { text-decoration: none; color: #FFFFFF; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-radius: 2px; background-color: #FF1744; } .wstextarea_Button-02 a:hover, .wstextarea_Button-02 a.hover { color: #FFFFFF; background-color: #FF0000; } .wstextarea_Button-02 { font-size: 1.2em; text-transform: uppercase; margin-top: 20px; margin-bottom: 20px; } .wstextarea_Button-03 a { text-decoration: none; color: #FFFFFF; background-color: #00ACED; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-radius: 2px; } .wstextarea_Button-03 a:hover, .wstextarea_Button-03 a.hover { background-color: #0078B6; color: #FFFFFF; } .wstextarea_Button-03 { font-size: 1.2em; text-transform: uppercase; margin-top: 20px; margin-bottom: 20px; text-align: center; } .wscontainer_Container-Fluid { background-color: #DFDFDF; } .wscontainer_Container { max-width: 1280px; margin-left: auto; margin-right: auto; border-width: 0px; padding-top: 20px; padding-bottom: 20px; } .wsstitle_PageTitle { font-family: Verdana,Geneva,sans-serif; font-variant: normal; text-transform: none; margin-bottom: 5px; padding-bottom: 5px; margin-left: 0px; margin-top: 5px; padding-top: 5px; letter-spacing: 0.02em; font-weight: normal; color: #FF0000; border-bottom-style: dotted; border-bottom-color: #212D39; line-height: 1.3em; border-width: 0px; font-size: 2em; } .wsimage_Default { margin: 20px; } .wstextarea_Paragraph a { color: #0078B6; } .wstextarea_Paragraph a:hover, .wstextarea_Paragraph a.hover { background-color: #FF0000; } .wstextarea_Paragraph-02 a { background-color: transparent; color: #FFFFFF; } .wstextarea_Paragraph-02 a:hover, .wstextarea_Paragraph-02 a.hover { background-color: transparent; } .wstextarea_Button a:visited { } .wstextarea_Button a:active { } .wsstitle_Footer { color: #fff; font-variant: normal; text-transform: uppercase; border-width: 0px; font-size: 1.5em; letter-spacing: 0.05em; } .wstextarea_Footer { font-size: 1.2em; font-weight: bold; } .wstextarea_FooterNews { font-size: 1.2em; font-weight: normal; color: #FFFFFF; border-bottom-width: 1px; border-bottom-color: #647D87; padding-bottom: 15px; margin-right: 30px; } .wstextarea_FooterNews a { text-decoration: none; font-weight: normal; background-color: transparent; color: #FFFFFF; } .wstextarea_FooterNews a:hover, .wstextarea_FooterNews a.hover { background-color: transparent; color: #FF1744; } .wsimage_Footer a:hover, .wsimage_Footer a.hover { background-color: #FF1744; } .wsimage_Footer { float: none; margin-left: 0; margin-right: auto; } .wscontainer_Footer { padding: 50px; border-width: 0px; color: #DFDFDF; background-color: #212D39; } .wscontainer_Button { border-width: 0px; border-bottom-width: 4px; background-color: #FF1744; color: #FFFFFF; font-weight: bold; text-transform: uppercase; } .wscontainer_Button[data-subclass=block_link] { border-bottom-width: 4px; text-decoration: none; color: #FFFFFF; font-size: 1.5em; padding-top: 5px; padding-bottom: 5px; background-color: #FFCC00; border-bottom-color: #FD9F00; } .wscontainer_Button[data-subclass=block_link]:hover, .wscontainer_Button[data-subclass=block_link].hover { color: #212D39; background-color: #FD9F00; } .wscontainer_CTA { background-color: #323E4E; color: #FFFFFF; } .wstextarea_CTA-Top { font-weight: bold; margin-bottom: 0px; font-size: 2em; line-height: 1.1em; } .wstextarea_CTA-Btm { font-weight: normal; line-height: 1em; margin-top: 0px; font-size: 2em; color: #FFCC00; } .wstextarea_Paragraph-Order a { color: #0078B6; } .wstextarea_Paragraph-Order a:hover, .wstextarea_Paragraph-Order a.hover { background-color: #FF0000; } .wstextarea_Paragraph-Order { font-size: 1.2em; border-color: #0078B6; border-width: 0px; padding: 10px; background-color: #F5F5F5; } .wscontainer_Button-02[data-subclass=block_link] { border-bottom-width: 4px; text-decoration: none; color: #FFFFFF; font-size: 1.5em; background-color: #00ACED; border-bottom-color: #0078B6; max-width: 250px; margin-left: auto; margin-right: auto; padding: 5px; } .wscontainer_Button-02[data-subclass=block_link]:hover, .wscontainer_Button-02[data-subclass=block_link].hover { background-color: #0078B6; color: #FFFFFF; } .wsstitle_Title-03 { font-variant: normal; letter-spacing: 0.05em; border-width: 0px; text-transform: uppercase; font-family: Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 2em; line-height: 1em; margin-bottom: 5px; margin-top: 35px; } .wscontainer_01 { border-color: #EFEFEF; border-width: 3px; } .wsimage_01 { border-width: 5px; border-color: #DFDFDF; padding: 10px; } .wstextarea_Paragraph-Order2 a { color: #0078B6; } .wstextarea_Paragraph-Order2 a:hover, .wstextarea_Paragraph-Order2 a.hover { background-color: #FF0000; } .wstextarea_Paragraph-Order2 { font-size: 1.2em; border-color: #0078B6; border-width: 0px; padding: 10px; } .wscontainer_02 { border-width: 3px; border-color: #FD9F00; } .id_Z058aee6ab26584 { background-color: #DFDFDF; border-bottom-width: 3px; border-bottom-color: #FD9F00; } .id_Z158b993bd03d85 { width: 20%; } .id_Z258b993bd03dd0 { width: 70%; } .id_Z058ca3f6ab66f3 { margin-left: auto; margin-right: 0; border-width: 0px; max-width: 890px; } .id_Y058b9672dc60af { font-size: 1.8em; font-weight: bold; line-height: 1em; }.id_Z158b99e3525815 { width: 40%; } .id_Z158b9955ae5e6a { width: 70%; } .id_Z1592d1aa248ce3 { width: 15%; }.id_Z3458aee5a7007f6 { width: 33.3%; } .id_Z3958aee5a700911 { width: 33.3%; } .id_Z258b953d9c9aab { width: 79.880%; } .id_Z358b953d351bdc { width: 40%; } .id_Y5158aee5a700bb8 { text-align: center; font-weight: bold; font-size: 1.5em; } .id_Z5358aee5a700c2a { width: 25%; } .id_Z5658aee5a700cd5 { width: 25%; } .id_Z6258aee5a700e29 { width: 25%; } .id_Z2558aee5a7005f7 { width: 30%; } .id_Z2758aee5a700668 { width: 75%; } .id_Z258b99db42b978 { width: 25%; } .id_Z558b99db42ba22 { width: 35%; } .id_Z1058b99db42bb40 { width: 25%; } .id_Z1358b99db42bbea { width: 35%; } .id_Z1858b99db42bd06 { width: 25%; } .id_Z2158b99db42bdb1 { width: 35%; } .id_Z2958b99db42bf77 { width: 35%; } .id_Z258b9470decbee { width: 25%; } .id_Z358b9470decc39 { width: 25%; } .id_Z458b947ff51459 { background-color: transparent; color: #647D87; border-width: 0px; padding-left: 0px; margin-left: 0px; } .id_Z258b94806d7173 { width: 75%; } .id_Y058b947ff51371 .wssinput { background-color: #404345; border-style: solid; border-width: 0px; color: #FFFFFF; padding-bottom: 12px; padding-top: 12px; } .id_Y058b947ff51371 .wsslabel { font-weight: bold; font-size: 1.2em; margin-bottom: 15px; color: #FFFFFF; } .id_Y058b947ff51371 { margin-right: 0px; padding-right: 0px; } .id_Y058b94806d6c63 .wssinput { background-color: #191B1C; text-transform: uppercase; font-weight: bold; font-size: 1.4em; border-width: 0px; border-style: solid; color: #FFFFFF; padding-top: 10px; padding-bottom: 10px; } .id_Y058b94806d6c63 { margin: 0px; padding: 0px; margin-top: 45px; } .id_Y058b94806d6c63 .wssinput:hover, .id_Y058b94806d6c63 .wssinput.hover { background-color: #FF1744; }

Pour un aperçu des capacités de WEBSICO et de sa facilité d'utilisation, à vous de jouer sur cette page!

A vous de jouer !

Toutes les opérations se font sans ordre préétabli :

Repérez la barre d'outils de la page (en haut), la barre d'ajout d'éléments (à gauche) et les différents éléments de cette page en les survolant.

Affichez la grille système; elle est construite automatiquement au fur et à mesure du déplacement des éléments et vous permet de visualiser leur positionnement.

Déplacez n'importe quels éléments par glisser-déposer (drag'n drop) n'importe où dans la page et déposez-les sur une barre bleue ou une barre rouge.

Créez de nouveaux éléments en les faisant glisser depuis la barre des éléments vers l'emplacement souhaité et adaptez leur contenu et leur apparence.

Cliquez sur le "i" de chaque interface pour accéder à la documentation en ligne sans quitter la page en cours.

Cliquez sur des éléments et modifiez leur contenu et leur style.

Réduisez la fenêtre de votre navigateur pour constater l'adaptabilité automatique à toutes les tailles d'écran.

Et encore plus, selon vos envies...

Title

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

Button

Title

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

Button

Title

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

Button

Unde Rufinus ea tempestate praefectus praetorio

Quam ob causam annonae

Button action

Cliquez sur les images pour accéder à la galerie.

Title

Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

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

Title

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

Title

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

Title

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

à propos

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

Restons connecté

Derniers articles

Vivamus lacus libero
Date 01, 2017

Inscrivez-vous à la newsletter

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