Web Design Toolkit

H2 – Ambitioni dedisse scripsisse iudicaretur.

H3 – Sed haec quis possit intrepidus aestimare tellus.

H4 – Mercedem aut nummos unde unde extricat, amaras.

H5 – Lorem ipsum dolor sit amet, consectetur adipisici elit.
H6 – Cum ceteris in veneratione tui montes, nascetur mus.

 

h1,h2,h3,h4,h5,h6{font-family: Helvetica, Arial, sans-serif!important;line-height:1!important;text-transform:uppercase;font-weight:normal;}

h1{font-size:3.000em;margin-bottom:0.438em;}
h2{font-size:2.500em;margin-bottom:0.375em;}
h3{font-size:2.000em;margin-bottom:0.313em;}
h4{font-size:1.500em;margin-bottom:0.313em;}
h5{font-size:1.250em;margin-bottom:0.313em;}
h6{font-size:1.000em;margin-bottom:0.313em;}

 

Simple paragraphe – Hi omnes lingua, institutis, legibus inter se differunt. Quisque ut dolor gravida, placerat libero vel, euismod. Praeterea iter est quasdam res quas ex communi. Tityre, tu patulae recubans sub tegmine fagi dolor. Cum sociis natoque penatibus et magnis dis parturient. Phasellus laoreet lorem vel dolor tempus vehicula.

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quam diu etiam furor iste tuus nos eludet? Quid securi etiam tamquam eu fugiat nulla pariatur. Inmensae subtilitatis, obscuris et malesuada fames. Hi omnes lingua, institutis, legibus inter se differunt.

Inmensae subtilitatis, obscuris et malesuada fames. Nec dubitamus multa iter quae et nos invenerat. Pellentesque habitant morbi tristique senectus et netus. Nihil hic munitissimus habendi senatus locus, nihil horum? Quae vero auctorem tractata ab fiducia dicuntur. Excepteur sint obcaecat cupiditat non proident culpa.

Tityre, tu patulae recubans sub tegmine fagi dolor. Fabio vel iudice vincam, sunt in culpa qui officia. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Pellentesque habitant morbi tristique senectus et netus. Tu quoque, Brute, fili mi, nihil timor populi, nihil!

Nec dubitamus multa iter quae et nos invenerat. Quisque ut dolor gravida, placerat libero vel, euismod. Ut enim ad minim veniam, quis nostrud exercitation. Sed haec quis possit intrepidus aestimare tellus.

Tityre, tu patulae recubans sub tegmine fagi dolor. Non equidem invideo, miror magis posuere velit aliquet. Quo usque tandem abutere, Catilina, patientia nostra? Me non paenitet nullum festiviorem excogitasse ad hoc. Ut enim ad minim veniam, quis nostrud exercitation. Cum sociis natoque penatibus et magnis dis parturient.

‟ Letterpress-black class

.letterpress-black p{
    font-size:2.5em;
    font-family: Helvetica, Arial, sans-serif!important;
    font-weight:700!important;
    padding:4%!important;
    line-height:1;
    letter-spacing: 0px;
    color: #000;
    background-color: #2d2d2d;
    text-transform: uppercase;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;   
    background: -moz-linear-gradient(top,  #2d2d2d 0%, #202020 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #2d2d2d 0%,#202020 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #2d2d2d 0%,#202020 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#202020',GradientType=0 ); /* IE6-9 */
}

‟ Letterpress-light class

.letterpress-light p{
    font-size:2.5em;
    font-family: Helvetica, Arial, sans-serif!important;
    font-weight:700!important;
    padding:4%!important;
    line-height:1;
    text-transform: uppercase;
    letter-spacing: 0px;
    background: #999;
    color: transparent;
    text-shadow: 0px 1px 2px rgba(250,250,250,0.75);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}

Milky class

.milky{
  font-family: Helvetica, Arial, sans-serif!important;
  text-transform: uppercase;
  display: block;
  font-size: 2.5em;
  color: #f1ebe5;
  text-shadow: 0 5px 5px #c4b59d, 0px -2px 1px #fff;
  font-weight: 700!important;
  background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
  padding:4%;
  text-align:center;
}
.milky p::before {
    content: "^";
    display: inline-block;
    opacity: 1;
    margin: 0 0.2em;
    font-size: 1.125em;
    -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
    text-shadow: -5px 0 5px #c4b59d, 0px -2px 1px #fff;
}
.milky p::after {
    content: "^";
    display: inline-block;
    opacity: 1;
    margin: 0 0.2em;
    font-size: 1.125em;
    -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
    text-shadow: 5px 0 5px #c4b59d, 0px -2px 1px #fff;
}

Garamond class

.garamond p{
  font-family: 'EB Garamond', serif;
  font-size: 2.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  font-style:normal;
  padding-top: 0.1em;
  text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.1);
  padding:4%!important;
  text-align: center;
  }
  .garamond p::before, .garamond p::after {
  content: "§";
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
    opacity: 1;
  margin: 0 0.6em;
  font-size: 0.75em;
  text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.1);
}

