PinkPearl Info

Freitag, 22. April 2016

Design in Responsive Design verwandeln

lulu Freitag, 22. April 2016 gastschreiber, tutorials

Nachdem Delite diese Woche schon einmal einen sehr interessanten Gastpost geschrieben hat, folgt nun auch schon der Nächste von ihr! Wieder über ein sehr interessantes Thema, welches uns alle betrifft: Responsive Design. An dieser Stelle möchte ich dir Delite nochmal für die wirklich tollen Beiträge danken *_* Viel Spass beim Lesen!

In diesem Tutorial zeige ich euch wie ihr aus einem normalen Design ein schickes Responsive-Design hinkriegt. Das Layout was ich dazu verwende habe ich vollkommen zufällig gewählt. Als Beispiel nehme ich ein schönes Design von Pink Pearl: Fairy Tail Lucy Style.

Gemacht mit&nbspplaceit

1. Variable Breite setzen

<meta name="viewport" content="width=device-width, initial-scale=1">

Damit eure Seite überhaupt flexibel ist, müsst ihr diesen Code in den head-Bereich eurer Seite ablegen.

2. Mobile Ansicht in Chrome

Damit ihr euer Layout aus mobiler Ansicht sehen könnt, gibt es ein Tool, dass euch z.B. Chrome bereitstellt (andere Browser wie Firefox können das auch). Damit ihr nicht jedes Mal euer Handy benutzen müsst, geht in Chrome auf:

View > Developer > Developer Tools (englisch)
Einstellungen > Weitere Tools > Entwickler Tools (deutsch)

Dort ist links ein Symbol, das wie ein Tablet und ein Handy aussieht (im Screenshot blau). Aktiviert diese Ansicht und ihr könnt verschiedene Geräte ausprobieren. Für meine Tests verwende ich z.B. das iPhone5.

3. Headerbild anpassen

Da ich von oben anfange ist unsere erste Baustelle der Header. Das Layout umschließt außerdem den Wrapper. Dieser hat bereits eine max-width, welche dafür sorgt, dass er nicht größer als das Headerbild wird. Damit er fluider ist, braucht er nur eine Breite von 100%.

#wrapper {
  width: 100%;
}

Gleiches müssen wir auch für den Header machen, welcher auch bereits eine max-width von 1000px hat.

Allerdings haben wir jetzt das Problem, dass die Höhe nicht mehr im Verhältnis zum Headerbild steht. Um das zu erreichen gibt es einen kleinen Trick. Zuerst müssen wir das Verhältnis zwischen Höhe und Breite berechnen: (366/1000) ~ 36%. Dafür erstellen wir jetzt ein Pseudo-Element (:before), das dafür sorgt, dass die Höhe immer zur Breite passt.

Desweiteren müssen wir das Bild natürlich auch noch resizen. Das können wir mit der CSS3 Property background-size tun. Neben prozentualen oder Pixelwerten können wir hier einfach cover eingeben, welche unser Bild automatisch an die Größe anpasst. Cool.

#header {
  background-image: url(images/header.png);
  background-position: right;
  background-size: cover;
  max-width: 1000px;
  width: 100%;
  position: relative;
}

#header:before {
  content: "";
  display: block;
  padding-top: 36%;
}

Das sieht dann schon mal so aus:

4. Content und Newsbox anpassen

Der Content brauch auch eine max-width und eine Breite von 100%. Außerdem brauch er ein anderes Box-Layout, da er ein padding definiert hat. Das normale Box-Model, das wir benutzen, würde eine Breite von 100% nehmen und obendrauf noch 20px von padding schlagen. Was wir aber wollen ist, dass in den 100% bereits dieses padding eingeschlossen ist. Das erreichen wir durch box-sizing: border-box:

#content {
  max-width: 760px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

  height: 100%;
  background-color: #ffffff;
  float: left;
  padding: 20px;
  font-family: Helvetica, Verdana;
  font-size: 13px;
  letter-spacing: 150%;
  line-height: 150%;
  color: #0c0c0c;
}

Darüber hinaus haben wir noch ein blockquote-Element, welches eine fixe Breite hat. Dies müssen wir ändern und da es auch ein Padding hat müssen wir box-sizing: border-box verwenden:

blockquote {
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

  padding: 20px;
  background-color: #c1d7ed;
  border: 1px solid #c0c0c0;
  margin: 0 auto;
  margin-bottom: 15px;
}

