Photoshop to Wordpress to Web - Teil 2 - Entwicklung

von Andreas Braun | 1 | 5747 Aufrufe

Photoshop to Wordpress Template - Teil 2 - Entwicklung

Anzeige Hier werben

1. Die Grobstruktur

Nach einigen Trial und Error Ansätzen, habe ich für mich eine Vorgehensweise erarbeitet, mit der ich in der Lage bin, auch komplizierte Layouts zu entwickeln. Die Idee des Zerlegens stammt dabei ursprünglich aus Vorlesungen der Informatik. Wir wollen versuchen, das Layout im Vorfeld sinnvoll in die einzelnen Teile aufzusplitten, die wichtigen Elemente zu extrahieren und diese dann getrennt in einer lokalen Entwicklungsumgebung (XAMPP) zu programmieren. Nachfolgend sind die extrahierten Teile meines Layouts zu sehen:

Gesamtüberblick:

Aufteilung der Seite in die drei Teile:

  • Header
  • Content
  • Footer
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Navbar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
2-Spalten Inhalt
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Social Icon Bar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Single Post Seite
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
UI Elemente
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

2. Die Feinstruktur

Anstatt einfach die HTML Struktur während des Programmierens zu entwickeln, ist es eine bessere Idee, sich vorher das soeben aufgeteile Layout noch genauer anzuschauen, und sich eine Block-Level Struktur (Div Layout) zu überlegen, die funktioniert, übersichtlich ist und möglichst simpel bleibt. Eine endlose Verschachtelung bringt uns nämlich sonst schnell in die Breduille. Für diesen Schritt ist eine gute Erfahrung im Schreiben von HTML Code von Vorteil, da sich erfahrenere Entwickler die HTML Struktur bereits hier bildlich vorstellen können.

Zerlegung des Navbar Layouts
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Zu sehen ist meine Zerlegung der Navbar in ein <nav> Element. Das Menü wird eine Unordered List und die Buttons als verschachtelte <a> (Anchor Elemente) in <li> (Listenelement)

Der Vanilla Code den ich mir überlegt habe, und der auch häufig angewandt wird für diese Art Element sieht also so aus:

 
HTML
1
2
3
4
5
6
7
8
<nav>
    <ul>
        <li><a><i>Home</i></a></li>
        <li><a><i>Tutorials</i></a></li>
        <li><a><i>About</i></a></li>
        <li><a><i>Contact</i></a></li>
    </ul>
</nav>

Ein schwieriges Element. Keine Frage. Wie baut man so ein Carousel ? Nun es gibt mehrere Ansätze, aber ich fand für meine Zwecke die Lösung über Listenelemente als "Slides" die passende. Rot umrandet sind die Teile des Carousel-Sliders, die mir bei der Konzeption eingefallen sind.

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Der Vanilla Code sieht dann so aus:

 
HTML
1
2
3
4
5
6
7
<div id="carousel">
<button style="button">Previous</button>
<button style="button">Next</button>
<ul>
<li class="slide" id="slide1">Slide content</li>...
</ul>
</div>

Farben, Schrift, Schriftgröße, Abmessungen, Styles

Um Informationen über diese Elemente eleganter zu extrahieren, bieten sich einige Plugins für Photoshop an, über das ich bereits in einem früheren Artikel berichtet habe. Bei Interesse einfach den Artikel “Photoshop to Web Pentalogie” durchlesen. Ich verzichte hier auf eine genaue Beschreibung der Techniken. Folgende Informationen habe ich mir abgespeichert:

  • Hintergrundfarben
    Dunkelblau(#306285),Hellblau(#4b84d0),Hellgrau(#f0f0f0),
    Dunkelgrau(#1a1a1a),Schwarz(#121212)
  • Schriftgrößen für H1,H2,H3,H4 usw
  • Fonts : Droid Serif und Droid Sans
  • Schriftfarben (#808080, #9920d7, #ffffff)

3. Coding Workbench

Der Begriff bedeutet, dass wir für jeden der Teile eine eigene HTML Seite erstellen. Der Vorteil ist, dass wir dadurch lokal sehr schnell arbeiten können und durch den reduzierten Code bleibt alles schön übersichtlich. Die Teile können zum Schluss entweder über den PHP Befehl <?php include()?> geladen, oder per copy-paste zusammengefügt werden. Wer noch einen Tick schneller arbeiten will, der kann sich einen "Pen" auf Codepen.io anlegen, und dort entwickeln. Der Vorteil ist, dass Änderungen im Code direkt und ohne ständiges F5 drücken im Browser angezeigt werden.

Anlegen der Workbench

Ich habe mir ein neues Projekt (einen neuen Ordner in htdocs) auf meinem Localhost erstellt (Ordnername: Workbench) und eine sehr einfache Dateistruktur aufgebaut.

  • index.html
  • style.css
  • script.js
  • jquery.js

Inhalt der index.html

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link href="font-awesome.min.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="text/javascript">
        $( document ).ready(function() {
            
        })
    </script>
</body>
</html>

Inhalt der style.css:

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/*
 *
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

Jquery Bibliothek

Um schneller mit Editor und Browser arbeiten zu können, habe ich die JQuery Bibliothek, die wir zwingend für das Projekt brauchen werden, heruntergeladen und lokal im Workbench Verzeichnis gespeichert.

Mit diesem Aufbau kann ich nun an die Entwicklung der Einzelteile gehen:

4. Entwicklung der Navigations-Leiste

Die Navleiste wird vom Header umschlossen und als <nav> Element erstellt. Die Buttons sind Anchor Tags in Listenelementen in einer Unordered List. Der Aufbau sieht dann so aus:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="header">
        <nav role='navigation' class="clearfix">
            <ul>
                <li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li>
                <li class=""><a href="#"><i class="fa fa-book"></i>Tutorials</a></li>
                <li class=""><a href="#"><i class="fa fa-user"></i>About</a></li>
                <li class=""><a href="#"><i class="fa fa-envelope"></i>Contact</a></li>
            </ul>
        </nav>
    </div>
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
#header{
  position: absolute;
  top:50px;
  width:100%;
  z-index: 2;
  min-width: 480px;
  -webkit-transition:all 0.5s;
 -o-transition:all 0.5s;
 transition:all 0.5s;
}
@media only screen
and (max-width : 1296px) {
  #header{
    top:0px;
    width:100%;
    z-index: 2;
     position: relative;
    
  }
  #header *{
    -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  }
  
}
@media only screen
and (max-width : 1024px) {
 
}

nav{
  background-color:#fff;
  max-width:1280px;
  margin:0px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-width: 507px;
}
nav ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
nav ul li{
  float:left;
  border-right:1px solid #f6f0ec;
}
nav ul li:last-child{
  border-right:none;
  vertical-align: middle;  
}
nav ul li a{
  padding:15px 25px;
  display:inline-block;
  font-family: 'Droid Sans', sans-serif;
  font-size:15px;
  color:#868686;
  text-decoration: none;
}

nav ul li a i{
  margin-right:10px;

}
nav ul li span{
  padding:13px 25px;
  display:inline-block;
   font-family: 'Droid Sans', sans-serif;
    color:#868686;
    font-size:15px;
}
nav ul li span input{
  border:1px solid transparent;
  width:30px;
}
nav ul li span input:focus{
  border:1px solid #f6f0ec;
  width:200px;
}

Ergebnis im Browser

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Ihr könnt die beiden Codeblöcke jeweils in die index.html und die style.css kopieren und solltet dann das gleiche Ergebnis erhalten. Die Navbar ist auch bereits mit Media Queries ausgestattet, damit ein responsives Layout erreicht wird. Verkleinert ihr das Browserfenster, wird sich die Navigations-Leiste anpassen.

Nun wirds etwas fortgeschrittener. Für den Carousel Slider habe ich ein Plugin geschrieben, damit ich den das Carousel sowohl für Bilder als auch für den “Recent-Posts” Bereich verwenden kann.

Der HTML Code referenziert bei Bildern auf Dateien, die ihr nicht haben werdet. Ihr müsst also Slider Bilder im Format 1280x720px auf eurem System einbinden. Andernfalls erhaltet ihr nur die bekannten "Bild nicht gefunden" Platzhalter.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="pageblock clearfix imgwall">
            <a href="#" id="prev" class="csbtn_prev"></a>
            <a href="#" id="next" class="csbtn_next"></a>
        <div class="carousel" id="imgcarousel">

            <ul id="slides">
                <li class="slide" id="slide1">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                        <button class="actionbutton">Enter the trip</button>
                    </div>
                    <img src="slide1.png" alt="" />
                </li>
                <li class="slide" id="slide2">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide2.png" alt="" />
                </li>
                <li class="slide" id="slide3">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide3.png" alt="" />
                </li>
            </ul>
        </div>
    </div>

<script type="text/javascript">

$( document ).ready(function() {
    $('#imgcarousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight: 720,
        slide_by: 1,
        showSlides: 1,
        scaleProp: 'true',
    }); 
});
</script>
 
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
.imgwall{
/* Die URL hier durch ein Hintergrundbild eurer Wahl ersetzen*/
 background:url(slider_bg.jpg) 0 0;
}
#latest-posts-title{
  float:left;
  margin-right:30px;
}
.carousel-parent{
  margin-left:50px;
  position:relative;
  margin-right:50px;
  overflow:hidden;

}
#recent-posts-ticker-list p{
  width:95%;
}
.carousel{
 position:relative;
 overflow:hidden; 
 margin:0 auto;
}
.carousel img{
  max-width: 100%;
  max-height: 100%;
}
.carousel ul {
  list-style-type: none;
  padding:0;
  overflow: hidden;
  position:absolute;
  margin: 0;
  padding: 0;
}
.carousel ul li{
  float:left; 
  position: relative
}
.slideText{
  width:30%;
  height:50%;
  position: absolute;
  z-index: 2;
  color:#fff;
  font-weight:normal;
  top: 16%;
}
.slideText h2{
  font-size: 48px
}

@media only screen
and (max-width : 1296px) {
  .slideText{top:0;}
}

#prev:hover, #next:hover{
  width:90px; 
}

