So, hier habe ich mal meine Idee so weit umgesetzt.

Ich finde, es sieht sehr gut für mich aus, ich habe eine schlichte Wahl getroffen, mit dem aussehen. Ich gebe zu so gut mit Scripte schreiben bin ich nicht, ich schaue auch im Internet nach wie oder was ich in CSS Code eingeben muss.

Oder im HTML Code, was ich an CodePen so gut finde, ist egal, was Du machst. Er aktualisiert immer nach Eingabe automatisch und man sieht, was man macht. Ich finde das Programm einfach gut, damit komme ich recht gut klar.

Das interessiert mich und inspiriert mich und ich habe da voll den Spaß dabei etwas damit zu machen. Es stimmt, was viele sagen, mit CodePen muss man kein Programmierer zu sein, um etwas zu erstellen, man muss nur verstehen, was man da macht und eingibt und man kann sich während der Arbeit immer im Internet nachschauen, was Du jetzt brauchst oder welche CSS-TAG Du eingeben musst und welche Funktion das hat.

Man lernt nie aus, im Leben habe ich schon gemerkt, man lernt immer dazu.

Ich hoffe das Wolfgang nichts dagegen hat.

Dass ich hier in diesem Post meine Arbeit Stück für Stück dokumentiere, von Anfang bis Ende, mit Bildern. Mit den "CSS Code" und "HTML Code" würde ich den Überblick sprengen.

Den kann man am Schluss ja sehen, wenn ich die beiden Codes am Schluss einfüge. Ich habe hier alle CSS-TAG geändert, diese schreibe ich jetzt mal hier rein.

Geänderte CSS-TAG "CSS Code" und "HTML Code"

"wrapper3", "left3", "right3", "info3", "info_data3", "data3", "projects3", "projects_data3", und am Schluss für die Verlinkung neuer TAB z.B. Facebook Symbol "<li><a href="#"" target="_blank"><i class="fab fa-facebook"></i></a></li>"

Und die "social_media3". <--- gehört zu Awesome Symbole!


Ich hoffe, dass ich so weit alle CSS-TAG geändert habe da ich Wolfgangs Rat gefolgt bin, da diese sonst Veränderungen im Xobor-Forum machen würden.

Viele würden sich jetzt fragen:

Wenn man sich das anschaut --> für die Verlinkung neuer TAB z.B. Facebook Symbol "<li><a href="#"" target="_blank"><i class="fab fa-facebook"></i></a></li>" was das ist und wo da die Verlinkung ist. Ich habe die Raute rot markiert, da der Facebook link des jeweiligen Benutzers da eingefügt wird.

Diese Symbole werden am Schluss unten rechts zu sehen sein.

Diese sind Font Awesome Symbole, diese werden mit "HTML Codes" erzeugt. Das sieht wie folgt aus "<i class="fab fa-facebook"></i>"

Um zu verstehen, wie ich das meine, könnt ihr es Euch hier anschauen --> Awesome Symbole! dort könnt ihr dann runterscrollen. Dann seht ihr alle Symbolen, die es gibt und den HTML Code wird dann angezeigt. Dazu müsst ihr dann das jeweilige Symbol anklicken. Man kann auch Symbole in der Suchleiste suchen.


Ich habe mich einfach für ein schlichtes Design entschieden.

Die Profilkarte ist noch nicht fertig, auf der rechten Seite werden Informationen und die Symbole sein.

Die E-Mail-Adresse ist auch schon mit eingebaut

Die Ansicht der Profilkarte ist jetzt schon der Hammer nur ist sie noch nicht fertig. Es fehlen noch die Font Awesome Symbole, wenn diese noch eingebaut sind ist diese Profilkarte für mich perfekt

Die Ansicht der Profilkarte ist jetzt schon perfekt für mich. Wie man jetzt erkennen kann, sind jetzt die Font Awesome Symbole eingefügt, um zu zeigen, dass dieser Font Awesome Symbole funktioniert habe ich den letzten verlinkt. Ich habe dafür ein Blogger Symbol benutzt und mit Wolfgangs Blog verlinkt. Es öffnet sich im neuen Tab.



So, meine Idee ist umgesetzt.

Das ist das Endergebnis

Damit die Font Awesome Symbole, so schön zur Geltung kommen habe ich den CSS-TAG "p3" geändert. So sieht es noch cooler aus.in "CSS" und in "HTML" und ich habe den CSS-TAG "a3" nur in der "CSS" geändert.


Ich wollte mit der Profilkarte Wolfgang eine Freude machen.

Ich hoffe, es gefällt Wolfgang, war viel Arbeit.

Hier sind die HTML Codes

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
 

<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
 
<div class="wrapper3">
    <div class="left3">
<img src="https://bilderupload.org/image/f64e44989-wolfgang.gif" alt="user" width="100">
        <h4>Wolfgang</h4>
         <p3>Administrator</p3>
    </div>
    <div class="right3">
        <div class="info3">
            <h3>Information</h3>
            <div class="info_data3">
                 <div class="data3">
                    <h4>&#9993; E-mail</h4>
                    <p3><a href="mailto:forum@hilfe-tricks-tipps.de">­E-mail senden</a></p3>
                 </div>
                 <div class="data3">
                   <h4>&#x260f; Phone</h4>
                    <p3>123-456789</p3>
              </div>
            </div>
        </div>
      
      <div class="projects3">
            <h3>Projekt</h3>
            <div class="projects_data3">
                 <div class="data3">
                    <h4>&#x1F5E8; Forum</h4>
                    <p3>Der Treffpunkt
                      <br>für Hilfe,        
                      <br>Tricks & Tipps</p3>
                 </div>
                 <div class="data3">
                    <h4>&#x1F4BB; Hobby</h4>
                    <p3>Programieren  Testen und Fehler entdecken</p3>
              </div>
            </div>
        </div>
      
      <div class="social_media3">
            <ul>