Das ist aber noch nicht alles. Desweiteren haben wir noch einen Banner in unserem Content, den Banner. Wir möchten, dass der Banner kleiner gemacht wird, wenn er zu groß ist. Dafür definiere ich eine neue CSS-Klasse:

.img-fluid {
  max-width: 100%;
  height: auto;
}

und weise sie im HTML-Code zu:

<img src="images/banner.png" class="img-fluid" />

Als nächstes ist die Newsbox dran:

#newsskin {
  max-width: 640px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

  background-color: #c1d7ed;
  border: 1px solid #c0c0c0;
  margin: 0 auto;
  margin-bottom: 15px;
}

Jetzt haben wir allerdings noch das Problem, dass das Updateicon und die Updatebox nebeneinander sind. Für die mobile Ansicht wollen wir sie untereinander haben. Diese spezielle Ausnahme erstellen wir mit einem media-Query:

@media (max-width: 620px) {
  #newsicon {
    float: none;
  }
  #newsupdate {
    float: none;
    width: auto;
    display: block;
    height: auto;
  }
  #newsupdate:before {
    content: '';
    display: block;
    clear: both;
  }
  #newscontent{
    margin-top: 10px;
  }
}

Wenn das Gerät kleiner als 620px ist, floaten wir den Avatar und die Updatebox nicht. Stattdessen fügen wir noch ein wenig Abstand hinzu.

Das Ganze sieht dann so aus:

5. Footer anpassen

Im Footer haben wir zwei Spalten, eine für die Partner und eine für die Shoutbox. Auf der mobilen Ansicht wäre es super, wenn die zwei Spalten untereinander erscheinen. Dazu setze ich die Spalten erstmal auf 50% statt einem festen Pixelwert:

#footerlinks, #footershouti {
  width: 50%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Für Mobile erstelle ich dann wieder einen Media-Query und setze die Breite auf 100%:

@media (max-width: 620px) {
  #footershouti, #footerlinks {
    width: 100%;
  }
}

Das Ergebnis sieht dann so aus:

6. Navigation anpassen

Als erstes wollen wir die Navigation benutzbar machen. Dazu machen wir sie auf die volle Breite auf der mobilen Ansicht, die Abstände größer und setzen sie von der Reihenfolge nach oben (im HTML einfach die Navigation ausschneiden und vor dem content plazieren):

@media (max-width: 800px) {
  #navigation {
    width: 100%;
  }
  #navigation #newsbox li a {
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

6. Navigation togglen lassen

Viele Websites verstecken das Menü auf der mobilen Ansicht, da es sehr viel Platz wegnimmt. Das können wir auch machen, indem wir einfach einfach eine Checkbox als toggle benutzen.

Dazu setzen wir eine Checkbox zwischen Header und Navigation:

<div id="header"></div>

<input type="checkbox" id="mobile_nav_toggle" />

<div id="navigation">
  ...
</div>

Durch den Pseudo-Selektor :checked können wir jetzt die Navigation an und Ausschalten. Auf der Desktop-Größe verstecken wir einfach den toggle:

#mobile_nav_toggle {
  display: none;
}
@media (max-width: 800px) {
  #navigation {
    width: 100%;
    display: none;
  }
  #navigation #newsbox li a {
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #mobile_nav_toggle {
    display: block;
  }
  #mobile_nav_toggle:checked + #navigation {
    display: block;
  }
}

Das sieht natürlich noch nicht schön aus, ist aber funktional ;)

7. Toggle stylen

Dazu müssen wir ein label-Tag erstellen, welches auf den Toggle verweist. Dieses Label setzen wir unterhalb der Checkbox im HTML:

<div id="header"></div>

<input type="checkbox" id="mobile_nav_toggle" />

<label for="mobile_nav_toggle" id="mobile_nav_toggle_label">
  Menü
</label>

<div id="navigation">
  ...
</div>

Im CSS machen wir jetzt unsere eigentliche Checkbox unsichtbar. Außerdem stylen wir unser Label und fügen einen Pfeil hinzu, der nach oben zeigt, falls das Menü schon geöffnet ist.