#prev {
/* Die URL hier durch ein Linkspfeil Bild mit transparentem Hintergrund der Größe 61x107px eurer Wahl ersetzen*/   
  background:url(left.png) 0 0px no-repeat; 
  position:absolute;
  left:0;
  top: 50%;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color:rgba(0,0,0,0.5);
  background-position:center center;
  z-index: 5;
  margin-top: -53px;
   display:block; 
  width:61px; 
  height:107px;
  text-indent:-999em;
  outline:0;
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
}
#next {
/* Die URL hier durch ein Rechtspfeil Bild mit transparentem Hintergrund der Größe 61x107px eurer Wahl ersetzen*/  
  background:url(right.png) 0 0 no-repeat; 
  position:absolute;
  right:0;
  top: 50%;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color:rgba(0,0,0,0.5);
  background-position:center center;
  z-index: 5;
  margin-top: -53px;
  display:block; 
  width:61px; 
  height:107px;
  text-indent:-999em;
  outline:0;
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
}

Dies ist das Jquery Plugin listCarousel , das ich geschrieben habe. Speichert den Code als jQuery.fn.listCarousel.js im Workbench Verzeichnis und bindet es im Head Bereich der Index.html mit <script src="jQuery.fn.listCarousel.js"></script> nach dem Eintrag für jquery ein.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
(function($){
    $.fn.listCarousel = function(options) {
         
        var
          defaults = {
              maxcarouselWidth: 1280,
              maxcarouselHeight: 720,
              slide_by: 1,
              showSlides: 3,
              scaleProp: 'false',
          },
          settings = $.extend({}, defaults, options);
           
          this.each(function() {
              var $this = $(this);
              //Anzahl der Slides
              var slides_count = $this.find('li').length;
              var slides = $this.find('li');
              var firstSlide = $this.find('li:first');
              var lastSlide = $this.find('li:last');
              var slidesUL = $this.find('ul');
              var prevBtn = $this.siblings('.csbtn_prev');
              var nextBtn = $this.siblings('.csbtn_next');
            

              $this.css('max-height', settings.maxcarouselHeight);
              $this.css('max-width', settings.maxcarouselWidth);
              var prop_scale_factor = settings.maxcarouselHeight/settings.maxcarouselWidth;
         
              currentCarouselWidth = $this.outerWidth();
              currentCarouselHeight = currentCarouselWidth*prop_scale_factor;
               if(settings.scaleProp === 'true'){
                 $this.css('height',currentCarouselHeight +"px");
                 slides.css("height", currentCarouselHeight +"px");
                 slidesUL.css("height", currentCarouselHeight);
                 }else{
                   $this.css('height',settings.maxcarouselHeight +"px");
                   slides.css("height", settings.maxcarouselHeight +"px");
                   slidesUL.css("height", settings.maxcarouselHeight);
                 }

             //Slides auf Breite des Wrappers skalieren
              slides.css("width", currentCarouselWidth/settings.showSlides +"px");
              //Setzen der UL Breite beim Site Load
              slidesUL.css("width", currentCarouselWidth * slides_count+"px");
              //Den letzten Slide vor den Ersten setzen
              firstSlide.before(lastSlide);
               //Die UL nach links verschieben um einen Slide
              slidesUL.css("left", currentCarouselWidth * (-1)+"px");

              
              //Previous Button Click
              prevBtn.click(function() {
                  currentCarouselWidth = $this.outerWidth();
                  firstSlide = $this.find('li:first');
                  lastSlide = $this.find('li:last');
                  var left_indent = parseInt(slidesUL.css('left')) + (currentCarouselWidth/settings.showSlides)*settings.slide_by;
                  slidesUL.animate({'left' : left_indent}, 200,function(){
                      firstSlide.before(lastSlide);
                      slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                  });
                  return false;
              });

            //Next Button Click
            nextBtn.click(function() {
                  firstSlide = $this.find('li:first');
                  lastSlide = $this.find('li:last');
                  currentCarouselWidth = $this.outerWidth();
                  var left_indent = parseInt(slidesUL.css('left')) - (currentCarouselWidth/settings.showSlides)*settings.slide_by;
                    slidesUL.animate({'left' : left_indent}, 200,function(){
                    lastSlide.after(firstSlide);
                    slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                });
                return false;
            });

            $(window).resize(function(){
                currentCarouselWidth = $this.outerWidth();
                if(settings.scaleProp === 'true'){
                  currentCarouselHeight = currentCarouselWidth*prop_scale_factor;
                  $this.css('height',currentCarouselHeight +"px");
                  slides.css("height", currentCarouselHeight +"px");
                  slidesUL.css("height", currentCarouselHeight);}
                //Slides auf Breite des Wrappers skalieren
                  slides.css("width", currentCarouselWidth/settings.showSlides +"px");
                  //Setzen der UL Breite beim Site Load
                  slidesUL.css("width", currentCarouselWidth * slides_count+"px");
                //Die Linksverschiebung anpassen
                slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                 });
          });
          return this;
    }
})(jQuery);

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Der Slider hat einige Optionsparameter u.a. proportionales Skalieren beim resizen des Browserfensters. Somit ist der Inhalt auch für mobile Geräte gut sichtbar, da die Bilder und die Steuerung skalieren.

Eine einfache unordered List mit ein wenig CSS Styling genügt für die Umsetzung wie im Design Layout

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div class="accent grey">
            <div class="wrapper clearfix">
                <ul id="feature_images_list">
                    <li><a href="featured/001.jpg" class="fancybox" title=""><img src="featured/001.jpg" alt=""></li></a>
                    <li><a href="featured/002.jpg" class="fancybox" title=""><img src="featured/002.jpg" alt=""></li></a>
                    <li><a href="featured/003.jpg" class="fancybox" title=""><img src="featured/003.jpg" alt=""></li></a>
                    <li><a href="featured/004.jpg" class="fancybox" title=""><img src="featured/004.jpg" alt=""></li></a>
                    <li><a href="featured/005.jpg" class="fancybox" title=""><img src="featured/005.jpg" alt=""></li></a>
                </ul>
            </div>
        </div>
<script type="text/javascript">
$( document ).ready(function() {
    $(".fancybox").fancybox({
        openEffect    : 'none',
        closeEffect    : 'none'
    });
});
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#feature_images_list{
  width:100%;
  list-style-type: none;
  height:150px
 }
 #feature_images_list li{
  display:block;
  float:left;
 }
 #feature_images_list li img{
  max-height:100%;
  max-width:100%;
 }

Javascript

Für die Großansicht der Thumbnails möchte ich einen schönen Lightbox Effekt. Daher lade ich mir das Plugin “fancybox2” herunter und integrier es in mein script. Die notwendigen Zeilen sind im HTML Code dieses Abschnitts (siehe oben) zu sehen.

Das Plugin kann hier heruntergeladen werden. Entpacken in Ordner fancybox im Hauptverzeichnis.

Im <head> der index.html diese beiden Zeilen einfügen:

<script src="fancybox/jquery.fancybox.pack.js"></script>

<link href="fancybox/jquery.fancybox.css" rel="stylesheet">

Das Ergebnis im Browser

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Beim Klick auf eines der Bilder öffnet sich wenn alles richtig gemacht wurde die Lightbox. Ihr solltet natürlich wie bereits erwähnt eigene Bilder einbinden, und die url entsprechende ändern.

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Durch die Wiederverwendung des jquery plugins “listCarousel” aus Teil 5 reduziert sich der Code auf diese Zeilen:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="accent grey">
        <div class="wrapper">
            <img src="latest_posts.png" alt="" id="latest-posts-title">
            <div class="carousel" >
                <a href="#" id="rpprev" class="csbtn_prev"></a>
                <a href="#" id="rpnext" class="csbtn_next"></a>
                <div class="carousel-parent" id="recent-post-carousel">
                <ul id="recent-posts-ticker-list">
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Needles Art released</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Mr Snuggles Art released</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #6</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #5</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #4</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #3</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #2</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #1</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
    </div>
<script type="text/javascript">

    $('#recent-post-carousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight:100,
        slide_by: 1,
        showSlides: 3,
        scaleProp: 'false',
    });
</script>
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#latest-posts-title{
  float:left;
  margin-right:30px;
}
.carousel-parent{
  margin-left:50px;
  position:relative;
  margin-right:50px;
  overflow:hidden;
}
#recent-posts-ticker-list p{
  width:95%;
}
.carousel{
 position:relative;
 overflow:hidden;
 margin:0 auto;
}
.carousel ul {
  list-style-type: none;
  padding:0;
  overflow: hidden;
  position:absolute;
  margin: 0;
  padding: 0;
}
.carousel ul li{
  float:left; 
  position: relative
}
#rpprev {
  display:block; 
  width:22px; 
  height:52px;
  background:url(latest_post_leftarrow.png) 0 0px no-repeat; 
  position:absolute;
  left:0;
  top:50%;
  margin-top:-26px;
  z-index:2;
}
#rpnext {
  display:block; 
  width:22px; 
  height:52px;    
  background:url(latest_post_nextarrow.png) 0 0px no-repeat; 
  position:absolute;
  right:0;
  top:50%;
  margin-top:-26px;
  z-index:2;
}

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

8. Entwicklung der UI Elemente

Ich verwende bei meinem Design die Webfont Schriftarten "Droid Sans" und "Droid Serif" , die man sich kostenlos auf Google Fonts herunterladen kann. Zur korrekten Einbindung bitte die Anleitung auf Google Fonts durchlesen. Ihr könnt auch mit anderen Schriftarten arbeiten, oder an dieser Stelle keine Änderungen vornehmen. Euer Ergebnis wird sich dann dementsprechend ändern.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="message" id="reminder">
        <h4>A friendly reminder</h4>
        <p>You need to be registered and logged in to comment</p>
    </div>
    
    <div class="message" id="admin">
        <h4>A note from the admin</h4>
        <p>You need to be registered and logged in to comment</p>
    </div>

    <div class="message" id="hint">
        <h4>Just a hint</h4>
        <p>You need to be registered and logged in to comment</p>
    </div>
    
    <div class="short" id="hint">
        <i class="icon-exclamation-sign icon-2x"></i> Just a short hint
    </div>
    
    <div class="short" id="tip">
        <i class="icon-star-empty icon-2x"></i> Just a short tip
    </div>

    <div class="short" id="warning">
        <i class="icon-warning-sign icon-2x"></i> Just a short warning
    </div>
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
body{
  background-color:#4b84d0;
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: url("DroidSans.ttf"); 
}

