Playing around with sheperd

Developer
Yoann Nouveau
Size
7,414 Kb
Views
24,288
  1. Playing around with sheperd Previews
  2. Playing around with sheperd HTML Codes
  3. Playing around with sheperd CSS Codes
  4. Playing around with sheperd JS Codes

How do I make an playing around with sheperd?

Make sure to try Sheperd out, it's awesome for guiding technology-phobics through your website and helping them make the most out of whatever it is that they can do on your site!. What is a playing around with sheperd? How do you make a playing around with sheperd? This script and codes were developed by Yoann Nouveau on 08 September 2022, Thursday.

Playing around with sheperd Previews
IQ Test

Playing around with sheperd - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing around with sheperd</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.2.0/css/shepherd-theme-arrows.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <section class="left"> <h1> A pen by <a href="https://codepen.io/YoannN2/"> @YoannN2</a></h1> </section> <section class="main"> <div class="title" id="start"> <h1 id="header">Take<br />the<br />tour</h1> <div class="btn">Click here!</div> </div> <article class="card" id="dream"> <div class="content"> <img src="http://www.chicagonow.com/god-running-partner/files/2015/03/dream.jpg" width="350" /> <h2>Dream !</h2> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos iusto illum quam, pariatur veritatis beatae quod, at obcaecati totam impedit minima porro vel, ducimus neque! </p> </article> <article class="card"> <div class="content" id="think"> <img src="http://www.fame-magazine.com/wp-content/uploads/2013/11/time-to-think.jpg" width="350" /> <h2>Think !</h2> </div> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> </article> <article class="card" id="plan"> <div class="content"> <img src="https://pas-wordpress-media.s3.amazonaws.com/wp-content/uploads/2012/08/web-development-plan-1.jpg" width="350" /> <h2>Plan !</h2> </div> <p> Consectetur adipisicing elit. Ex unde nobis iste, facere! Facilis sit iste praesentium laborum rem, dolorem delectus, provident blanditiis neque sed nesciunt! Esse, ex. Placeat quis voluptas excepturi eaque quas voluptate quidem molestiae repellendus vero dicta, voluptates enim! </p> </article> <article class="card" id="do"> <div class="content"> <img src="http://www.transportationissuesdaily.com/wp-content/uploads/2012/07/Just-Do-It.jpg" width="350" /> <h2>Do !</h2> </div> <p> Consectetur adipisicing elit. Ex unde nobis iste, facere! Facilis sit iste praesentium laborum rem, dolorem delectus, provident blanditiis neque sed nesciunt! Esse, ex. Placeat quis voluptas excepturi eaque quas voluptate quidem molestiae repellendus vero dicta, voluptates enim! </p> </article> <a class="action" href="#start">Go again ?</a> </section> <section class="right"> <h1>Guide your users with Shepherd</h1> <h2>Hi there!</h2> <p> This pen was made using <b>Hubspot/Shepherd</b> </p> <p> Check it out <a href="https://github.hubspot.com/shepherd/docs/welcome/">here</a> </p> <h2>Getting Started</h2> <p> Include the following files: <br /> </p> <h3>Css:</h3> <dt>shepherd-theme-arrow.min.css</dt> <dd>https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.2.0/css/shepherd-theme-arrows.min.css</dd> <h3>Js:</h3> <dt>tether.min.js</dt> <dd>https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.0/js/tether.min.js</dd> <dt>shepherd.min.js</dt> <dd>https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.2.0/js/shepherd.min.js</dd> <p>Also include jQuery</p> <h2>How To</h2> <p> Now all you need to do is <b>make a Shepherd.Tour instance</b>, like so: <br>
<pre>
var tour = new Shepherd.tour({ default: { classes: 'shepherd-theme-arrows' // You can give it any classes to stylize it }
});
</pre> Then <b>add the steps</b> of your tour:
<pre>
tour.addStep('step-name',{ title: 'title displayed at the top of the box', text: 'lorem ipsum dolor sit amet...', attachTo: '.some #element right', // The element you want to attach the step to // aswell as where it should be attached // (top right bottom left) advanceOn: ".docs-link click", scrollTo: false
});
</pre> Repeat for all the steps you want in your tour, the order in which you declare the steps is the order in which they'll be when you click the "next" button. </p> <p> Finally all you need to do is to trigger <b>tour.start()</b> on an event and be done with it !
<pre> $('.btn').onClick( function(e){ e.preventdefault(); tour.start(); });
</pre> </p> <p>And that's it ! Fiddle around and make sure to read the <a href="https://github.hubspot.com/shepherd/">docs</a></p> <p> I hope that helps, good luck and thanks for reading! </p> </section>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.2.0/js/shepherd.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playing around with sheperd - Script Codes CSS Codes

/* MESSY AS HELL, BEWARE ! */
* { box-sizing: border-box;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh;
}
.container .main { overflow-y: scroll;
}
.left { width: 100px; border-right: solid 16px dodgerblue;
}
.right { width: 50%; border-left: solid 16px dodgerblue; overflow-y: scroll; padding: 25px;
}
.right dd { font-size: .9em; margin: 10px 0 30px 20px; color: rgba(30, 144, 255, 0.8);
}
.right dd:before { content: '< ';
}
.right dd:after { content: ' >';
}
.right dd:before, .right dd:after { color: dodgerblue; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.right h2, .right h3, .right b, .right a { color: dodgerblue;
}
.right h2 { margin-top: 50px;
}
.right pre { padding: 5px; background: rgba(30, 144, 255, 0.1);
}
.main { width: 40%; padding: 50px; background: url(https://c1.staticflickr.com/3/2767/4427954364_18c819a6c9.jpg); font: sans-serif;
}
.title, .card, .action { box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
}
.title { position: relative; border: 5px solid dodgerblue; padding: 25px; width: 200px; margin: auto; margin-bottom: 75px; background: white; text-align: center;
}
.title h1 { color: dodgerBlue; text-transform: uppercase; letter-spacing: 4px;
}
.title .btn { position: absolute; right: 0; bottom: 0; -webkit-transform: translate(66%, 66%); transform: translate(66%, 66%); width: 80px; padding: 20px 10px; border: 4px solid white; outline: 4px solid rgba(30, 144, 255, 0.75); color: white; text-transform: uppercase; font-weight: bold; background: rgba(30, 144, 255, 0.75); cursor: pointer;
}
.card { width: 350px; margin: auto; margin-bottom: 50px;
}
.card .content { position: relative; border-bottom: 8px solid dodgerblue; padding: 0;
}
.card img { margin-bottom: -5px;
}
.card h2 { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); margin-bottom: 0; margin-top: 0; color: white; background: dodgerBlue; padding: 10px 20px; text-align: center; width: 130px; margin: auto;
}
.card p { margin-top: 0; background: white; padding: 20px; padding-top: 40px;
}
.action { display: block; text-decoration: none; color: white; background: forestgreen; width: 250px; margin: auto; text-align: center; font-weight: bold; padding: 15px; text-transform: uppercase;
}
.action:visited { color: white;
}
.left { position: relative;
}
.left a { color: dodgerblue; text-decoration: none; opacity: .5; -webkit-transition: all .2s; transition: all .2s;
}
.left a:hover { opacity: 1;
}
.left h1 { font-weight: 300; letter-spacing: 1px; font-size: 1.5em; color: lightgrey; position: absolute; margin: 0; padding: 0; left: 10px; bottom: 33vh; width: 100vh; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: top left; transform-origin: top left;
}

Playing around with sheperd - Script Codes JS Codes

'use strict';
// Make a Tour instance
var tour = new Shepherd.Tour({ defaults: { classes: 'shepherd-theme-arrows' }
});
// Step 1 intro
tour.addStep('intro', { title: 'Welcome to the tour!', text: 'Let me guide you through whatever this thing is !<br>Don\'t worry, pizzas are given at the end!', attachTo: '.btn bottom', advanceOn: '.docs-link click'
});
// Step 2 dream
tour.addStep('dream', { title: 'Dream like a kid', text: 'Let your imagination soar through space and time,<br>free yourself of this thing you call control,<br> and go wherever your heart takes you.', attachTo: '#dream left', advanceOn: '.docs-link click', scrollTo: true
});
// Step 3 think
tour.addStep('think', { title: 'Think hard, think well', text: 'Think hard, think it through and thorough,<br> but most importantly, THINK !', attachTo: '#think left', advanceOn: '.docs-link click', scrollTo: true
});
// Step 4 plan
tour.addStep('plan', { title: 'Plan it!', text: 'Planning sure is a bitch,<br> but in the long run it saves you time !<br>So do it !', attachTo: '#plan left', advanceOn: '.docs-link click', scrollTo: true
});
// Step 5 do
tour.addStep('do', { title: 'Just do it!', text: 'Known facts "A common step of any achievements is doing it"<br>- source: personal experience of every beings!<br>So do it ! Just do it !', attachTo: '#do top', advanceOn: '.docs-link click', scrollTo: true
});
// Step 6 outro
tour.addStep('outro', { title: 'The promise', text: '<img src="http://webexpertca.com/pizza/wp-content/uploads/2014/07/pizza-transparent-png.png" width="400"/> <br> I know, you\'re welcome.<br><br>This mini tour was made using <a href="https://github.hubspot.com/shepherd/" target="blank">Sheperd</a> Give it a go!, it\'s awesome :)'
});
// Bind the tour.start() to a click event on .btn
$('.btn').on('click', function (e) { e.preventDefault; tour.start();
});
Playing around with sheperd - Script Codes
Playing around with sheperd - Script Codes
Home Page Home
Developer Yoann Nouveau
Username YoannN2
Uploaded September 08, 2022
Rating 3
Size 7,414 Kb
Views 24,288
Do you need developer help for Playing around with sheperd?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yoann Nouveau (YoannN2) Script Codes
Name
Animitating Hamburgers
Project Euler 1
Off Menu Canvas Experiments
Tooltips
WIP - Toggling password JS JQUERY ANGULAR VUEJS
A Pen by Yoann Nouveau
Formulaire HTML
Project Euler 7
Checkbox jQuery
Material Design Ripple effect on buttons
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!