#mobile_nav_toggle {
  display: none;
  width: 1px;
  height: 1px;
  opacity: 0;
}
#mobile_nav_toggle_label {
  display: none;
}
@media (max-width: 800px) {
  #navigation {
    width: 100%;
    display: none;
  }
  #navigation #newsbox li a {
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #mobile_nav_toggle {
    display: block;
  }
  #mobile_nav_toggle_label {
    display: block;
    text-align: center;
    background: #255da4;
    font-family: Helvetica, Verdana;
    text-transform: uppercase;
    color: #fff;
    padding: 10px;
  }
  #mobile_nav_toggle_label:after {
    content: '↓';
  }
  #mobile_nav_toggle:checked ~ #navigation {
    display: block;
  }
  #mobile_nav_toggle:checked ~ #mobile_nav_toggle_label:after {
    content: '↑';
  }
}

Schlusswort

Das Ergebnis:

Alle Änderungen im Vergleich könnt ihr hier sehen.

Das Endergebnis könnt ihr hier als ZIP herunterladen oder hier einfach mal ansehen.

Donnerstag, 21. April 2016

Comeback! Bluehazedesign - Grafiken & More

lulu Donnerstag, 21. April 2016 interviews, vorstellung

Die Grafikseite Bluehaze ist nach 2 Jahren stille wieder da und heißt jetzt: Bluehazedesign! Vor fast genau 3 Jahren habe ich die Grafikseite Bluehazeinterviewed (Interview jetzt lesen) und zum Comeback hatte ich jetzt erneut die Chance dazu.

Momentaner Header von Bluehaze

Das "neue" Bluehaze ist, genau wie die alte Seite, eine Grafik Seite die überwiegend Star Grafiken, aber auch immer mehr AniMa Grafiken anbietet. Momentan ist die Auswahl noch sehr begrenzt. Besucher finden dort Facebook Hover, Iconbases, Smartphone Wallpaper, Texturen und normale 100x100 Icons.

Momentan besteht das Team aus Steve und Esthie, es werden aber noch weitere Team Mitglieder gesucht.

Nun viel Spass beim Interview :)

1. Momentan gibt es nicht sehr viele Bereiche auf Bluehazedesign. Wird das so bleiben oder werden weitere Kategorien folgen?

Da wir momentan sehr beschäftigt sind mit unseren Leben ist vorerst nicht geplant,dass noch großartiges an Sektionen dazu kommt. Wir wollten uns von Anfang an auf bestimmte Grafikarten festlegen da wir einfach nicht die Zeit dafür haben, 500 Kategorien zu füllen.

2.Wie viele Webbys werden auf Bluehazedesign noch gesucht? Worauf achtest du bei einem WMC Teilnehmer besonders?

Da haben wir uns eigentlich kein Limit gesetzt und ein so genanntes WMC betreiben wir auch nicht. Jeder, der gerne helfen möchte und Spaß an der Sache hat, ist bei uns herzlich willkommen. Das gilt auch für unsere alten Teammitglieder. Also falls ihr dies lest: Ihr seid jederzeit willkommen :P

3. Was hast du persönlich dir für Bluehazedesign vorgenommen? Was sind deine Zukunftswünsche?

Im Vordergrund steht der Spaß an dem Hobby Webdesign. Wir werden sehen was die Zukunft bringt.

4. Was genau hat dich dazu bewegt, Bluehaze wieder zu eröffnen? Was war ausschlaggebend?

Das war Ehrlich gesagt eine sehr spontane Idee. Ich hatte halt wieder totale Lust so eine Grafikseite auf die Beine zu stellen und fragte Esthie kurzerhand, ob sie nicht auch Lust hätte. Und da sind wir :).

5. Bluehazedesign ist eine der wenigen Grafikseiten, auf der noch "Star Grafiken" angeboten werden. Nun hatten andere Grafikseiten damit schon Probleme. Habt ihr euch rechtlich abgesichert/euch darum Gedanken gemacht?

Ja das ist vollkommen richtig. Bisher habe ich selber nicht wirklich davon mitbekommen, dass es da irgendwelche schwerwiegende Probleme gab. Sicher ist kaum eine Grafikseite, denn auch auf Animebilder gibt es ein Copyright. Wir wollen es natürlich in Zukunft vermeiden, Stargrafiken zu verwenden und benutzen Fotos von privaten Fotografen, bei denen wir uns die Erlaubnis der Nutzung eingeholt haben :).

6. Vor 3 Jahren habe ich dich schon einmal interviewed. Wo siehst du Bluehazedesign in 3 weiteren Jahren?

Das kann ich dir leider nicht sagen xD.