/*Message*/
.message{
  background-color: #ecf0f1;
  padding:20px;
  line-height: 25px;
  display:inline-block;
}
.message h4{
  font-size:19px;
  font-family:"Droid Sans";
}
.message p{
  color:#4e4e4e;
  font-size:15px;
  font-family:"Droid Sans";
}
.message#reminder{
  border-left:5px solid #3c60e7;
}
.message#reminder h4{
  color: #3c60e7;
}
.message#admin{
  border-left:5px solid #e74b3c;
}
.message#admin h4{
  color: #e74b3c;
}
.message#hint{
  border-left:5px solid #31be6a;
}
.message#hint h4{
  color: #31be6a;
}
/*Shorts*/
.short{
  padding:20px;
  display:inline-block;
  font-size:15px;
  font-family:"Droid Sans";
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.short#hint{
  color: #647c99;
  background-color: #d9edf6;
}
.short#tip{
  color: #5a7956;
  background-color: #e0efda;
}
.short#warning{
  color: #9c4546;
  background-color: #f2dedf;
}
[class^="icon-"]{
  vertical-align: middle;
  margin-right:5px;
}

/*Buttons*/

.actionbutton{
  border: 2px solid rgba(255,255,255,0.75);
  background-color: transparent;
  padding:15px 45px;
  cursor:pointer;
  outline: none;
  color:#fff;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.actionbutton:hover{
background-color: #fff;
color:#6B58CD;
  }

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

9. Entwicklung des 2-Spalten Inhaltsblocks

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="accent darkblue clearfix">
    <div class="wrapper">
        <div class="row">
            <div class="col2">
            <article class="clearfix">
              <h1>H1 Heading. Lorem ipsum dolor sit amet</h1>
              <h2>H2 Heading. Lorem ipsum dolor sit amet</h2>
              <h3>H3 Heading. Lorem ipsum dolor sit amet</h3>
              <h4>H4 Heading. Lorem ipsum dolor sit amet</h4>
              <h5>H5 Heading. Lorem ipsum dolor sit amet</h5>
              <h6>H6 Heading. Lorem ipsum dolor sit amet</h6>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium fugiat repellendus cupiditate cum, eligendi debitis beatae magni, impedit dolore nihil deleniti, cumque maxime doloremque in necessitatibus, commodi suscipit a obcaecati Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam corporis quam, officia ipsa recusandae <br />dignissimos explicabo eligendi iusto architecto quod sint veniam, quo sed. Eum, praesentium ex ad adipisci maxime.</p>
              <button class="actionbutton">Mehr</button>
           </article>
            </div>
       
            <div class="col2">
        <article class="clearfix">
                <h4 class="underlined">Paragraphs</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus magnam unde voluptatibus commodi sequi, eveniet! Corporis ipsam aut, dolorem maiores repudiandae aspernatur eos quis atque. Qui assumenda dicta, pariatur illum?</p></article>
        <article class="clearfix">
                <h4 class="underlined">Paragraph mit Bild ohne Text Wrap</h4><img class="text-wrap-right" src="http://placehold.it/350x150"><p class="text-wrap-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, harum accusamus iste, ipsa adipisci eum voluptate maxime saepe tenetur incidunt voluptatibus. Odit fuga sunt dolores repellendus libero ad, repellat nam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt corrupti pariatur quam deleniti ea repellat repudiandae rerum praesentium quis. Commodi earum recusandae voluptatibus non porro mollitia, quod dignissimos veniam illo. </p></article>
          <article class="clearfix">
            <h4 class="underlined">Paragraph mit Bild und Text Wrap</h4><img class="text-wrap-right" src="http://placehold.it/350x150"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, harum accusamus iste, ipsa adipisci eum voluptate maxime saepe tenetur incidunt voluptatibus. Odit fuga sunt dolores repellendus libero ad, repellat nam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt corrupti pariatur quam deleniti ea repellat repudiandae rerum praesentium quis. Commodi earum recusandae voluptatibus non porro mollitia, quod dignissimos veniam illo. </p></article>
            </div>
        </div>
    </div>
</div>
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
h1,h2,h3,h4,h5,h6{
  font-family: 'Droid Serif';
  font-weight:normal;
  margin:0px;
  margin-bottom:15px;
  padding:0;
}
h1{
  font-size:2em;
  font-weight:normal;
}
h2{
  font-size:1.7em;
  font-weight:normal;
}
h3{
  font-size:1.4em;
  font-weight:normal;
}
h4{
  font-size:1.25em;
  font-weight:normal;
}
h5{
  font-size:1.1em;
  font-weight:normal;
}
h6{
  font-size:1em;
  font-weight:normal;
}

h4.underlined{
  border-bottom:1px solid rgba(255,255,255,0.4)
}

p,a,article{
  font-family: 'Droid Sans';
  font-weight:normal;
  font-size:1em;
  line-height:1.4em;
}
article{
  margin-bottom:15px
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
.accent{
  width:100%;
  overflow:hidden;
  padding: 30px 0px 30px 0px;
}
.wrapper{
  max-width:1280px;
  margin:0 auto;
}
div.darkblue{
    display:block;
  background-color:#336699;
  color:#fff;
}

.row .col2:first-child{
  margin-right:1%;
}
.row .col2:last-child{
  margin-left:1%;
}
.col2{
  width: 49%;
  float:left;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen
and (max-width : 1024px){
  .col2{
    width: 100%;
    float:left;
  }
  .row .col2:first-child{
    margin-right:0%;
  }
  .row .col2:last-child{
    margin-left:0;
    width:100%;
  }
}
img.text-wrap-right{
  float:left;
  margin-right:10px;
}
p.text-wrap-right{
  overflow:hidden;
}
.actionbutton{
  font-family: 'Droid Sans';
  font-weight:normal;
  border: 2px solid rgba(255,255,255,0.75);
  background-color: transparent;
  padding:15px 45px;
  cursor:pointer;
  outline: none;
  color:#fff;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.actionbutton:hover{
  background-color: #fff;
  color:#6B58CD;
  }

Ergebnis im Browser:

Das Layout dieses Teils dient auch dem visualisieren von möglichen späteren Inhalten. Daher auch die Einbindung von Platzhalterbildern in den Text mit verschiedenen Umbrüchen.

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Der CSS Code wurde so angelegt, dass sich der Inhalt sauber responsive verhält und bei kleinen Bildschirmbreiten anpasst. Die Animation dabei ist mit CSS3 Transitions realisiert.

10. Entwicklung des Footers

Der vierspaltige Footer baut auf dem responsiven Layout des 2 -spaltigen Inhalts auf.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="footer">
<div class="accent darkgrey clearfix">
    <div class="wrapper">
        <div class="row">
        <section class="col4">
          <h3>Tags</h3>
          <p>Comic CG Drawing Tutorial News Video</p>
      </section>
        <section class="col4">
          <h3>Recent Comments</h3>
          <article>
            <ul >
              <li class="excerpt">Blablabal on lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quis voluptatibus temporibus dolorum ipsam beatae, architecto laudantium accusantium sapiente asperiores iure. Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi.
              </li>
               <li>Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi.
              </li>
               <li class="excerpt">Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi. consectetur adipisicing elit. Veniam, quis voluptatibus temporibus dolorum ipsam beatae, architecto laudantium accusantium sapiente asperiores iure. Nam earum doloribus magni. Qui corrupti disti
              </li>
            </ul>
          </article>
      </section>
        <section class="col4">
          <h3>Archives</h3>
          <ul>
            <li>Januar 2014</li>
            <li>Februar 2014</li>
            <li>März 2014</li>
          </ul>
      </section>
        <section class="col4">
          <h3>Recent Posts</h3>
           <article>
             <h6><b>Needles</b></h6>
             <p>Neues Artwork herausgegeben. Sonst nichts weiter.</p>
              </article>
          <article>
          <h6><b>Needles</b></h6>
          <p>Neues Artwork herausgegeben. Sonst nichts weiter.</p></article>
      </section>
    </div>  
    </div>
</div>
 
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
strong, b 
{
  font-weight: bold;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Droid Serif';
  font-weight:normal;
  margin:0px;
  padding:0;
}
h1,h2,h3,h4{
  margin-bottom:15px;
}
h1{
  font-size:2em;
  font-weight:normal;
}
h2{
  font-size:1.7em;
  font-weight:normal;
}
h3{
  font-size:1.4em;
  font-weight:normal;
}
h4{
  font-size:1.25em;
  font-weight:normal;
}
h5{
  font-size:1.1em;
  font-weight:normal;
}
h6{
  font-size:1em;
  font-weight:normal;
}

p,a,article,li{
  font-family: 'Droid Sans';
  font-weight:normal;
  font-size:1em;
  line-height:1.4em;
}
#footer li{
  border-bottom:1px solid rgba(255,255,255,.05);
  line-height:2em;
}
article, section{
  margin-bottom:15px
}
.excerpt{
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}
.accent{
  width:100%;
  overflow:hidden;
  padding: 30px 0px 30px 0px;
}
.wrapper{
  max-width:1280px;
  margin:0 auto;
}
div.darkgrey{
  display:block;
  background-color:#1a1a1a;
  color:#848484;
}

.row .col4:last-child{
  padding-left:1%;
  padding-right:0%;
  margin-right:0%;
  border: none;
}
.row .col4:first-child{
  padding-right:1%;
}
.col4{
  padding-left:1%;
  padding-right:1%;
  width: 23%;
  float:left;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.col4 h3{
  border-bottom:1px solid rgba(255,255,255,0.1);
}
@media only screen
and (max-width : 1024px){
  .col4{
    width: 48%;
    float:left;
    border:none;
  }
  .row .col4:first-child{
    margin-right:0%;
  }
  .row .col4:last-child{
    
  }
}
@media only screen
and (max-width : 480px){
  .col4{
    width: 98%;
    float:left;
    border:none;
  }
  .row .col4:first-child{
    margin-right:0%;
  }
  .row .col4:last-child{
    
  }
}
 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$( document ).ready(function() {
/*Equalize column heights*/
$.fn.equalizeHeights = function() {
  var maxHeight = this.map(function( i, e ) {
    return $( e ).height();
  }).get();
  return this.height( Math.max.apply( this, maxHeight ) );
};
$('#footer section').equalizeHeights();
});

Mit diesem kurzen Script lassen sich unterschiedlich hohe Sections im Footer auf gleiche Höhe bringen. Das ist wichtig um beim responsiven Umbruch saubere Abstände zu bekommen. Sonst schieben sich die Blöcke ineinander und es sieht unprofessionell aus.

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Beim Verkleinern auf 1024px Breite:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Und bei 480px:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

11. Entwicklung der Social Icons Bar

Die Social Icons können hier nicht besonders viel. Es sind nur etwas hübscher gestaltete Hyperlinks zu meinen diversen Profilseiten im Netz. Wenn noch Interesse besteht erweitere ich die Icons um die typischen Social Activities wie "Tweeten, Sharen, Liken usw"

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div id="socialsbar">
    <div class="wrapper">
      <ul>
  <li><a data-s="Deviantart" href="http://monkeyb07.deviantart.com" target="_blank"><i class="fa fa-deviantart fa-lg"></i></a></li>
  <li><a data-s="Dribbble"   href="https://dribbble.com/NDBraun" target="_blank"><i class="fa fa-dribbble fa-lg"></i></a></li>
  <li><a data-s="Codepen"    href="http://codepen.io/voodoocoder" target="_blank"><i class="fa fa-codepen fa-lg"></i></a></li>
  <li><a data-s="Flickr"     href="https://www.flickr.com/photos/84683288@N06/" target="_blank"><i class="fa fa-flickr fa-lg"></i></a></li>
  <li><a data-s="Github"     href="https://github.com/voodoocoder" target="_blank"><i class="fa fa-github-alt fa-lg"></i></a></li>
  <li><a data-s="Google+"    href="https://plus.google.com/u/0/+AndyBraunDE/posts" target="_blank"><i class="fa fa-google-plus fa-lg"></i></a></li>
  <li><a data-s="LinkedIn"   href="http://de.linkedin.com/pub/andy-urban/8b/824/27a/" target="_blank"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
  <li><a data-s="Pinterest"  href="http://de.pinterest.com/andreasbraunde/" target="_blank"><i class="fa fa-pinterest fa-lg"></i></a></li>
  <li><a data-s="Youtube"    href="https://www.youtube.com/user/Bifryst" target="_blank"><i class="fa fa-youtube fa-lg"></i></a></li>
  <li><a data-s="Behance"    href="https://www.behance.net/andronaut" target="_blank"><i class="fa fa-behance fa-lg"></i></a></li>
</ul> 
  </div>
</div>
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
style.cssCSSstyle.cssCSS#socialsbar{
  height:55px;
  background-color:#000;
  
}
#socialsbar ul{
  list-style-type: none;
  float:right;
}
#socialsbar ul li{
   float:left;
   padding:10px;
}
#socialsbar ul li a{
  color:rgba(255,255,255,1);
  opacity:0.5;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
}