Title + brace


Title + black brace


Title + yellow brace


‟ Unordered & Ordered Lists

  • Non equidem invideo, miror magis posuere velit aliquet.
  • Praeterea iter est quasdam res quas ex communi.
  • Ut enim ad minim veniam, quis nostrud exercitation.
  • Tu quoque, Brute, fili mi, nihil timor populi, nihil!
  1. Non equidem invideo, miror magis posuere velit aliquet.
  2. Praeterea iter est quasdam res quas ex communi.
  3. Ut enim ad minim veniam, quis nostrud exercitation.
  4. Tu quoque, Brute, fili mi, nihil timor populi, nihil!

‟ Hyphenator & Justify

Cum sociis natoque penatibus et magnis dis parturient. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. A communi observantia non est recedendum. Plura mihi bona sunt, inclinet, amari petere vellent. Quae vero auctorem tractata ab fiducia dicuntur.
Donec sed odio operae, eu vulputate felis rhoncus. Salutantibus vitae elit libero, a pharetra augue. Unam incolunt Belgae, aliam Aquitani, tertiam. Paullum deliquit, ponderibus modulisque suis ratio utitur. Integer legentibus erat a ante historiarum dapibus. Contra legem facit qui id facit quod lex prohibet. Ab illo tempore, ab est sed immemorabili. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Qui ipsorum lingua Celtae, nostra Galli appellantur. At nos hinc posthac, sitientis piros Afros. Quam diu etiam furor iste tuus nos eludet? Sed haec quis possit intrepidus aestimare tellus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Phasellus laoreet lorem vel dolor tempus vehicula. Pellentesque habitant morbi tristique senectus et netus. Quid securi etiam tamquam eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation. Tityre, tu patulae recubans sub tegmine fagi dolor. Cras mattis iudicium purus sit amet fermentum.

Cum sociis natoque penatibus et magnis dis parturient. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. A communi observantia non est recedendum. Plura mihi bona sunt, inclinet, amari petere vellent. Quae vero auctorem tractata ab fiducia dicuntur.
Donec sed odio operae, eu vulputate felis rhoncus. Salutantibus vitae elit libero, a pharetra augue. Unam incolunt Belgae, aliam Aquitani, tertiam. Paullum deliquit, ponderibus modulisque suis ratio utitur. Integer legentibus erat a ante historiarum dapibus. Contra legem facit qui id facit quod lex prohibet.
Ab illo tempore, ab est sed immemorabili. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna.
Qui ipsorum lingua Celtae, nostra Galli appellantur. At nos hinc posthac, sitientis piros Afros. Quam diu etiam furor iste tuus nos eludet? Sed haec quis possit intrepidus aestimare tellus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
Phasellus laoreet lorem vel dolor tempus vehicula. Pellentesque habitant morbi tristique senectus et netus. Quid securi etiam tamquam eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation. Tityre, tu patulae recubans sub tegmine fagi dolor. Cras mattis iudicium purus sit amet fermentum.

‟ Columns, Icons & Buttons

Morbi odio eros.

Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Plura mihi bona sunt, inclinet, amari petere vellent.

En savoir plus

Tristique senectus.

Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Plura mihi bona sunt, inclinet, amari petere vellent.

En savoir plus

Senectus et netus.

Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Plura mihi bona sunt, inclinet, amari petere vellent.

En savoir plus