skip to Main Content

h1 Overskrift

Manchet h6: Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse.

Brødtekst p: I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange.

h2 Mellemrubrik

Hvis det er træet til dit bord der får dig op, er det snarere varmen over de andre. Selv om hun har sat alt mere frem, og derfor ikke længere kan betragtes som den glade giver, er det en nem sammenstilling, som bærer ved i lang tid. Det går der så nogle timer ud, hvor det er indlysende, at virkeligheden bliver tydelig istandsættelse. Det er opmuntrende og link a, at det er dampet af kurset i morgen. Der indgives hvert år enorme strenge af blade af større eller mindre tilsnit.

HTML



<div class=&quot;maxbredde&quot;>


<h1><del>h1</del> Overskrift</h1>




<h6><del>Manchet h6:</del> Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse.</h6>


<del>Brødtekst p:</del> I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange.


<h2><del>h2</del> Mellemrubrik</h2>


Hvis det er træet til dit bord der får dig op, er det snarere varmen over de andre. Selv om hun har sat alt mere frem, og derfor ikke længere kan betragtes som den glade giver, er det en nem sammenstilling, som bærer ved i lang tid. Det går der så nogle timer ud, hvor det er indlysende, at virkeligheden bliver tydelig istandsættelse. Det er opmuntrende og <a href=&quot;#&quot;>link a</a>, at det er dampet af kurset i morgen. Der indgives hvert år enorme strenge af blade af større eller mindre tilsnit.
</div>





CSS

/*--------------------------------
 GRUNDLÆGGENDE TYPOGRAFI
--------------------------------*/ 

body {font-size: 16px;}
h1, h2, h3, h4, h5, h6, p, ol, li{
 padding: 0;
 margin: 0;
 }

p{ padding-bottom:1em;}

h1{
 font-weight: 200;
 font-size: 3.2em;
 letter-spacing: 1px;
 color: darkgrey;
 text-align: center;
 }

h2{
 font-family: 'Vollkorn', serif;
 font-size: 20px;
 color: crimson;
 font-weight: 500;
 margin-top: 0.5em;
 }

h6{
 font: 500 1.3em/1.3em 'Vollkorn', serif;
 margin:6px 0 1em;
 text-align: center;
 }

a{color: Teal;}             /*Link*/
a:hover{color: #20B2AA;}

del{
    font-weight: 900;
    text-decoration: none;
    color: black;
 }

/*--------------------------------
 MAX BREDDE PÅ SPALTE
--------------------------------*/ 
.maxbredde{
    max-width: 760px;
    margin: 0px auto;
    }

HTML

<div class="flexcenter knap"><a href="#">Centreret tekst</a></div>

CSS

/*--------------------------------
 CENTRER HORISONTALT OG VERTIKALT
--------------------------------*/ 
.flexcenter{
 min-height: 200px;
 background-color: crimson;
 margin:1em 0;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox;  /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Chrome */
 display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
 justify-content: center;
 align-items: center;
 }

/*--------------------------------
 KNAP
--------------------------------*/ 
.knap a{
 font-size: 1.8em;
 color: white;
 border: 1px solid white;
 border-radius: 2px;
 padding: 0.1em 1em;
 text-transform: uppercase;
}
.knap a:hover{
 opacity:0.6;
 text-decoration: none;
}

WP-framework

Tekst over baggrundsbillede

HTML

<div class="bg-billede">
<img class="bg-billede-skjul" src="http://webitricerne.dk/wp/wp-content/uploads/2014/09/WP-framework.png" alt="WP-framework" width="960" height="525" />
<h3>Tekst over baggrundsbillede</h3>
</div>

CSS

/*--------------------------------
 BAGGRUNDSBILLEDE
--------------------------------*/ 
.bg-billede{
    position: relative;
    background-image: url('http://webitricerne.dk/wp/wp-content/uploads/2014/09/WP-framework.png');
     background-repeat: no-repeat;
     background-size: contain;
     
 }

.bg-billede h3{
     position: absolute;
     top: 15%;
     font-size: 50px;
     text-align: center;
     display: inline-block;
     left: 0; 
     width: 100%;
     z-index: 999;
     margin-bottom: 0px;
 }
 
 .bg-billede-skjul{
     visibility: hidden;
 }

Inline-styling:

20. februar, 2015 Webitricerne

HTML

<div style="border: 1px solid crimson; padding: 15px;">

Inline-styling:
<p style="border-top: 1px dashed #70673B; border-bottom: 1px dashed #70673B; font-size: 13px; margin: 15px 0px; padding: 3px; text-transform: uppercase; color: #bfb585;">20. februar, 2015 <a style="color: #800000;" href="#">Webitricerne</a></span></p>

</div>

Inline-styling:

20. februar, 2015 Webitricerne

Inline-styling:

SKYGGE

HTML

<div style="border: 1px solid crimson; padding: 15px;">

Inline-styling:
<p style="text-align: center; font-size: 60px; text-shadow: 2px 2px 18px rgba(0,0,0,0.8); color: #ffffff;">SKYGGE</p>

</div>

Inline-styling:

Her er en tekst med grøn "border" til venstre.
Lorem ipsum osv.

HTML

<div style="border: 1px solid crimson; padding: 15px;">

Inline-styling:
<p style="border-left: 10px solid yellowgreen; padding-left: 10px;">Her er en tekst med grøn "border" til venstre.
Lorem ipsum osv.</p>

</div>
  • Linje 1
  • linje2
  • Linje 3

HTML

<div class="minliste">
<ul>
 <li>Linje 1</li>
 <li>linje2</li>
 <li>Linje 3</li>
</ul>
</div>

CSS

/*--------------------------------
 LISTE
--------------------------------*/
.minliste, .minliste li {
   font-family: 'Vollkorn', serif;
   padding: 0;
   margin: 0;
   list-style: none;
   }

.minliste li {
   margin: 1em 0 1em -0.8em;
 }

.minliste li:before {
   content: '\f054'; /* fa-chevron-right */
   font-family: 'FontAwesome';
   float: left;
   margin-left: -1.1em;
   color: crimson;
   }

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

responsive-design-breakpoints

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

responsive-design-breakpoints

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

o

Back To Top
Search