#socialsbar ul li a:hover{
  opacity:1;
}

a[data-s]:hover:before {
  content:"";
  position:absolute;
 border-color: transparent transparent rgba(255,255,255,1) transparent ;
border-style: solid;
border-width: 10px;
  left:50%;
  margin-left:-10px;
  top:-25px;
  z-index:5;
}
a[data-s]:hover:after {
   display: block;
  content:attr(data-s);
  width:100px;
  padding:15px;
  font-family:"Droid Sans";
  font-size:15px;
  color:#565656;
  position:absolute;
  left:50%;
  text-align:center;
  margin-left:-65px;
  top:-70px;
  white-space:nowrap;
  z-index:5;
  border-radius:2px;
  background:rgba(255,255,255,1);
  box-shadow:-1px 5px 15px rgba(0,0,0,0.1);
}

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Der Hovereffekt nutzt Pseudo Elemente :before und :after um das Popup zu zeigen

12. Enwicklung der Single-Page

Die Single Page dient im Wordpress Template später dazu, einzelne Posts anzuzeigen. Dabei werden Zusatzinformationen bei bestimmten Post-Typen speziell angezeigt. Aus der Designvorlage kommt dieser Entwurf, den wir nun entwickeln wollen:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Ein zweigeteiltes Layout über die gesamte Seite. Die Darstellung des Artwork auf der linken Seite zeigt mir, dass hier ein Post vom Typ "Work" dargestellt werden soll. Dazu später mehr.

Die Seite hat einige Besonderheiten, und wir benötigen zusätzlich dieses Jquery Skript: Jquery adaptive backgrounds >>hier (Herunterladen und im js Ordner speichern)

Jquery adaptive backgrounds ist ein kleines Magic Skript, mit dem sich die dominante Farbe in einem Bild finden lässt, mit der dann der Hintergrund bei nicht proportionalen Bildern eingefärbt wird. Im Layout ist der Effekt gut zu sehen, denn das Bild vom Affen hat einen transparenten Hintergrund

Navbar, Tabs, Inhalt

Wir arbeiten von Aussen nach Innen. Mit diesem HTML Teil definieren wir die beiden Hälften im Aufbau. Die Navbar stammt aus der Index.html.

Die begrenzte Breite der Artikel hier auf der Seite lässt den HTML Code unleserlich umbrechen. Kopiert ihn euch lieber in einen Texteditor.

 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <link href="style.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.adaptive-backgrounds.min.js"></script>
</head>
<body>
<!-- Die Navigationsleiste aus der Index.html, mit neuer ID "header-half" -->
    <div id="header-half">
        <nav role='navigation' class="clearfix">
            <ul>
                <li class=""><a href="index.html"><i class="fa fa-home"></i>Home</a></li>
                <li class="active"><a href="#"><i class="fa fa-book"></i>Tutorials</a></li>
                <li class=""><a href="#"><i class="fa fa-user"></i>About</a></li>
                <li class=""><a href="#"><i class="fa fa-envelope"></i>Contact</a></li>
            </ul>
        </nav>
    </div>


<!-- Die rechte Seite des Aufbaus -->
    <div id="infopanel">
<!-- Der Bildbereich -->
        <div class='image-wrapper'>
            <div class='inner'>
                <span class='color'>
                    <span class='swatch'></span>
                </span>
                <img src="daisy.png" data-adaptive-background='1'>
            </div>
        </div>
<!-- Die Tableiste -->  
    <div class="tabs">
            <ul class="tablist clearfix" id="hmenu">
                <li class="active">
                    <a href="#tab1"><i class="fa fa-file-text"></i>Beschreibung</a>
                </li>
                <li class="">
                    <a href="#tab2"><i class="fa fa-clock-o"></i>Arbeitszeit</a>
                </li>
                <li class="">
                    <a href="#tab3"><i class="fa fa-cubes"></i>Software</a>
                </li>
                <li class="">
                    <a href="#tab4"><i class="fa fa-tags"></i>Sammlung</a>
                </li>
                <li class="">
                    <a href="#tab5"><i class="fa fa-comments-o"></i>Kommentieren</a>
                </li>
                <li class="">
                    <a id="tab6" href="#tab6"><i class="fa fa-star"></i>Bewerten</a>
                </li>
            </ul>
<!-- Die eigentlichen Tabs mit Inhalt -->           
            <div class="tab-content">
                <div id="tab1" class="tab active">
                    <h2>Mr Snuggles - The overseer</h2>
                    <h3>Created by: needles</h3>
                    <br><br>                
                    <h5>Zusammenfassung:</h5>
                    <p>Mit strengem Blick und finsterer Mine wacht Mr Snuggles über das Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, vero, consectetur. Nulla id voluptatibus veniam iusto cum sed ipsam, iste rerum nesciunt, doloribus numquam cumque! Repellendus sit debitis, molestiae suscipit. Immer wenn man nicht mitliest dann packt er Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eveniet culpa expedita laudantium doloremque, facere iure? Accusamus aspernatur itaque dolorem, consequuntur explicabo facilis voluptatem fugit ex. Dolore at, facere voluptatum!</p>
                    <br>                
                    <h5>Eckdaten:</h5>
                    <p>Gewicht: 650lbs</p>
                    <p>Schulterhöhe: 1.50m</p>
                    <p>Schulterbreite: 1.80m</p>
                    <p>IQ: 43</p>
                    
                </div>
                <div id="tab2" class="tab" style="display: none;">
                    <h2>Arbeitszeit</h2>
                </div>
                <div id="tab3" class="tab" style="display: none;">
                    <h2>Verwendete Software</h2>
                </div>
                <div id="tab4" class="tab" style="display: none;">
                    <h2>Making-of Material</h2>
                    <h3>Making-of Videos</h3>
                    <iframe width="420" height="315" src="//www.youtube.com/embed/Fzooe8gnIt0" frameborder="0" allowfullscreen></iframe>
                    <h3>PSD Dateien</h3>
                    <ul>
                        <li><img src="dummy1.jpg" alt="">PSD Layered Datei</li>
                        <li><img src="dummy1.jpg" alt="">Color Layer</li>
                        <li><img src="dummy1.jpg" alt="">Outline Layer</li>
                    </ul>
                </div>
                <div id="tab5" class="tab" style="display: none;">
                    <h2>Kommentar abgeben</h2>
                    <h6>Kommentare</h6>
                    <p>2 Responses to "Mr Needles"</p>
                    <section id="responses">
                        <div class="response"><br />
                            <img src="http://www.avatarhosting.net/pics/thumb/15608/English_Motherfucker_Do_You_Speak_It.jpg" alt="Hosting Avatars - Free Avatar Hosting and Picture sharing" alt="" class="userGlyph" /> 
                            <p class="comment-date">June 20, 2014 at 6.12pm</p><p>
                            <u>needles says:</u> <br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur enim amet eligendi, praesentium necessitatibus odit, iusto vero perspiciatis minus ad in, tempore error incidunt! Praesentium quibusdam quam reprehenderit cupiditate commodi?</p>
                        </div>
                        <div class="response"><br />
                            <img src="http://www.avatarhosting.net/pics/thumb/15608/English_Motherfucker_Do_You_Speak_It.jpg" alt="Hosting Avatars - Free Avatar Hosting and Picture sharing" alt="" class="userGlyph" /> 
                            <p class="comment-date">June 20, 2014 at 6.12pm</p><p>
                            <u>needles says:</u> <br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur enim amet eligendi, praesentium necessitatibus odit, iusto vero perspiciatis minus ad in, tempore error incidunt! Praesentium quibusdam quam reprehenderit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vitae asperiores, recusandae assumenda. Dicta quod incidunt sed ratione quia sunt hic placeat, minima quis corrupti nesciunt error, amet corporis aspernatur! cupiditate commodi?</p>
                        </div>
                        <button class="actionbutton">Weitere Kommentare laden</button>
                    </section>
                </div>
                <div id="tab6" class="tab" style="display: none;">
                    <div class="ratingcontent">
                        <div class="note hint"> <i class="fa fa-info fa-2x"></i> <p>Fetching rating data from database. Please standby...</p> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Mit diesem Skript wird das Durchschalten der Tabs gesteuert. Zusätzlich ist noch ein Fade-Effekt für den Inhalt eingebaut -->  
