Fixing onboarding flicker, moving to flex and also using logical CSS

This commit is contained in:
Jonathan Kingston
2017-01-10 19:59:13 +00:00
parent 8bcfae7bed
commit 8209d1d5a7
2 changed files with 32 additions and 26 deletions
+9 -17
View File
@@ -7,25 +7,17 @@
</head>
<body>
<div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1">
<div class="row">
<div class="columns">
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3>A better way to manage all the things you do online</h3>
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
<p><a href="#">Learn more</a></p>
<p><a href="#" id="onboarding-next-button" class="button expanded">Next</a></p>
</div>
</div>
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3>A better way to manage all the things you do online</h3>
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
<p class="spacing" ><a href="#">Learn more</a></p>
<a href="#" id="onboarding-next-button" class="button expanded">Next</a>
</div>
<div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2">
<div class="row">
<div class="columns">
<img alt="How Containers Work" src="/img/onboarding-2.png" />
<h3>Put containers to work for you.</h3>
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
<p><a href="#" id="onboarding-done-button" class="button expanded">Done</a></p>
</div>
</div>
<img alt="How Containers Work" src="/img/onboarding-2.png" />
<h3>Put containers to work for you.</h3>
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
<a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
</div>
<div class="panel container-panel" id="container-panel">
<div class="row popup-bumper">