Table of Content
Welcome tutorial with style
And here is another version with styling apply to it.
1<div data-role='page' id='welcome'> 2 <div data-role='content'> 3 <div id='slider' class='swipe'> 4 <div class='swipe-wrap'> 5 <div><img src="images/step1.png" alt=""></div> 6 <div><img src="images/step2.png" alt=""></div> 7 <div><img src="images/step3.png" alt=""></div> 8 <div><img src="images/step4.png" alt=""></div> 9 </div> 10 </div> 11 <a id='close-welcome-btn' data-rel='back'>Done</a> 12 </div> 13</div>
And the CSS of the welcome screen. Mainly the button.
1#close-welcome-btn { 2 display: block; 3 width: 300px; 4 max-width: 100%; 5 margin: auto; 6 text-align: center; 7 border-radius: 3px; 8 text-shadow: none; 9 color: #fff; 10 cursor: pointer; 11 background: #C97A53; 12 font-size: 1.5em; 13 font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue ", Helvetica, sans-serif; 14 font-weight: lighter; 15 border: none; 16 padding: 20px 0; 17 box-shadow: 0 5px 0 0 rgba(108,65,44,0.6); 18} 19#close-welcome-btn:active { 20 margin-top: 3px; 21 box-shadow: 0 2px 0 0 rgba(108,65,44,0.6); 22}
What’s next? We’re going to take a look at “The done button”.