<script type="text/javascript">

    $(document).ready(function(){

        $('.tabs ul li a').on('click', function(e) {
            var currentAttrValue = $(this).attr('href');
            $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
            $('.tabs ul li').removeClass('active');
            $(this).parent('li').addClass('active').siblings().removeClass('active');
            e.preventDefault();
        });

        $.adaptiveBackground.run();
        
    });
          
    </script>
</body>
</html>
 
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
html{
  overflow-y:scroll;
}
body{
  margin:0; 
  padding:0;
  background-color: #f1f1f1;
} 
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: normal;
  src: url("DroidSerif.ttf"); 
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: url("DroidSans.ttf"); 
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Droid Serif';
  margin:0;
  padding:0;
  font-weight:normal;
}
strong, b 
{
  font-weight: bold;
}

h1,h2,h3,h4{
  margin-bottom:15px;
}
h1{
  font-size:64px;
  font-weight:normal;
}
h2{
  font-size: 48px;
  font-weight:normal;
}
h3{ 
  font-size: 32px;
  font-weight:normal;
}
h4{
  font-size:32px;
  font-weight:normal;
  color:#808080
}
h5{
  font-size:24px;
  font-weight:normal;
}
h6{
  font-size:18px;
  font-weight:normal;
}

p,a,article,li{
  font-family: 'Droid Sans';
  font-weight:normal;
  font-size:1em;
  line-height:1.4em;
}
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
.clearfix:after {
  clear: both;
}
body .image-wrapper {
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 50%;
  float:left;
  max-height: 100%;
}
body .image-wrapper .inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
body .image-wrapper .inner:after, body .image-wrapper .inner:before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10px;
  width: 500px;
  height: 1000px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
body .image-wrapper .inner:after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
body .image-wrapper .inner .color {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 10px;
  color: #333333;
  background: rgba(238, 238, 238, 0.9);
  padding: 5px 10px;
  font-size: 80%;
  opacity: 0;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
body .image-wrapper .inner .color .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
  margin-right: 5px;
}
body .image-wrapper img {
  max-width: 100%;
  display: inline-block;
  z-index: 2;
  position: relative;
  z-index: 10;
  max-height: 90%;
}
.wrapper{
  max-width:1280px;
  margin:0 auto;
  width:100%;
}
.image-frame{
  width:50%;
  float:left;
  overflow:hidden;
}

.tabs {
  width: 50%;
  overflow-y:hidden;
  overflow-x:hidden;
  min-height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.tabs ul.tablist {
  list-style: none;
  overflow: hidden;
  margin:0;
  padding:0;
  background-color: #fff;
}
.tabs ul.tablist li {
  border-bottom: none;
  display: block;
  position: relative;
  float: left;
  text-align: center;
}
.tabs ul li a {
  color: #868686;
  display: block;
  line-height: 50px;
  padding: 0 20px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 15px;
}
.tabs ul li a:hover {
  color: #444;
}
.tabs ul li.active {
  background-color: #4daf7b;
}
.tabs ul li.active:before, .tabs ul li.active:after {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
}
.tabs ul li.active:after {
  right: auto;
  left: 100%;
  width: 4000px;
}
.tab-content {
  z-index: -1;
  margin-top: 10px;
  padding-left:25px;
  color:#565656;
}
.tab {
  display: none;
  padding-left: 10px;
}
.tab.active {
  display: block;
}
.userGlyph{
  float:left;
  max-width:100%;
  max-height:48px;
  margin-right : 15px;
}
.response{
  margin-bottom:25px;
}
.response p{
  overflow:hidden;
}
.comment-date{
  font-size:12px
}
.actionbutton{
  border: 2px solid rgba(0,0,0,0.75);
  background-color: transparent;
  padding:15px 25px;
  margin-left:48px;
  cursor:pointer;
  outline: none;
  color:#808080;
  font-weight: normal;
  font-size:18px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.actionbutton:hover{ 
  background-color: #000000;
  color:#fff;
}
  
.link i{
  width:15px;
  height:15px;
}
#header-half{
  width:50%;
}
nav{
  background-color:#fff;
  max-width:1280px;
  margin:0px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-width: 507px;
}
nav ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
nav ul li{
  float:left;
  border-right:1px solid #f6f0ec;
}
nav ul li:last-child{
  border-right:none;
  vertical-align: middle;  
}
nav ul li a{
  padding: 15px 25px;
  display:inline-block;
  font-family: 'Droid Sans', sans-serif;
  font-size:15px;
  color: #868686;
  text-decoration: none;
}
nav ul li a i{
  margin-right:10px;
}
nav ul li span{
  padding:13px 25px;
  display:inline-block;
  font-family: 'Droid Sans', sans-serif;
  color:#868686;
  font-size:15px;
}
nav ul li span input{
  border:1px solid transparent;
  width:30px;
}
nav ul li span input:focus{
  border:1px solid #f6f0ec;
  width:200px;
}
input.searchicon {
  color:#868686;
  font-size:15px;
}
input.searchicon::-webkit-input-placeholder {
  font-family:'FontAwesome';
  color:#868686;
}
input.searchicon::-moz-placeholder {
  font-family:'FontAwesome';
  color:#868686;
}
input.searchicon::-ms-input-placeholder {
  font-family:'FontAwesome';
  color:#868686;
}
nav ul li a:focus{
  text-decoration:none;
  color:#868686;
}
nav ul li:first-child.active{
  background-color:#5e90af; 
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
nav ul li.active a, .tabs ul li.active a{
  color:#fff
}
nav ul li:nth-child(2).active{
  background-color:#4daf7b; 
}
nav ul li:nth-child(3).active{
  background-color:#8654a5; 
}
nav ul li:nth-child(4).active{
  background-color:#ffa800; 
}
nav ul li:nth-child(5).active{
  background-color:#ffa800; 
}
nav ul li a:hover{
  text-decoration:none;
  color:#868686;
}
nav ul li.active a:hover{
  text-decoration:none;
  color:#fff;
}
#actionbar{
  width: 1280px;
  margin:0 auto;
}
.actionbutton{
  border: 2px solid rgba(255,255,255,0.75);
  background-color: transparent;
  padding:15px 45px;
  cursor:pointer;
  outline: none;
  color:#fff;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.actionbutton:hover{
  background-color: #fff;
  color:#6B58CD;
}
.tablist li a i{
  margin-right: 5px;
}

Das Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Tab "Arbeitszeit"
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class='piechart'>
  <div id='slice1'>
    <div class='pie'></div>
  </div>
  <div id='slice2'>
    <div class='pie'></div>
  </div>
  <div id='slice3'>
    <div class='pie'></div>
  </div>
  <div id='slice4'>
    <div class='pie'></div>
  </div>
  <div id='slice5'>
    <div class='pie'></div>
  </div>
  <div class='doughnut'></div>
</div>
<div class="legend">
  <table>
    <tr>
      <td><span class="piecol" id="skizze"></span></td>
      <td>
        <h4>Konzept:</h4>
      </td>
      <td>1h</td>
    </tr>
    <tr>
      <td><span class="piecol" id="konzept"></span></td>
      <td>
        <h4>Skizze:</h4>
      </td>
      <td>1h</td>
    </tr>
    <tr>
      <td><span class="piecol" id="outline"></span></td>
      <td>
        <h4>Outline:</h4>
      </td>
      <td>30min</td>
    </tr>
    <tr>
      <td><span class="piecol" id="color"></span></td>
      <td>
        <h4>Color:</h4>
      </td>
      <td>1h</td>
    </tr>
    <tr>
      <td><span class="piecol" id="shading"></span></td>
      <td>
        <h4>Shading:</h4>
      </td>
      <td>1h</td>
    </tr>
  </table>
    
</div>
 
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
.legend{
  border:1px solid #ccc;
  display:table;
  position:absolute;
  left:350px;
  top:50px;
  background-color:#f1f1f1;
  padding-left:15px;
  padding-right:15px;
}
.piecol{
  width:10px;
  height:10px;
  display:block;
}
#skizze{
  background-color:#88dd22;
}
#konzept{
  background-color: #ee8800;
}
#outline{
  background-color: #0077ee;
}
#color{
  background-color: #ee55ee;
}
#shading{
  background-color: #9900dd;
}
.legend h4{
  display:table-cell;
}
.piechart {
  position: relative;
  width: 300px;
  margin: 10px 0;
}
.piechart div {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  clip: rect(0px, 300px, 300px, 150px);
}
.piechart > div:first-child {
  clip: auto;
}
.piechart div div {
  clip: rect(0px, 150px, 300px, 0px);
}
.piechart .doughnut {
  top: 75px;
  left: 75px;
  background: white;
  width: 150px;
  height: 150px;
  display: block;
  clip: auto;
}

#slice1 {
  background: #88dd22;
}

#slice2 {
  -webkit-transform: rotate(90deg);
}

#slice2 .pie {
  background-color: #ee8800;
  -webkit-transform: rotate(90deg);
}

#slice3 {
  -webkit-transform: rotate(180deg);
}

#slice3 .pie {
  background-color: #0077ee;
  -webkit-transform: rotate(45deg);
}

#slice4 {
  -webkit-transform: rotate(225deg);
}

#slice4 .pie {
  background-color: #ee55ee;
  -webkit-transform: rotate(90deg);
}

#slice5 {
  -webkit-transform: rotate(315deg);
}

#slice5 .pie {
  background-color: #9900dd;
  -webkit-transform: rotate(45deg);
}

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Tab "Software"
 
HTML
1
2
3
4
<div class="tile"><img src="photoshop.jpg" alt="" /></div>
<div class="tile"><img src="illustrator.jpg" alt="" /></div>
<div class="tile"><img src="bridge.jpg" alt="" /></div>
<div class="tile"><img src="aftereffects.jpg" alt="" /></div>
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.tile img{
  max-width:100%;
  max-height:100%;
}
.tile{
  float:left;
  width:100px;
  height:100px;
  padding:30px;
  background-color:#ddd;
  margin:1px;
}

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Da die Aufsplittung der Seite beim Zusammenfügen evtl Probleme macht, gibt es zum Schluss des Tutorials noch den kompletten Sourcecode der Single-Page und der Front-Page für euch zum testen.

Der komplette Source Code der Single-Page