7. Wie würdest du Bluehazedesign beschreiben?

Bluehaze ist eine kleine Grafikseite im WWW. Wir erstellen mit Leidenschaft Grafiken und Ressourcen für unsere Besucher. Wir haben viel Spaß an der Sache selbst und versuchen die Seite so gut wie möglich aktuell zu halten :)

8. Vor 2 Jahren ist Bluehaze offline gegangen. Wie kam es dazu (ich erinnere mich noch das der Layout Ordner gelöscht wurde?)? Besteht die Gefahr, dass sich das Wiederholt?

Nein dies hatte nichts mit der Schließung zu tun. Das mit der Löschung des Layoutordners war kurz vor einem Layoutwechsel. Nach diesem Layoutwechsel existierte Bluehaze noch 3 Monate und wurde dann aus dem Grundgeschlossen,da wir alle keine Zeit hatten und die Lust dann auch irgendwann fehlte auch nur irgendwas an der Seite zu machen.

9. Möchtest du den Lesern noch was sagen? ;)

Also erstmal möchte ich mich anschließen, dass ich es total toll finde, dass PPI wieder da ist. Ich hoffe natürlich auch, dass unsere alten Stammbesucher wieder zu uns zurückfinden und sie sich wie damals auf Bluehaze wohlfühlen und unseren Kram gerne benutzen :)

Momentanes Design von Bluehaze

Dienstag, 19. April 2016

# 8 Dinge die man bei seinem Design beachten sollte

lulu Dienstag, 19. April 2016 gastschreiber, vorstellung

Der heutige Gastpost stammt von Delite. Viel Spass beim Lesen <3

Wenn man das erste Mal eine Homepage erstellt, ist das Design was man dazu nimmt sicherlich das Wichtigste. Es drückt aus, was meine Homepage ausmacht und gibt Besuchern den ersten Eindruck.

## 1. Inspiration & Resources

Neben den vielen tollen Grafikseiten wie Pink Pearl gibt es auch noch andere nette Referenzen.

### Frameworks

### Fonts

### Icons

### Layouts

themezy

### Bilder

### Farben

Die Farbwahl ist immer eine schwierige Geschichte. Hier können euch Portale wie colourlovers helfen. Auch gibt es einige Tools, die euch anhand von Gestaltungsregeln die perfekte Palette mischen: coolors.co und colorpicker.

## 2. Dinge ausprobieren

Vor allem, wenn man als Team an einem Layout bastelt, möchte man vielleicht auch kleinere Experimente machen oder sogar Code-Snippets teilen. Vielleicht seid ihr ja sogar eine Grafikseite und wollt Code-Snippets für eure Besucher verfügbar machen.

Dafür gibt es spannende Tools wie jsfiddle, die es euch ermöglichen, im Browser direkt HTML/CSS/Javascript auszuprobieren. Ihr könnt dort sogar fremde Snippets 'forken' d.h. selber weiterführen. Außerdem könnt ihr externe Bibliotheken wie JQuery einbetten oder sogar den Verlauf eures Snippets im Auge behalten. Darüber hinaus könnt ihr mit mehreren Leuten gleichzeitig an einem Snippet arbeiten. Ich habe hier z.B. eine Pulse-Animation erstellt.

## 3. Lesbarkeit

Es gibt viele wichtige Guidelines in diesem Bereich. Vor allen Dingen wenn eure Seite aus viel Text besteht z.B. Blog oder Staffelpage, solltet ihr euch mal einige Best Practices aneignen.

Eine gute Sammlung einer solchen Guideline kann z.B. in diesem Blog Post gefunden werden. Dieser Artikel ist zwar auf englisch, sollte aber leicht verständlich sein.

Überlegt immer gut welche Schriftart und Schriftgröße ihr auf welchen Farben benutzt. Kontrast und Zeilenabstand spielen eine sehr große Rolle.

## 4. Hover und andere States

Heutzutage ist nichts wichtiger als Haptik auf unseren Seiten. Wir wollen keine eingefrorenen Seiten, sondern welche, die auf unsere Interaktion reagieren. Unsere Seite soll ruhig wirken aber gleichzeitig dem Nutzer das richtige Feedback geben.

Wichtig hierzu sind z.B. hover-States bei Links - so merke ich heutzutage als User überhaupt, dass es ein Link ist. Eine Liste von sog. Pseudo-Classes findet ihr hier.

