Beiträge von TakeOnMii

TakeOnMii · 1. Januar 2021

Hatte ich auch schon weg gemacht

TakeOnMii · 1. Januar 2021

Zitat von tk1234

Was mir gerade noch auffällt: warum schreibst du statt → nicht den Pfeil direkt in den Code? Mit UTF-8 ist das kein Problem …

Ich habe im Internet gesucht wie ich einen Pfeil mache, weil "-->" nicht so gut aussieht. Da bin ich dann auf eine Website gestoßen auf dieser man Emojis etc. für HTML finden kann mit allen Codes.

Zitat von tk1234

den Fehler mit font-color zeigt VS Code an, die Fehler im HTML nicht da der Code (standardmäßig) nicht validiert wird, nur das <center> wäre anhand der

font-color und <center> hatte ich schon weggemacht.

TakeOnMii · 1. Januar 2021

Sorry für die späte Antwort, aber bei mir in Visual Studio Code zeigt der mir keine Fehler an.

TakeOnMii · 1. Januar 2021

Ja

TakeOnMii · 1. Januar 2021

Danke hast mir echt geholfen

TakeOnMii · 1. Januar 2021

Ich wollte, dass das ABOUT und CONTACT Vertikal Mittig sind.

TakeOnMii · 1. Januar 2021

Also ich meinte den Contact und About Text

TakeOnMii · 1. Januar 2021

Nur so ein kleiner Fehler und fast alles bricht zusammen.

Naja danke dir und wie mach ich die an der Seite wieder zentriert?

Sorry das ich dich so Durchlöcher mit Fragen.

TakeOnMii · 1. Januar 2021

Ich habe die Seite zwar noch nicht Online, aber ich kann dir den Code eben schicken:

HTML: Work.html

<!doctype html>
<html lang="de">
<head>
    <link rel="stylesheet" href="Work.css">
    <script language="javascript" type="text/javascript" src="Zeitstrahl.js"></script>
<meta charset="utf-8">
<title>Work | Florian</title>
</head>
<body>
    
    <!--Links-->
    
    <div class="About">
        <a href="About.html">
            <h1>
                <center>ABOUT</center>
            </h1>
        </a>
    </div>
    <div class="Home">
        <a href="Index.html">
            <h1>
                <center>HOME</center>
            </h1>
        </a>
    </div>
    <div class="Contact">
        <a href="Contact.html">
            <h1>
                <center>CONTACT</center>
            </h1>
        </a>
    </div>
    
    <!--Timeline-->
    <div class="timeline-container" id="timeline-1">
  <div class="timeline-header">
    <h2 class="timeline-header__title">Meine Projekte</h2>
    <h3 class="timeline-header__subtitle"><a href="Work2.html">Alt &rarr; Neu</a></h3>
  </div>
    </div>
      <div class="timeline-item" data-text="Wie gründe ich eine Partei? | April 2020">
      <div class="timeline__content"><video class="timeline__img" src="Work/Videos/Wie gründe ich eine Partei.mp4" controls></video>
        <p class="timeline__content-desc">Meine erste Animation die ich gemacht habe. Zum Thema wie man in Deutschland eine Partei gründet.</p>
        </div>
    </div>
    <div class="timeline-item" data-text="E-Autos, die Zukunft? | März 2020">
      <div class="timeline__content"><video class="timeline__img" src="Work/Videos/E-Autos, die Zukunft.mp4" controls></video>
        <p class="timeline__content-desc">In meinem 2. Animierten Video informiere ich über das Thema E-Mobilität, was an ihr gut und schlecht ist. Die Recherche, das Skript, die Grafiken und das Video wurden wurde von mir gemacht.</p>
      </div>
    </div>
    <div class="timeline-item" data-text="At the Jobcentre | Oktober 2020">
      <div class="timeline__content"><video class="timeline__img" src="Work/Videos/at the jobcentre_final_farbig_gt20d_jan_kamischke_florian_tuens.mp4" controls></video>
        <p class="timeline__content-desc">Es ist nicht nur die erste Animation die ich in After Effects gemacht habe, sondern auch das erste mal das ich was in Blender modelliert habe. Die beiden Figuren wurden von einem Freund gemacht.</p>
        </div>
    </div>
    <div class="timeline-item" data-text="Website Start animation | Dezember 2020">
      <div class="timeline__content"><video class="timeline__img" src="Ohne Schrift.mp4" controls></video>
        <p class="timeline__content-desc">Die 4. Animation die ich gemacht habe ist zugleich die Animation auf der Startseite. Das ist die Erste Körper Animation. Die Körperanimation wurde mit dem AE Plugin Duik V2 gemacht.</p>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script>
    
    (function($) {
  $.fn.timeline = function() {
    var selectors = {
      id: $(this),
      item: $(this).find(".timeline-item"),
      activeClass: "timeline-item--active",
      img: ".timeline__img"
    };
    selectors.item.eq(0).addClass(selectors.activeClass);
    selectors.id.css(
      "background-image",
      "url(" +
        selectors.item
          .first()
          .find(selectors.img)
          .attr("src") +
        ")"
    );
    var itemLength = selectors.item.length;
    $(window).scroll(function() {
      var max, min;
      var pos = $(this).scrollTop();
      selectors.item.each(function(i) {
        min = $(this).offset().top;
        max = $(this).height() + $(this).offset().top;
        var that = $(this);
        if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
          selectors.item.removeClass(selectors.activeClass);
          selectors.id.css(
            "background-image",
            "url(" +
              selectors.item
                .last()
                .find(selectors.img)
                .attr("src") +
              ")"
          );
          selectors.item.last().addClass(selectors.activeClass);
        } else if (pos <= max - 40 && pos >= min) {
          selectors.id.css(
            "background-image",
            "url(" +
              $(this)
                .find(selectors.img)
                .attr("src") +
              ")"
          );
          selectors.item.removeClass(selectors.activeClass);
          $(this).addClass(selectors.activeClass);
        }
      });
    });
  };
})(jQuery);

$("#timeline-1").timeline();

    </script>
      </div></div></body>
</html>

Alles anzeigen

CSS: Work.css

@charset "utf-8";
/* CSS Document */
    a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background: #03FFEA;
    overflow-x: hidden;
}

h1 {
 font-color: #6f6f6f;
    font-size: 300%;
    z-index: 2;
color: white;
}
 .Home {    
             flex-direction: row;
            display: flex;
            align-self: center;
            align-content: center;
            z-index: 3;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
             text-align: center;
        }
        .About {
            flex-direction: row;
            display: flex;
            transform: rotate(90deg);
            z-index: 3;
            position: fixed;
            left: 0;
            top: 5em;
            text-align: center;
        }
        .Contact {
            flex-direction: row;
            display: flex;
            transform: rotate(-90deg);
            z-index: 3;
            position: fixed;
            right: 0;
            top: 5em;
            text-align: center;

/*Zeitleiste CREDIT: https://www.youtube.com/watch?v=GrQ7IVQZtgs */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}  /* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.intro {
  padding: 100px 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 2.5rem;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

*{
            margin: 0;
            padding: 0;
        }
.timeline {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 700px;
  position: relative;
}
.timeline__content-title {
  font-weight: normal;
  font-size: 66px;
  margin: -10px 0 0 0;
  transition: 0.4s;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
  color: #fff;
}
.timeline__content-desc {
z-index: 5;
  margin: 0;
  font-size: 20px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: normal;
  line-height: 25px;
}
.timeline:before {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  content: "";
  background: rgba(255,255,255,0.80);
}
@media only screen and (max-width: 767px) {
  .timeline:before {
    left: 40px;
  }
}
.timeline-item {
  padding: 40px 0;
  opacity: 0.3;
  filter: blur(2px);
  transition: 0.5s;
  box-sizing: border-box;
  width: calc(50% - 40px);
  display: flex;
  position: relative;
  transform: translateY(-80px);
}
.timeline-item:before {
  content: attr(data-text);
  letter-spacing: 3px;
  width: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
    font-weight: bold;
  font-size: 16px;
  font-family: 'Pathway Gothic One', sans-serif;
  border-left: 2px solid rgba(255, 255, 255, .5);
  top: 70%;
  margin-top: -5px;
  padding-left: 15px;
  opacity: 0;
  right: calc(-100% - 56px);
}
.timeline-item:nth-child(even) {
  align-self: flex-end;
}
.timeline-item:nth-child(even):before {
  right: auto;
  text-align: right;
  left: calc(-100% - 56px);
  padding-left: 0;
  border-left: none;
  border-right: 2px solid rgba(255, 255, 255, .5);
  padding-right: 15px;
}
.timeline-item--active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}
.timeline-item--active:before {
  top: 50%;
  transition: 0.3s all 0.2s;
  opacity: 1;
}
.timeline-item--active .timeline__content-title {
  margin: -50px 0 20px 0;
}
@media only screen and (max-width: 767px) {
  .timeline-item {
    align-self: baseline !important;
    width: 100%;
    padding: 0 30px 150px 80px;
  }
  .timeline-item:before {
    left: 10px !important;
    padding: 0 !important;
    top: 50px;
    text-align: center !important;
    width: 60px;
    border: none !important;
  }
  .timeline-item:last-child {
    padding-bottom: 40px;
  }
}
.timeline__img {
  max-width: 100%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
}
.timeline-container {
  width: 100%;
  position: relative;
  padding: 80px 0;
  transition: 0.3s ease 0s;
  background-attachment: fixed;
  background-size: cover;
}
.timeline-container:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.timeline-header {
  width: 100%;
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}
.timeline-header__title {
  color: #ffff;
  font-size: 58px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: bold;
  margin: 0;
}
.timeline-header__subtitle {
  color: rgba(255, 255, 255, 1);
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-size: 20px;
  letter-spacing: 5%;
  margin: 10px 0 0 0;
  font-weight: normal;
}

Alles anzeigen

TakeOnMii · 1. Januar 2021

Ja du hattest das richtig verstanden und danke nochmal das du auch aktiv mithilfst.

Nur leider hat das jetzt meine ganze Seite umdesigned. Ich hatte da vorher einen Zeitstrahl mit HTML, CSS und JS aber jetzt existiert nur noch der Text und die Videos von dem Zeitstrahl.

TakeOnMii · 1. Januar 2021

Frohes neues auch von mir und danke für die Hilfe.

Nur leider ist es auch horizontal zentriert und mit justify-content: flex-end; bewegt es sich fast gar nicht. Zudem folgt es auch nicht position: fixed; dabei ist es oben links im Eck.

TakeOnMii · 1. Januar 2021

Hallo,

ich bin gerade dabei meine Website responsive zu machen, jedoch bekomme ich einen Text nicht zentriert und vertikalen text nicht an beide Ränder. Alle sind oben links in der Ecke.

Da ich aber erst am Anfang vom Programmieren generell bin habe ich auch keine Ahnung, was sonst noch machen könnte.

HTML: Index.html

<div class="Home">
            <a href="Index.html"><h1><center>HOME</center></h1></a></div>
    <div class="About">
            <a href="About.html"><h1><center>ABOUT</center></h1></a></div>

    <div class="Contact">
            <a href="Contact.html"><h1><center>CONTACT</center></h1></a></div>

CSS: Stylesheet

.Home {
    display: flex;
    align-self: center;
    align-content: center;
    z-index: 3;
    justify-content: center;
    align-items: center;
    position: fixed;
}
    
.About{
    display: flex;
    transform: rotate(90deg);
    z-index: 3;
    float: left;
    position: fixed;
}

.Contact{
    display: flex;
    transform:rotate(-90deg);
    z-index: 3;
    float: right;
    position: fixed;
}

Alles anzeigen

Wie es oben links in der Ecke aussieht:

[Blockierte Grafik: https://prnt.sc/we0725]

Danke schonmal an alle die helfen.

Beiträge von TakeOnMii

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren

Text zentrieren