Hier noch der Komplette Sourcecode der Single-Page

 
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
html{
  overflow-y:scroll;
}
body{
  margin:0; 
  padding:0;
  background-color:#f1f1f1;
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: normal;
src: url("DroidSerif.ttf"); 
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: url("DroidSans.ttf"); 
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Droid Serif';
  margin:0;
  padding:0;
  font-weight:normal;
}
strong, b 
{
  font-weight: bold;
}
h1,h2,h3,h4{
  margin-bottom:15px;
}
h1{
  font-size:64px;
}
h2{
  font-size: 48px;
}
h3{ 
  font-size: 32px;
}
h4{
  font-size: 18px;
  color:#808080
}
h5{
  font-size:24px;
}
h6{
  font-size:18px;
}
p,a,article,li{
  font-family: 'Droid Sans';
  font-weight:normal;
  font-size:1em;
  line-height:1.4em;
}
td{
  font-family: "Droid Sans";
  font-size: 15px;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
#header-half{
  width:50%;
}
nav{
  background-color:#fff;
  max-width:1280px;
  margin:0px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
 border-radius: 5px;
 min-width: 507px;
}
nav ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
nav ul li{
  float:left;
  border-right:1px solid #f6f0ec;
}
nav ul li:last-child{
  border-right:none;
  vertical-align: middle;  
}
nav ul li a{
  padding: 15px 25px;
  display:inline-block;
  font-family: 'Droid Sans', sans-serif;
  font-size:15px;
  color: #868686;
  text-decoration: none;
}

nav ul li a i{
  margin-right:10px;

}
nav ul li span{
  padding:13px 25px;
  display:inline-block;
   font-family: 'Droid Sans', sans-serif;
    color:#868686;
    font-size:15px;
}
/*Styles for active state*/
nav ul li a:focus{
  text-decoration:none;
   color:#868686;
}
nav ul li:first-child.active{
  background-color:#5e90af; 
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
nav ul li.active a, .tabs ul li.active a{
  color:#fff
}
.tabs ul li.active a:hover{
  color:#fff
}
nav ul li:nth-child(2).active{
  background-color:#4daf7b; 
}
nav ul li:nth-child(3).active{
  background-color:#8654a5; 
}
nav ul li:nth-child(4).active{
  background-color:#ffa800; 
}
nav ul li:nth-child(5).active{
  background-color:#ffa800; 
}
/*Hover styles*/
nav ul li a:hover{
  text-decoration:none;
  color:#868686;
}
nav ul li.active a:hover{
  text-decoration:none;
  color:#fff;
}

body .image-wrapper {
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 50%;
  float:left;
  max-height: 100%;
}
body .image-wrapper .inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
body .image-wrapper .inner:after, body .image-wrapper .inner:before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10px;
  width: 500px;
  height: 1000px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
body .image-wrapper .inner:after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
body .image-wrapper .inner .color {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 10px;
  color: #333333;
  background: rgba(238, 238, 238, 0.9);
  padding: 5px 10px;
  font-size: 80%;
  opacity: 0;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
body .image-wrapper .inner .color .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
  margin-right: 5px;
}
body .image-wrapper img {
  max-width: 100%;
  display: inline-block;
  z-index: 2;
  position: relative;
  z-index: 10;
  max-height: 90%;
}
.wrapper{
  max-width:1280px;
  margin:0 auto;
  width:100%;
}
.image-frame{
  width:50%;
  float:left;
  overflow:hidden;
}
/*TAB Styles*/
.tabs {
  width: 50%;
  overflow-y:hidden;
  overflow-x:hidden;
  min-height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.tablist li a i{
  margin-right: 5px;
}
.tabs ul.tablist {
  list-style: none;
  overflow: hidden;
  margin:0;
  padding:0;
  background-color: #fff;
}
.tabs ul.tablist li {
  border-bottom: none;
  display: block;
  position: relative;
  float: left;
  text-align: center;
}
.tabs ul li a {
  color: #868686;
  display: block;
  line-height: 50px;
  padding: 0 20px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 15px;
}
.tabs ul li a:hover {
  color: #444;
}
.tabs ul li.active {
  background-color: #4daf7b;
}
.tabs ul li.active:before, .tabs ul li.active:after {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
}
.tabs ul li.active:after {
  right: auto;
  left: 100%;
  width: 4000px;
}
.tab-content {
  z-index: -1;
  margin-top: 10px;
  padding-left:25px;
  color:#565656;
}
.tab {
  display: none;
  padding-left: 10px;
}
.tab.active {
  display: block;
}
.userGlyph{
  float:left;
  max-width:100%;
  max-height:48px;
  margin-right : 15px;
}
.response{
  margin-bottom:25px;
}
.response p{
  overflow:hidden;
}
.comment-date{
  font-size:12px
}
.actionbutton{
  border: 2px solid rgba(0,0,0,0.75);
  background-color: transparent;
  padding:15px 25px;
  margin-left:48px;
  cursor:pointer;
  outline: none;
  color:#808080;
  font-weight: normal;
  font-size:18px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.actionbutton:hover{ 
  background-color: #000000;
  color:#fff;
}
/*TAB Arbeitszeit*/
.legend{
  border:1px solid #ccc;
  display:table;
  position:absolute;
  left: 380px;
  top: 210px;
  background-color:#f1f1f1;
  padding-left:15px;
  padding-right:15px;
}
.piecol{
  width:10px;
  height:10px;
  display:block;
}
#skizze{
  background-color:#88dd22;
}
#konzept{
  background-color: #ee8800;
}
#outline{
  background-color: #0077ee;
}
#color{
  background-color: #ee55ee;
}
#shading{
  background-color: #9900dd;
}
.legend h4{
  display:table-cell;
}
.piechart {
  position: relative;
  width: 300px;
  margin: 10px 0;
}
.piechart div {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  clip: rect(0px, 300px, 300px, 150px);
}
.piechart > div:first-child {
  clip: auto;
}
.piechart div div {
  clip: rect(0px, 150px, 300px, 0px);
}
.piechart .doughnut {
  top: 75px;
  left: 75px;
  background: white;
  width: 150px;
  height: 150px;
  display: block;
  clip: auto;
}
#slice1 {
  background: #88dd22;
}
#slice2 {
  -webkit-transform: rotate(90deg);
}
#slice2 .pie {
  background-color: #ee8800;
  -webkit-transform: rotate(90deg);
}
#slice3 {
  -webkit-transform: rotate(180deg);
}
#slice3 .pie {
  background-color: #0077ee;
  -webkit-transform: rotate(45deg);
}
#slice4 {
  -webkit-transform: rotate(225deg);
}
#slice4 .pie {
  background-color: #ee55ee;
  -webkit-transform: rotate(90deg);
}
#slice5 {
  -webkit-transform: rotate(315deg);
}
#slice5 .pie {
  background-color: #9900dd;
  -webkit-transform: rotate(45deg);
}
/*TAB Software*/
.tile img{
  max-width:100%;
  max-height:100%;
}
.tile{
  float:left;
  width:100px;
  height:100px;
  padding:30px;
  background-color:#ddd;
  margin:1px;
}
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <link href="styles.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="jquery.adaptive-backgrounds.min.js"></script>
</head>
<body>
    <div id="header-half">
        <nav role='navigation' class="clearfix">
            <ul>
                <li class=""><a href="index.html"><i class="fa fa-home"></i>Home</a></li>
                <li class="active"><a href="#"><i class="fa fa-book"></i>Tutorials</a></li>
                <li class=""><a href="#"><i class="fa fa-user"></i>About</a></li>
                <li class=""><a href="#"><i class="fa fa-envelope"></i>Contact</a></li>
            </ul>
        </nav>
    </div>
    <div id="infopanel">
        <div class='image-wrapper'>
            <div class='inner'>
                <span class='color'>
                    <span class='swatch'></span>
                </span>
                <img src="daisy.png" data-adaptive-background='1'>
            </div>
        </div>
        <div class="tabs">
            <ul class="tablist clearfix" id="hmenu">
                <li class="active">
                    <a href="#tab1"><i class="fa fa-file-text"></i>Beschreibung</a>
                </li>
                <li class="">
                    <a href="#tab2"><i class="fa fa-clock-o"></i>Arbeitszeit</a>
                </li>
                <li class="">
                    <a href="#tab3"><i class="fa fa-cubes"></i>Software</a>
                </li>
                <li class="">
                    <a href="#tab4"><i class="fa fa-tags"></i>Sammlung</a>
                </li>
                <li class="">
                    <a href="#tab5"><i class="fa fa-comments-o"></i>Kommentieren</a>
                </li>
                <li class="">
                    <a id="tab6" href="#tab6"><i class="fa fa-star"></i>Bewerten</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab active">
                    <h2>Mr Snuggles - The overseer</h2>
                    <h3>Created by: needles</h3>
                    <br><br>                
                    <h5>Zusammenfassung:</h5>
                    <p>Mit strengem Blick und finsterer Mine wacht Mr Snuggles über das Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, vero, consectetur. Nulla id voluptatibus veniam iusto cum sed ipsam, iste rerum nesciunt, doloribus numquam cumque! Repellendus sit debitis, molestiae suscipit. Immer wenn man nicht mitliest dann packt er Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eveniet culpa expedita laudantium doloremque, facere iure? Accusamus aspernatur itaque dolorem, consequuntur explicabo facilis voluptatem fugit ex. Dolore at, facere voluptatum!</p>
                    <br>                
                    <h5>Eckdaten:</h5>
                    <p>Gewicht: 650lbs</p>
                    <p>Schulterhöhe: 1.50m</p>
                    <p>Schulterbreite: 1.80m</p>
                    <p>IQ: 43</p>
                    
                </div>
                <div id="tab2" class="tab" style="display: none;">
                    <h2>Arbeitszeit</h2>
                    <div class='piechart'>
                      <div id='slice1'>
                        <div class='pie'></div>
                      </div>
                      <div id='slice2'>
                        <div class='pie'></div>
                      </div>
                      <div id='slice3'>
                        <div class='pie'></div>
                      </div>
                      <div id='slice4'>
                        <div class='pie'></div>
                      </div>
                      <div id='slice5'>
                        <div class='pie'></div>
                      </div>
                      <div class='doughnut'></div>
                    </div>
                    <div class="legend">
                      <table>
                        <tr>
                          <td><span class="piecol" id="skizze"></span></td>
                          <td>
                            <h4>Konzept:</h4>
                          </td>
                          <td>1h</td>
                        </tr>
                        <tr>
                          <td><span class="piecol" id="konzept"></span></td>
                          <td>
                            <h4>Skizze:</h4>
                          </td>
                          <td>1h</td>
                        </tr>
                        <tr>
                          <td><span class="piecol" id="outline"></span></td>
                          <td>
                            <h4>Outline:</h4>
                          </td>
                          <td>30min</td>
                        </tr>
                        <tr>
                          <td><span class="piecol" id="color"></span></td>
                          <td>
                            <h4>Color:</h4>
                          </td>
                          <td>1h</td>
                        </tr>
                        <tr>
                          <td><span class="piecol" id="shading"></span></td>
                          <td>
                            <h4>Shading:</h4>
                          </td>
                          <td>1h</td>
                        </tr>
                      </table>
                    </div>
                </div>
                <div id="tab3" class="tab" style="display: none;">
                    <h2>Verwendete Software</h2>
                    <div class="tile"><img src="https://dl.dropboxusercontent.com/u/97182346/photoshop.jpg" alt="" /></div>
                    <div class="tile"><img src="https://dl.dropboxusercontent.com/u/97182346/illustrator.jpg" alt="" /></div>
                    <div class="tile"><img src="https://dl.dropboxusercontent.com/u/97182346/bridge.jpg" alt="" /></div>
                    <div class="tile"><img src="https://dl.dropboxusercontent.com/u/97182346/aftereffects.jpg" alt="" /></div>
                </div>
                <div id="tab4" class="tab" style="display: none;">
                    <h2>Making-of Material</h2>
                    <h3>Making-of Videos</h3>
                    <iframe width="420" height="315" src="//www.youtube.com/embed/Fzooe8gnIt0" frameborder="0" allowfullscreen></iframe>
                    <h3>PSD Dateien</h3>
                    <ul>
                        <li><img src="dummy1.jpg" alt="">PSD Layered Datei</li>
                        <li><img src="dummy1.jpg" alt="">Color Layer</li>
                        <li><img src="dummy1.jpg" alt="">Outline Layer</li>
                    </ul>
                </div>
                <div id="tab5" class="tab" style="display: none;">
                    <h2>Kommentar abgeben</h2>
                    <h6>Kommentare</h6>
                    <p>2 Responses to "Mr Needles"</p>
                    <section id="responses">
                        <div class="response"><br />
                            <img src="http://www.avatarhosting.net/pics/thumb/15608/English_Motherfucker_Do_You_Speak_It.jpg" alt="Hosting Avatars - Free Avatar Hosting and Picture sharing" alt="" class="userGlyph" /> 
                            <p class="comment-date">June 20, 2014 at 6.12pm</p><p>
                            <u>needles says:</u> <br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur enim amet eligendi, praesentium necessitatibus odit, iusto vero perspiciatis minus ad in, tempore error incidunt! Praesentium quibusdam quam reprehenderit cupiditate commodi?</p>
                        </div>
                        <div class="response"><br />
                            <img src="http://www.avatarhosting.net/pics/thumb/15608/English_Motherfucker_Do_You_Speak_It.jpg" alt="Hosting Avatars - Free Avatar Hosting and Picture sharing" alt="" class="userGlyph" /> 
                            <p class="comment-date">June 20, 2014 at 6.12pm</p><p>
                            <u>needles says:</u> <br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur enim amet eligendi, praesentium necessitatibus odit, iusto vero perspiciatis minus ad in, tempore error incidunt! Praesentium quibusdam quam reprehenderit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vitae asperiores, recusandae assumenda. Dicta quod incidunt sed ratione quia sunt hic placeat, minima quis corrupti nesciunt error, amet corporis aspernatur! cupiditate commodi?</p>
                        </div>
                        <button class="actionbutton">Weitere Kommentare laden</button>
                    </section>
                </div>
                <div id="tab6" class="tab" style="display: none;">
                    <div class="ratingcontent">
                        <div class="note hint"> <i class="fa fa-info fa-2x"></i> <p>Fetching rating data from database. Please standby...</p> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.tabs ul li a').on('click', function(e) {
            var currentAttrValue = $(this).attr('href');
            $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
            $('.tabs ul li').removeClass('active');
            $(this).parent('li').addClass('active').siblings().removeClass('active');
            e.preventDefault();
        });
        $.adaptiveBackground.run();
    });
    </script>