Darüber hinaus haben viele Seiten heuzutage den sog. *Parallax* Effekt, der dem User Feedback beim Scrollen gibt. Zu diesem Thema gibt es zahlreiche Tutorials z.B. dieses hier.

Seit CSS3 haben wir auch viele andere Möglichkeiten wie unsere Effekte aussehen könnten. Wir können Animationen und Transitionen im puren CSS schreiben. Tutorials und Beispiele findet ihr z.B. hier:

## 5. Bildgrößen

Bei diesem Thema geht es weniger um die Dimensionen, sondern mehr um die Dateigröße. Bilder und Webfonts machen heutzutage den Großteil einer Website aus, wenn sie heruntergeladen wird. Auf eurem Mobiltelefonen habt ihr sicherlich schon gemerkt wie lange so etwas laden kann.

Um dem entgegen zu wirken solltet ihr immer eure Bilder gut komprimieren und dafür sorgen, dass sie gecached werden. Damit ihr versteht was die Probleme auf eurer Website sind, solltet ihr Google PageSpeed Insights verwenden. Google gibt euch wichtige Tipps.

Wenn ihr dort die Probleme behebt, werdet ihr vermutlich zu mehr mobilen Visits kommen.

## 6. Unterschiedliche Gerätegrößen

An dem Buzzword Reponsive Design kommt man heute schwer vorbei. Da immer mehr Leute mobile Geräte wie Smartphones und Tablets benutzen (oder sogar Uhren!). Wer schonmal Google Analytics auf seiner Seite aufgesetzt hat weiss, dass heutzutage viele Nutzer vom Handy kommen. Die meisten Frameworks liefern schon eingebaute Reponsive-Patterns und unterstützen sie.

Aber was bedeutet Responsive-Design und wie kann ich es einsetzen?

Das ist natürlich ein Thema für sich, was ich gerne weiter ausführe, wenn es jemanden interessiert ;)

Grob gesagt spielen die sog. Media Queries eine große Rolle. Benutzt ihr sie in eurem CSS Code könnt ihr Designs für bestimmte Geräte Größen anwenden. Z.B. könntet ihr auf Desktop zwei floatende DIVs mit der Breite von 50% haben und auf Mobile sind diese DIVs dann z.B. 100% breit. Es gibt einige Standard-Patterns zu diesem Thema. Frameworks wie Bootstrap erklären euch auch viel dazu.

## 7. Unterschiedliche Browser

Heutzutage sind nicht nur unterschiedliche Browser wichtig, sondern auch unterschiedliche Betriebssysteme. Selbst bei gleichen Browsern gibt es auf unterschiedlichen Geräten schon einige Unterschiede.

Ich würde immer empfehlen, mindestens zwei unterschiedliche Browser auf eurem Computer installiert zu haben. Wenn ihr auf Nummer Sicher gehen wollt wie eure Seite auf unterschiedlichen Seiten ausschaut könnt ihr z.B. das kostenlose Tool browserling benutzen. Dort könnt ihr unterschiedliche Kombinationen testen <3

Außerdem gibt es hilfreiche Seiten, die euch sagen welche CSS-Eigenschaften wo funktionieren z.B. bei caniuse.

*Profitipp:* InternetExplorer 8 und älter wird heute von kaum jemanden mehr unterstützt. Microsoft selbst hat den Support aufgegeben :O

## 8. Man lernt nie aus

Das Internet ist voll von zahlreichen spannenden Tutorials. Egal ob für Anfänger oder Fortgeschrittene. Ihr könntet z.B. Video-Tutorials von udemy ausprobieren. Dort gibt es auch einige deutsche & kostenlose Videos.

Wenn ihr englisch sprecht und etwas tiefer eintauchen wollt, könntet ihr auch codeschool mal ausprobieren.

***

## Schlusswort

Euer erstes Layout begleitet euch eine ganze Weile. Meistens hat man sich sehr schnell an einem Layout sattgesehen, insbesondere wenn man es selbst erstellt hat. Daher ist es immer gut ein wenig Feedback einzuholen und eine objektive Checklist hervorzuhohlen.

Wenn ihr noch Fragen habt oder Themen, die ihr gerne vertiefen würdet, sendet mir doch eine Email an delitecake@gmail.com oder fügt einen Kommentar hinzu.

Montag, 18. April 2016

Event Woche #2 - Magie

lulu Montag, 18. April 2016 event

Jahaa, Ewigkeiten ist es her, dass die erste Event Woche auf PinkPearl Info gestartet wurde. Genauer gesagt war das im Mai 2013! Ich finde, es ist Zeit für eine zweite Event Woche :D Und da es neulich schon Ressourcen zum Thema "Magie" gab, lautet so auch das Thema dieser zweiten Event Woche.

Was ist eine Event Woche?

Bei einer Event Woche bringen alle teilnehmende Seiten eine Woche lang nur Sachen von einem bestimmten Thema (in diesem Fall "Magie") online.

Du willst mit deiner Seite mitmachen?

Super! Hinterlasse hier einfach einen Kommentar und ich trage dich in die Liste ein! In der ersten Mai Woche (01.05. - einschl. 08.05) bringst du bzw. ihr dann einfach nur Updates mit zum Thema "Magie" online. Du solltest in dieser Zeit mindestens ein Update online bringen. Natürlich wär es cooler, wenn es mehrere Updates wären ;) Es dürfen ALLE Seiten mit machen ^_^ Egal ob Blog, Grafikseite, Staffel oder sonst was.

Thema "Magie" - was kann ich tun?

Es sind keine Grenzen gesetzt! Du kannst ein Review über einen magischen Anime schreiben, Grafiken erstellen, Informationen zu einem Anime online bringen, Bilder hochladen und und und :)

Anime zum Thema Magie wären zum Beispiel (es gibt natürlich noch viele mehr):
Magic Girl Anime wie zum Beispiel SailorMoon, Doremi, Mermaid Melody, Pretty Cure....

YuGiOh: "Magier Monster"

Fantasy Anime wie zum Beispiel Accel World, Sword Art Online, Fate Stay Night

Magische Anime wie z.B. Zero no Tsukaima, Magi, Zetsuen no Tempest...

Bitte schreib mir doch, wenn du ein Update online gestellt hast, dann stell ich es hier auf PinkPearl Info vor!

Ich hoffe natürlich, dass viele Seiten mit machen und wir zusammen die erste Mai Woche in eine magische Woche verwandeln -^.^-

Teilnehmende Seiten

Zum Anmelden einfach einen Kommentar hinterlassen. Bis einschließlich 30.04. kannst du dich anmelden :)

Samstag, 16. April 2016

Ein Monat PPI - Feedback!?

lulu Samstag, 16. April 2016 pinkpearlinfo

Wie schnell die Zeit rast! Ein Monat ist es jetzt bereits schon wieder her, seit ich mich spontan dazu entschlossen habe, PinkPearl Info (PPI) wieder aufleben zu lassen. Unglaublich!
In dieser Zeit sind über 20 Artikel online und viele neue Mitglieder dazu gekommen.

Nun möchte ich diesen Post nutzen, um von euch ein kleines Feedback zu bekommen.

Wie fandest du die Artikel des letzten Monats?
Hat dir etwas gefehlt?
Hast du Wünsche, Anregungen oder Kritik?
Was gefällt dir auf PPI, was könnte man deiner Meinung nach besser/anders machen?

Ich würde mich sehr über ein wenig Feedback freuen. Wenn dir etwas nicht gefällt, kannst du das ruhig aufschreiben - es muss auch nicht gleich ein "Verbesserungsvorschlag" dabei sein ;)

Ich bin auf jeden Fall sehr gespannt ^_^

Gerne kannst du mir auch eine EMail schreiben.

PinkPearl Info Statistik des letzten Monats

Vielleicht ist es für den ein oder anderen Interessant ^_^ Vielen Dank für die vielen lieben Kommentare, die Unterstützung und Anregungen!

Seitenaufrufe von 17.03.16 - 15.04.16

Seitenaufrufe nach Land

Post Seitenaufrufe

Zugriffsquellen

Freitag, 15. April 2016

Ich sehe rosa - Girly Ressourcen für dich

lulu Freitag, 15. April 2016 gfx

Wer mich kennt weiß, dass ich auf die typischen Mädchen Farben wie Pink, Rosa und Lila stehe. Und aus diesem Grund habe ich euch heute "Girly" Ressourcen dabei :) Und da ich finde, dass manche Grafikseiten unter unseren Mitgliedern wahre Schätze verstecken, stammen alle Ressourcen heute von den Mitgliedern von PinkPearl Info. Bitte beachte die Regeln der jeweiligen Seiten.