Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
Na ja; er will ja, dass ein Text rechts vom Punkt ist, der darunter links davon, dann der darunter wieder rechts davon, usw.Dein Wunsch ist zwar nicht grade aussagekräftig beschrieben
Als her damit (HTML + CSS) :)Reicht euch der Code vom entsprechenden Stück?
<!-- ################################ -->
<!-- ########## EXPERIENCE ########## -->
<!-- ################################ -->
<section class="o-section t-section ">
<div class="o-section__header-bg t-section__header"></div>
<div class="o-section__content-bg t-section__content"></div>
<div class="o-container">
<div class="o-section__container">
<header class="o-section__header t-section__header">
<div class="o-content">
<h2 class="o-section__heading">
Experience
</h2>
<div class="o-content__body o-section__description">
Yes. I've been around.
</div>
</div>
</header><!-- /o-section__header -->
<div class="o-section__content t-section__content u-pb-0">
<div class="a-experience-timeline c-timeline t-border-color">
<div class="c-timeline__item">
<div class="c-timeline__point t-timeline__point t-primary-bg"></div>
<div class="o-content">
<div class="o-grid">
<div class="o-grid__col-md-5">
<div class="c-work__timeframe">
2015 – Present
</div>
<h3 class="c-work__heading">
Unicorn Incubator Inc.
</h3>
<h4 class="c-work__title">
Senior Interface Designer
</h4>
<div class="c-work__location">
Portland, OR
</div>
</div>
<div class="o-grid__col-md-7">
<p>
Consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aaliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
</p>
</div>
</div><!-- /o-grid -->
</div><!-- /o-content -->
</div><!-- /c-timeline__item -->
<div class="c-timeline__item">
<div class="c-timeline__point t-timeline__point t-primary-bg"></div>
<div class="o-content">
<div class="o-grid">
<div class="o-grid__col-md-5">
<div class="c-work__timeframe">
2013 – 2015
</div>
<h3 class="c-work__heading">
California Design Bureau
</h3>
<h4 class="c-work__title">
Creative Director
</h4>
<div class="c-work__location">
Cupertino, CA
</div>
</div>
<div class="o-grid__col-md-7">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aaliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
</p>
</div>
</div><!-- /o-grid -->
</div><!-- /o-content -->
</div><!-- /c-timeline__item -->
<div class="c-timeline__item">
<div class="c-timeline__point t-timeline__point t-primary-bg"></div>
<div class="o-content">
<div class="o-grid">
<div class="o-grid__col-md-5">
<div class="c-work__timeframe">
2010 – 2013
</div>
<h3 class="c-work__heading">
Dreamland Creative
</h3>
<h4 class="c-work__title">
Front-end Designer
</h4>
<div class="c-work__location">
New York, NY
</div>
</div>
<div class="o-grid__col-md-7">
<p>
Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus. Phasellus hendrerit. Pellentesque aaliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
</p>
</div>
</div><!-- /o-grid -->
</div><!-- /o-content -->
</div><!-- /c-timeline__item -->
</div><!-- /c-timeline -->
</div><!-- /o-section__content -->
</div><!-- /o-section__container -->
</div><!-- /o-container -->
</section><!-- /o-section -->
Hmm, das Problem, das sich mir leider stellt, ist, dass wir den CSS-Code nicht wissen. Könntest du den vielleicht als Anhang anhängen, wenn der zu groß ist/ irgendwo extern hochladen und uns den Link dazu schicken?Hm kann mir nun jemand helfen dabei?
Hmm, das Problem, das sich mir leider stellt, ist, dass wir den CSS-Code nicht wissen. Könntest du den vielleicht als Anhang anhängen, wenn der zu groß ist/ irgendwo extern hochladen und uns den Link dazu schicken?
Allerdings geht es mir ums Prinzip dass ich "Fremdprodukte" nicht supporte.
.c-timeline {
border-left-width: 2px;
border-left-style: solid;
margin-left: calc(1rem - 2px);
padding-left: 25px;
position: relative;
}
.c-timeline {
border-right-width: 2px;
border-right-style: solid;
margin-right: calc(1rem - 2px);
padding-right: 25px;
position: relative;
}
.c-timeline__point {
left: -31px;
}
.c-timeline__point {
right: -31px;
}
Ach was solls, ich will mal nicht so sein.
Aus:
Code:.c-timeline { border-left-width: 2px; border-left-style: solid; margin-left: calc(1rem - 2px); padding-left: 25px; position: relative; }
Wird:
Code:.c-timeline { border-right-width: 2px; border-right-style: solid; margin-right: calc(1rem - 2px); padding-right: 25px; position: relative; }
Und statt:
Code:.c-timeline__point { left: -31px; }
Kommt:
Code:.c-timeline__point { right: -31px; }
Mach halt für die rechts vom Punkt ausgerichteten:Hey vielen lieben Dank für deine Antwort. Muss ich dann in der html index Datei noch was anpassen? Weil wenn ich das So in der CSS andere richten sich doch alle nach links aus oder?
.c-timeline.right {
border-left-width: 2px;
border-left-style: solid;
margin-left: calc(1rem - 2px);
padding-left: 25px;
position: relative;
}
.c-timeline__point.right {
left: -31px;
}
.c-timeline.left {
border-right-width: 2px;
border-right-style: solid;
margin-right: calc(1rem - 2px);
padding-right: 25px;
position: relative;
}
.c-timeline__point.left {
right: -31px;
}
Ja, den jeweiligen Elementen noch die Klasse left oder right gebenMuss ich dann in der html index Datei noch was anpassen?