</body>
</html>

Der komplette Sourcecode der Index-Seite

Überprüft zu Beginn ob die <link href=""> Adressen mit euren übereinstimmen. Danach sollte die Seite bei euch wie bei mir im Browser aussehen.

 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <link href="style.css" rel="stylesheet">
    <link href="fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="fancybox/jquery.fancybox.pack.js"></script>
    <script src="jQuery.listCarousel.js"></script>
</head>
<body class="bodyfade">
    <div class="loader">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div id="header">
        <nav role='navigation' class="clearfix">
            <ul>
                <li class="active"><a class="link" href="index.html"><i class="fa fa-home"></i>Home</a></li>
                <li class=""><a class="link" href="adapt.html"><i class="fa fa-book"></i>Tutorials</a></li>
                <li class=""><a class="link" href="#"><i class="fa fa-user"></i>About</a></li>
                <li class=""><a class="link" href="#"><i class="fa fa-envelope"></i>Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="pageblock clearfix imgwall">
            <a href="#" id="prev" class="csbtn_prev"></a>
            <a href="#" id="next" class="csbtn_next"></a>
        <div class="carousel" id="imgcarousel">

            <ul id="slides">
                <li class="slide" id="slide1">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                        <button class="actionbutton">Enter the trip</button>
                    </div>
                    <img src="slide1.png" alt="" />
                </li>
                <li class="slide" id="slide2">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide2.png" alt="" />
                </li>
                <li class="slide" id="slide3">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide3.png" alt="" />
                </li>
            </ul>
        </div>
    </div>
    <div class="accent lightblue">
            <div class="wrapper clearfix">
                <div class="row">
                    <div class="col3">
                        <h2>Column #1</h2>
                        <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
                    </div>
                    <div class="col3">
                        <h2>Column #2</h2>
                        <p>»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab.</p>
                    </div>
                    <div class="col3">
                        <h2>Column #3</h2>
                        <p>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel?</p>
                    </div>
                </div>
        </div>
    </div>
        <div class="accent darkblue">
            <div class="wrapper clearfix">
                <span>
                    <h2>Interesse geweckt ? Na dann auf ins Vergnügen.</h2>
                    <button class="actionbutton">Enter the trip</button>
                </span>
            </div>
        </div>
        
        <div class="accent grey">
            <div class="wrapper clearfix">
                <ul id="feature_images_list">
                    <li class="featured-image-item"><a href="featured/001.jpg" class="fancybox" title=""><img src="featured/001.jpg" alt=""></li></a>
                    <li class="featured-image-item"><a href="featured/002.jpg" class="fancybox" title=""><img src="featured/002.jpg" alt=""></li></a>
                    <li class="featured-image-item"><a href="featured/003.jpg" class="fancybox" title=""><img src="featured/003.jpg" alt=""></li></a>
                    <li class="featured-image-item"><a href="featured/004.jpg" class="fancybox" title=""><img src="featured/004.jpg" alt=""></li></a>
                    <li class="featured-image-item"><a href="featured/005.jpg" class="fancybox" title=""><img src="featured/005.jpg" alt=""></li></a>
                </ul>
            </div>
        </div>

<div class="accent grey">
        <div class="wrapper">
            <img src="latest_posts.png" alt="" id="latest-posts-title">
            <div class="carousel" >
                <a href="#" id="rpprev" class="csbtn_prev"></a>
                <a href="#" id="rpnext" class="csbtn_next"></a>
                <div class="carousel-parent" id="recent-post-carousel">
                <ul id="recent-posts-ticker-list">
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Needles Art released</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Mr Snuggles Art released</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #6</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #5</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #4</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #3</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #2</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #1</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
    </div>


</div>
<div id="footer">
<div class="accent darkgrey clearfix">
    <div class="wrapper">
        <div class="row">
        <section class="col4">
          <h3>Tags</h3>
          <p>Comic CG Drawing Tutorial News Video</p>
      </section>
        <section class="col4">
          <h3>Recent Comments</h3>
          <article>
            <ul >
              <li class="excerpt">Blablabal on lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quis voluptatibus temporibus dolorum ipsam beatae, architecto laudantium accusantium sapiente asperiores iure. Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi.
              </li>
               <li>Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi.
              </li>
               <li class="excerpt">Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi. consectetur adipisicing elit. Veniam, quis voluptatibus temporibus dolorum ipsam beatae, architecto laudantium accusantium sapiente asperiores iure. Nam earum doloribus magni. Qui corrupti disti
              </li>
            </ul>
          </article>
      </section>
        <section class="col4">
          <h3>Archives</h3>
          <ul>
            <li>Januar 2014</li>
            <li>Februar 2014</li>
            <li>März 2014</li>
          </ul>
      </section>
        <section class="col4">
          <h3>Recent Posts</h3>
           <article>
             <h6><b>Needles</b></h6>
             <p>Neues Artwork herausgegeben. Sonst nichts weiter.</p>
              </article>
          <article>
          <h6><b>Needles</b></h6>
          <p>Neues Artwork herausgegeben. Sonst nichts weiter.</p></article>
      </section>
    </div>  
    </div>
</div>
  <div id="socialsbar" class="clearfix">
    <div class="wrapper clearfix">
      <ul>
  <li><a data-s="Deviantart" href="http://monkeyb07.deviantart.com"                   target="_blank"><i class="fa fa-deviantart fa-lg"></i></a></li>
  <li><a data-s="Dribbble"   href="https://dribbble.com/NDBraun"                      target="_blank"><i class="fa fa-dribbble fa-lg"></i></a></li>
  <li><a data-s="Codepen"    href="http://codepen.io/voodoocoder"                     target="_blank"><i class="fa fa-codepen fa-lg"></i></a></li>
  <li><a data-s="Flickr"     href="https://www.flickr.com/photos/84683288@N06/"       target="_blank"><i class="fa fa-flickr fa-lg"></i></a></li>
  <li><a data-s="Github"     href="https://github.com/voodoocoder"                    target="_blank"><i class="fa fa-github-alt fa-lg"></i></a></li>
  <li><a data-s="Google+"    href="https://plus.google.com/u/0/+AndyBraunDE/posts"    target="_blank"><i class="fa fa-google-plus fa-lg"></i></a></li>
  <li><a data-s="LinkedIn"   href="http://de.linkedin.com/pub/andy-urban/8b/824/27a/" target="_blank"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
  <li><a data-s="Pinterest"  href="http://de.pinterest.com/andreasbraunde/"           target="_blank"><i class="fa fa-pinterest fa-lg"></i></a></li>
  <li><a data-s="Youtube"    href="https://www.youtube.com/user/Bifryst"              target="_blank"><i class="fa fa-youtube fa-lg"></i></a></li>
  <li><a data-s="Behance"    href="https://www.behance.net/andronaut"                 target="_blank"><i class="fa fa-behance fa-lg"></i></a></li>
