<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">News</h2>
<h3 class="section-subheading text-muted">Hier wird &WCF_AMPERSANDüber alle Neuigkeiten / Events berichtet.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/tod66.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>25.08.2018</h4>
<h4 class="subheading">Erneutes Kill-Event</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Am kommenden Samstag, den 25.08.18 wird es ein weiteres Kill-Event geben, bei dem Ihr die Person sein m&WCF_AMPERSANDüsst, die die meisten Kills macht. Ihr werdet an dem Tag mit jeweils zwei anderen Usern in einen Channel gemovet, wo das Event dann beginnt, wobei Ihr vorerst in dem Event-Warteraum erscheinen m&WCF_AMPERSANDüsst, wenn Ihr Lust habt mitzumachen. Wie bei jedem Event gibt es f&WCF_AMPERSANDür die ersten 3 Pl&WCF_AMPERSANDätze wieder diverse Pr&WCF_AMPERSANDämien wie z. B. VIP+ usw. Weitere Informationen gibt es in der Channelbeschreibung des Channels "Event -> Samstag 25.08.18 Uhr KILLEVENT". </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/score1.png" alt="YouTuber">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>10.08.2018</h4>
<h4 class="subheading">Punktestand</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Ab heute dem 10.08.18 k&WCF_AMPERSANDönnt Ihr Euren Score bei dem Weekend Event einsehen. Der Punktestand jedes Spielers wird im Laufe des Tages dauerhaft geupdated, sofern Ihr Euch auf dem TeamSpeak befindet, also keine Sorge, sofern Dein Score nicht direkt mit Deinen Wins/Kills &WCF_AMPERSANDübereinstimmen sollte. Klicke <a href="http://www.fortnite-ts3.com/weekend.php">HIER</a> um dein Score einzusehen. </p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/weekend.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>09.08.2018</h4>
<h4 class="subheading">Weekend Event</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Neues Special Event
Am 10.08.18 findet ein neues Event, welches mehrere Tage lang andauert, auf unserem Teamspeak statt. Teilnahmebedingungen und Informationen findest du <a href="http://www.fortnite-ts3.com/weekend.html">HIER</a></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/youtube.png" alt="YouTuber">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>17.07.2018</h4>
<h4 class="subheading">Neue Promotion</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Heute ist der YouTuber <a href="https://www.youtube.com/channel/UC4X1GLByRY4GVPaEEJTy6Og">ERROX</a> unserer Promotion beigetreten. Wir hoffen auf eine gute gemeinsame Zeit mit vielen tollen Community Events und mehr! </p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/Fortnitecheck.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>16.07.2018</h4>
<h4 class="subheading">Fortnitecheck.de</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Ab heute k&WCF_AMPERSANDönnt ihr &WCF_AMPERSANDüber der Webseite <a href="http://Fortnitecheck.de/">Fortnitecheck.de</a> eure Punkte checken, um zu sehen wv. Punkte ihr ben&WCF_AMPERSANDötigt um auf die Banner Toplist zu gelangen. Voraussetzung: Ihr m&WCF_AMPERSANDüsst eingerankt werden [hierf&WCF_AMPERSANDür ben&WCF_AMPERSANDötigt ihr jeweils in Solo, Duo und Squad 15 Matches.</a></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/topplayer.png" alt="TopPlayers">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>14.07.2018</h4>
<h4 class="subheading">Top Players</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Ab jetzt werden die besten Spieler des TeamSpeak3 Servers oben rechts im Banner erw&WCF_AMPERSANDähnt. [Voraussetzung zum ein ranken: 15 Matches in Solo, Duo und Squad.] Zudem k&WCF_AMPERSANDönnen die Spieler Ihre Punktzahl einsehen, um zu wissen wie viele Punkte sie ben&WCF_AMPERSANDötigen, um ein Platz aufzusteigen. </p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/%C3%BCberleben.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>07.07.2018</h4>
<h4 class="subheading">1vs1 Event</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Am 07.07.2018 findet ein einzigartiges Event statt! Das erste mal bei uns gibt es ein 1 vs 1 Event. Zu Gewinnen gibt es unter anderem V-Bucks, VIP-R&WCF_AMPERSANDänge und vieles mehr. Weitere Informationen findest du <a href=1vs1.html>hier.</a></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
Alles anzeigen
das wäre die Timeline [HTML-Datei]
// Styling for the timeline section
.timeline {
position: relative;
padding: 0;
list-style: none;
&:before {
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
content: '';
background-color: $gray-200;
}
> li {
position: relative;
min-height: 50px;
margin-bottom: 50px;
&:after,
&:before {
display: table;
content: ' ';
}
&:after {
clear: both;
}
.timeline-panel {
position: relative;
float: right;
width: 100%;
padding: 0 20px 0 100px;
text-align: left;
&:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
&:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
}
.timeline-image {
position: absolute;
z-index: 100;
left: 0;
width: 80px;
height: 80px;
margin-left: 0;
text-align: center;
color: white;
border: 7px solid $gray-200;
border-radius: 100%;
background-color: $primary;
h4 {
font-size: 10px;
line-height: 14px;
margin-top: 12px;
}
}
&.timeline-inverted > .timeline-panel {
float: right;
padding: 0 20px 0 100px;
text-align: left;
&:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
&:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
}
&:last-child {
margin-bottom: 0;
}
}
.timeline-heading {
h4 {
margin-top: 0;
color: inherit;
&.subheading {
text-transform: none;
}
}
}
.timeline-body {
> ul,
> p {
margin-bottom: 0;
}
}
}
@media(min-width:768px) {
.timeline {
&:before {
left: 50%;
}
> li {
min-height: 100px;
margin-bottom: 100px;
.timeline-panel {
float: left;
width: 41%;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline-image {
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
h4 {
font-size: 13px;
line-height: 18px;
margin-top: 16px;
}
}
&.timeline-inverted > .timeline-panel {
float: right;
padding: 0 30px 20px 20px;
text-align: left;
}
}
}
}
@media(min-width:992px) {
.timeline {
> li {
min-height: 150px;
.timeline-panel {
padding: 0 20px 20px;
}
.timeline-image {
width: 150px;
height: 150px;
margin-left: -75px;
h4 {
font-size: 18px;
line-height: 26px;
margin-top: 30px;
}
}
&.timeline-inverted > .timeline-panel {
padding: 0 20px 20px;
}
}
}
}
@media(min-width:1200px) {
.timeline {
> li {
min-height: 170px;
.timeline-panel {
padding: 0 20px 20px 100px;
}
.timeline-image {
width: 170px;
height: 170px;
margin-left: -85px;
h4 {
margin-top: 40px;
}
}
&.timeline-inverted > .timeline-panel {
padding: 0 100px 20px 20px;
}
}
}
}
Alles anzeigen
Css-Datei der Timeline
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Problem 2:
<!-- Contact -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Kontakt</h2>
<h3 class="section-subheading text-muted">F&WCF_AMPERSANDülle das Formular aus um mit uns in Kontakt zu treten.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form id="contactForm" name="sentMessage" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Name *" required data-validation-required-message="Bitte teile uns dein Namen mit.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Email *" required data-validation-required-message="Bitte teile uns deine Email Adresse mit.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="Deine Nachricht *" required data-validation-required-message="Bitte fülle deine Nachricht aus."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Nachricht Senden</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
Alles anzeigen
HTML Kontakt Datei
<?php
// Check for empty fields
if(empty($_POST['name'])
empty($_POST['email'])
empty($_POST['phone'])
empty($_POST['message'])
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = 'info@fortnite-ts3.com'; // Add your email address inbetween the '' replacing [email='yourname@yourdomain.com'][/email] - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: [email='noreply@yourdomain.com'][/email]\n"; // This is the email address the generated message will be from. We recommend using something like [email='noreply@yourdomain.com'][/email].
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
Alles anzeigen
PHP Kontakt Datei