<li><a href="#"" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"" target="_blank"><i class="fab fa-instagram"></i></a></li>
  <li><a href="https://www.hilfe-tricks-tipps.de/blog.html"" target="_blank"><i class="fab fa-blogger"></i></a></li>
          </ul>
      </div>
    </div>
</div>
 
 
 

Schließen

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
 

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
}
 
 body{
   background-color: #f3f3f3;
}
 
.wrapper3{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 450px;
  display: flex;
  box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);
}
 
.wrapper3 .left3{
  width: 35%;
  background: linear-gradient(to right,#01a9ac,#01dbdf);
  padding: 30px 25px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
  color: #fff;
}
 
.wrapper3 .left3 img{
  border-radius: 5px;
  margin-bottom: 10px;
}
 
.wrapper3 .left3 h4{
  margin-bottom: 10px;
}
 
.wrapper3 .left3 p3{
  font-size: 12px;
}
 
.wrapper3 .right3{
  width: 65%;
  background: #fff;
  padding: 30px 25px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
 
 
.wrapper3 .right3 .info3,
.wrapper3 .right3 .projects3{
  margin-bottom: 25px;
}
 
.wrapper3 .right3 .info3 h3,
.wrapper3 .right3 .projects3 h3{
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
    color: #353c4e;
  text-transform: uppercase;
  letter-spacing: 5px;
}
 
.wrapper3 .right3 .info_data3,
.wrapper3 .right3 .projects_data3{
  display: flex;
  justify-content: space-between;
}
 
.wrapper3 .right3 .info_data3 .data3,
.wrapper3 .right3 .projects_data3 .data3{
  width: 45%;
}
 
.wrapper3 .right3 .info_data3 .data3 h4,
.wrapper3 .right3 .projects_data3 .data3 h4{
    color: #353c4e;
    margin-bottom: 5px;
}
 
.wrapper3 .right3 .info_data3 .data3 p3,
.wrapper3 .right3 .projects_data3 .data3 p3{
  font-size: 13px;
  margin-bottom: 10px;
  color: #919aa3;
}
 
 
.wrapper3 .social_media3 ul{
  display: flex;
}
 
.wrapper3 .social_media3 ul li{
  width: 45px;
  height: 45px;
  background: linear-gradient(to right,#01a9ac,#01dbdf);
  margin-right: 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 45px;
}
 
.wrapper3 .social_media3 ul li a3{
  color :#fff;
  display: block;
  font-size: 18px;
}
 
 

Schließen

Zitat von Wolfgang im Beitrag Geburtstagskarte

---

Deswegen können gleiche "CSS-TAG's" wie "body, card, header, content, container, ...." das gesamte Layout des Forums verändern."body" versuche ich wegzulassen oder die Werte auf einen anderen Div-Container zu übertragen! Abhilfe schafft auch, wenn man die "CSS-TAG's" mit einem Buchstaben oder einer Zahl verlängert!

---

Hallo Wolfgang, ich danke dir erstmal recht herzlich für die nette Erklärung.

Ich habe mir mal erlaubt deine geänderten Codes in CodePen einzugeben, hat 'ne Weile gedauert bis er es geladen hat, funktioniert einwandfrei.

Werde deine Codes mir als Hilfsmittel zur Seite legen und damit üben, dass ich es genauer verstehe bevor ich jetzt was Neues starte.

Ich muss sagen du hast eine Hammer-Arbeit gemacht, die Profilkarte sieht echt Hammer aus, mit den glänzenden 2 Ecken auf der Linken Seite, Respekt.

Hallo Wolfgang,

ich bin am verzweifeln, was mache ich falsch?

Ich wollte deine Profilkarte als Partner verwenden als Klick in der Iconbar.

Ich habe es so gemacht:

Ersetze:
[Partner]
mit
<!-- Profilkarte mit Social-Button -->   <!--  Font Awesome Symbole --> <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>   <!-- Abstand zum oberen Rand --> <br><br>   <div class="wrapper3">   <div class="left3">     <!-- Avatar -->     <img src="//files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif" alt="Avatar" width="100px">     <h4>Wolfgang</h4>     <p>Administrator</p>   </div>     <div class="right3">       <div class="info3">       <h3>Information</h3>       <div class="info_data3">         <div class="data3">           <h4>&#9993; E-Mail</h4>           <!-- Information: E-Mail Adresse -->           <p><a href="mailto:forum@hilfe-tricks-tipps.de">­E-Mail senden</a></p>         </div>         <div class="data3">         <h4>&#9743; Phone</h4>         <!-- Information: Telefonnummer -->         <p>123-456789</p>         </div>       </div>     </div>     <div class="projects3">       <h3>Projekt</h3>       <div class="projects_data3">         <div class="data3">           <h4>&#x1F5E8
 
[/Partner]
mit
</div>
 

Ein dickes Lob an dich Wolfgang

Du leistest hier echt eine Super-Arbeit, du setzt alles um wie im Handumdrehen. Wie wenn, das ein Klacks für dich wäre, ein Riesen-Respekt, das sieht alles so einfach bei dir aus.

Ich sehe es ja, wie viel Arbeit das alles macht. Respekt und deine Ideen, einfach Hammer, weiter so, ein mega Lob an dich.

Mit freundlichen Grüßen
Daishi