</ul> 
  </div>
</div>

<script type="text/javascript">

$( document ).ready(function() {
    
    $('.bodyfade').fadeIn(500);

     $('.link').click(function(event) {
        $this = $(this);
        $this.find('i').removeClass().addClass('fa fa-circle-o-notch fa-spin');
        event.preventDefault();
        newLocation = this.href;
        var myPrefetchedPage;
        $.ajax({
            url: newLocation,
            cache: false,
            success: function(html) {
                myPrefetchedPage = html;
                $('.bodyfade').fadeOut(200, newpage);
            }
        });
    });

    function newpage() {
        window.location = newLocation;
    }

    $('#imgcarousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight: 720,
        slide_by: 1,
        showSlides: 1,
        scaleProp: 'true',
    }); 
    $('#recent-post-carousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight:100,
        slide_by: 1,
        showSlides: 3,
        scaleProp: 'false',
    });

    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });

    /*Equalize column heights*/
        $.fn.equalizeHeights = function() {
          var maxHeight = this.map(function( i, e ) {
            return $( e ).height();
          }).get();
          return this.height( Math.max.apply( this, maxHeight ) );
        };
        $('#footer section').equalizeHeights();
});
</script>
</body>
</html>
 
css
1
.imgwall{background:url(slider_bg.jpg) 0 0;}#latest-posts-title{float:left;margin-right:30px;}.carousel-parent{margin-left:50px;position:relative;margin-right:50px;overflow:hidden;}#recent-posts-ticker-list p{width:95%;}.carousel{position:relative;overflow:hidden;margin:0 auto;}.carousel img{max-width:100%;max-height:100%;}.carousel ul{list-style-type:none;overflow:hidden;position:absolute;margin:0;padding:0;}.carousel ul li{float:left;position:relative;}.slideText{width:30%;height:50%;position:absolute;z-index:2;color:#fff;font-weight:400;top:20%;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;transition:all ease-in-out .3s;}.slideText h2{font-size:48px;line-height:48px;}#prev:hover,#next:hover{width:90px;}#prev{background:url(left.png) 0 0 no-repeat;position:absolute;left:0;top:50%;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;background-color:rgba(0,0,0,0.5);background-position:center center;z-index:5;margin-top:-53px;display:block;width:61px;height:107px;text-indent:-999em;outline:0;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;transition:all ease-in-out .3s;}#next{background:url(right.png) 0 0 no-repeat;position:absolute;right:0;top:50%;-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;background-color:rgba(0,0,0,0.5);background-position:center center;z-index:5;margin-top:-53px;display:block;width:61px;height:107px;text-indent:-999em;outline:0;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;transition:all ease-in-out .3s;}#rpprev{display:block;width:22px;height:52px;background:url(latest_post_leftarrow.png) 0 0 no-repeat;position:absolute;left:0;top:50%;margin-top:-26px;z-index:2;}#rpnext{display:block;width:22px;height:52px;background:url(latest_post_nextarrow.png) 0 0 no-repeat;position:absolute;right:0;top:50%;margin-top:-26px;z-index:2;}.violett{background-color:#9920d7;}.grey{background-color:#e6e6e6;}.darkblue{background-color:#306285;color:#fff;}.lightblue{background-color:#4b84d0;color:#fff;}.h2violett{color:#9920d7;}body{background-color:#f1f1f1;margin:0;padding:0;}.bodyfade{display:none;}.link i{width:15px;height:15px;}@font-face{font-family:'Droid Sans';font-style:normal;font-weight:400;src:url(DroidSans.ttf);}h1,h2,h3,h4,h5,h6{font-family:'Droid Serif';font-weight:400;margin:0;padding:0;}p,a{font-family:'Droid Sans';}.clearfix:before,.clearfix:after{content:" ";display:table;}.accent{width:100%;overflow:hidden;padding:30px 0;}#header{position:absolute;top:50px;width:100%;z-index:2;min-width:480px;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;}#header-half{width:50%;}nav{background-color:#fff;max-width:1280px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;min-width:507px;margin:0 auto;}nav ul{list-style-type:none;margin:0;padding:0;}nav ul li{float:left;border-right:1px solid #f6f0ec;}nav ul li:last-child{border-right:none;vertical-align:middle;}nav ul li a{display:inline-block;font-family:'Droid Sans', sans-serif;font-size:15px;color:#868686;text-decoration:none;padding:15px 25px;}nav ul li a i{margin-right:10px;}nav ul li span{display:inline-block;font-family:'Droid Sans', sans-serif;color:#868686;font-size:15px;padding:13px 25px;}nav ul li span input{border:1px solid transparent;width:30px;}nav ul li span input:focus{border:1px solid #f6f0ec;width:200px;}input.searchicon{color:#868686;font-size:15px;}nav ul li:first-child.active{background-color:#5e90af;-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;}nav ul li.active a,.tabs ul li.active a{color:#fff;}nav ul li:nth-child(2).active{background-color:#4daf7b;}nav ul li:nth-child(3).active{background-color:#8654a5;}nav ul li.active a:hover{text-decoration:none;color:#fff;}.pageblock{width:100%;position:relative;}.wrapper{max-width:1280px;margin:0 auto;}.row .col3:first-child{margin-right:1%;}.row .col3:last-child{margin-left:1%;}.col3{width:32.666666666667%;float:left;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;}#actionbar{width:1280px;margin:0 auto;}.actionbutton{border:2px solid rgba(255,255,255,0.75);background-color:transparent;cursor:pointer;outline:none;color:#fff;text-transform:uppercase;font-weight:700;border-radius:2px;-webkit-border-radius:2px;-o-border-radius:2px;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;padding:15px 45px;}.actionbutton:hover{background-color:#fff;color:#6B58CD;}#feature_images_list{width:100%;list-style-type:none;height:150px;margin:0;padding:0;}#feature_images_list li{display:block;float:left;}#feature_images_list li img{max-height:100%;max-width:100%;}.tablist li a i{margin-right:5px;}strong,b{font-weight:700;}h1{font-size:2em;font-weight:400;}h2{font-size:1.7em;font-weight:400;}h3{font-size:1.4em;font-weight:400;}h4{font-size:1.25em;font-weight:400;}h5{font-size:1.1em;font-weight:400;}h6{font-size:1em;font-weight:400;}p,a,article,li{font-family:'Droid Sans';font-weight:400;font-size:1em;line-height:1.4em;}#footer li{border-bottom:1px solid rgba(255,255,255,.05);line-height:2em;}.excerpt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}div.darkgrey{display:block;background-color:#1a1a1a;color:#848484;}.row .col4:last-child{padding-left:1%;padding-right:0;margin-right:0;border:none;}.row .col4:first-child{padding-right:1%;}.col4{padding-left:1%;padding-right:1%;width:23%;float:left;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;}.col4 h3{border-bottom:1px solid rgba(255,255,255,0.1);}#socialsbar{background-color:#000;}#socialsbar ul{list-style-type:none;float:right;line-height:55px;margin:0;padding:0;}#socialsbar ul li{float:left;border:none;padding:10px;}#socialsbar ul li a{color:rgba(255,255,255,1);opacity:0.5;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;position:relative;}#socialsbar ul li a:hover{opacity:1;}a[data-s]:hover:before{content:"";position:absolute;left:50%;margin-left:-10px;top:-25px;z-index:5;border-color:transparent transparent rgba(255,255,255,1);border-style:solid;border-width:10px;}a[data-s]:hover:after{display:block;content:attr(data-s);width:100px;font-family:"Droid Sans";font-size:15px;color:#565656;position:absolute;left:50%;text-align:center;margin-left:-65px;top:-70px;white-space:nowrap;z-index:5;border-radius:2px;background:rgba(255,255,255,1);box-shadow:-1px 5px 15px rgba(0,0,0,0.1);padding:15px;}.loader{background-color:#fff;width:100%;height:100%;display:none;position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.dot{position:absolute;top:50%;left:10%;z-index:10;width:20px;height:20px;margin-top:-10px;border-radius:999px;background-color:#1e3f57;transform-type:preserve-3d;-ms-transform-type:preserve-3d;-webkit-transform-type:preserve-3d;animation:loader 2s cubic-bezier(.5,0,.5,1) infinite;-webkit-animation:loader 2s cubic-bezier(.5,0,.5,1) infinite;}.dot:nth-child(2){z-index:9;animation-delay:.1s;-webkit-animation-delay:.1s;background-color:#3c617d;}.dot:nth-child(3){z-index:8;animation-delay:.2s;-webkit-animation-delay:.2s;background-color:#6bb2cd;}50%{left:90%;transform:translateX(-100%);-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);}.clearfix:after,.clear{clear:both;}input.searchicon::-webkit-input-placeholder,input.searchicon::-moz-placeholder,input.searchicon::-ms-input-placeholder{font-family:FontAwesome;color:#868686;}nav ul li a:focus,nav ul li a:hover{text-decoration:none;color:#868686;}nav ul li:nth-child(4).active,nav ul li:nth-child(5).active{background-color:#ffa800;}h1,h2,h3,h4,article,section{margin-bottom:15px;}@media only screen and max-width 1296px{.slideText{top:50px;left:50px;}#header{top:0;width:100%;z-index:2;position:relative;}#header *{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}}@media only screen and max-width 768px{.col3{width:49.5%;float:left;}.row .col3:first-child{margin-right:1%;}.row .col3:last-child{margin-left:0;width:100%;}}@media only screen and max-width 1024px{.col4{width:48%;float:left;border:none;}.row .col4:first-child{margin-right:0;}}@media only screen and max-width 480px{.col4{width:98%;float:left;border:none;}.row .col4:first-child{margin-right:0;}}

An dieser Stelle dürft ihr mit Recht stolz auf euch sein, denn wir haben einiges geleistet. Im Dritten Teil der Tutorialreihe setzen wir die Entwicklung fort, und befüllen die statische Seite mit dynamischen Inhalten aus der Wordpress Installation. Ihr solltet also spätestens an dieser Stelle eine fertige Wordpress Installation aufsetzen, wie in Teil 1 beschrieben.

Ich hoffe wir sehen uns in Teil 3 wieder, in dem wir das Projekt auch zu Ende bringen.

In diesem Sinne.

Über den Autor: Andreas Braun
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten