Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer by aymenz

View this thread on: hive.blog | peakd.com | ecency.com

life · @aymenz · Sep 21 '17 (edited)

$1.06

Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer

<html>
<p>&nbsp;&nbsp;<strong>Hey Steemit Friends !</strong></p>
<p><strong>https://i.ytimg.com/vi/149TCx_8mWA/maxresdefault.jpg</strong></p>
<p>&nbsp;Firstly I want to thank you , Today we will design Simple Slider of images to <strong>Steemit</strong> by <strong>HTML5</strong> , <strong>CSS3</strong> &amp; <strong>jQuery</strong> I want to give you my experience in web design just follow my courses and my works you will take some ideas will help you to build your first template .I have done the logo of bitcoin by <strong>css3</strong> and many other works you can see them on my page @aymenz I want to tell you that the languages of programming it's not only to design simple website or simple page you can do all what you want by it as I have done , Let's start .&nbsp;</p>
<p>We will use two files the first is document 'HTML' inside this document we will write the 'CSS' codes so we will mix the two to obtain our page and we will use the file of 'jQuery' to change the images when you click on the button .</p>
<p>The first thing is to open new page HTML and write the syntax of HTML , then open the style to put the 'CSS' codes after that import the compressed file of 'jQuery' and our file for me always I name it ' plugin.js ' and the document of HTML ' index.html' ..</p>
<p><img src="https://b.top4top.net/p_6295rhlc1.png" width="999" height="392"/></p>
<p>I have written those tags to import all before we start , now I will write the layout of our slider ..</p>
<p><img src="https://c.top4top.net/p_629vlhid1.png" width="1040" height="240"/></p>
<p>I have added container to our slider with class called ' datatab' it means data table and inside this container I have unordered list with 3 items are the buttons when I click on the first item it will appear the first image it's simple slider each one of them has new attribute named ' data-tab ' , and one of them has the active class it means if the first item is active so the first image is visible ..etc , I have also '3 divs' each one has image without style all the images will appear and it's block because it's inside the div , this is part of 'CSS' code :</p>
<p><img src="https://d.top4top.net/p_6292a03r2.png" width="874" height="660"/></p>
<p>For the body I have changed the background to be more beautiful for this color :<code> #f7f7f7 </code>it's near then the white color .</p>
<p>The container or the class '.datatab' those proprieties :&nbsp;</p>
<ul>
  <li>The width of this container is 100% it will take the full width of your screen and the height is 97 by the 'vh' unity it's like the pixel in 'CSS' &nbsp;we have many unity of size .</li>
  <li>The position relative to be free in the body you can move it easily .</li>
  <li>Text align center to be on the center of this page .</li>
  <li>Padding to the top 20 pixels because by default their elements will be attached with this container .</li>
</ul>
<p>The unordered list has padding 0 it will be simple it hasen't padding and the margin on the top is 20 pixels and the bottom also to give space .</p>
<p>For the items of this list or we can call them the buttons we have those proprieties :&nbsp;</p>
<ul>
  <li>Cursor pointer we have many type one of them is the pointer to be with this form <img src="https://cdn1.iconfinder.com/data/icons/streamline-selection-cursors/60/cell-0-0-30.png" width="30" height="30"/></li>
  <li>Display inline-block to be beside them because by default the list items appear one under the other with this propriety will appear the one beside the other .</li>
  <li>Width 50 pixels and height 11 pixels it's simple proprieties all we know what means the height and width&nbsp;</li>
  <li>Border 2 pixels bold solid not dashed or other type and the color of this border is : <code>#e595a5</code> &nbsp;</li>
  <li>Transition for all proprieties 0.1 second and the effect is ease-in-out , This propriety belong to the CSS3 and it's new there are many browsers don't know it so we give it those prefixes -webkit- for Google Chrome and Safari ..etc , -moz- for mozila , -o- for opera&nbsp;</li>
  <li>Background color is the white color <code>#fff&nbsp;</code></li>
</ul>
<p>The hover is when we move the mouse on the element for the item and we write two points as in the picture , and the same proprieties for the active element the element which has the class active :</p>
<ul>
  <li>Cursor pointer as I have explained in the previous element&nbsp;</li>
  <li>Background is <code>#e595a5&nbsp;</code></li>
</ul>
<p>This is the result :&nbsp;</p>
<p><img src="https://e.top4top.net/p_6291vx3e3.png"/></p>
<p>Look at the items of list and the form , this is the first image I have not finished the images will appear one under the other ..</p>
<p><img src="https://f.top4top.net/p_629t25vs4.png"/></p>
<p><img src="https://a.top4top.net/p_629ldt6d5.png"/></p>
<p>Now we will continue to show one image and when we click it will change to the second image ..</p>
<p><img src="https://f.top4top.net/p_629bkp6a1.png" width="887" height="446"/></p>
<p>For the div that has the image (I will mention just the new proprieties ) :&nbsp;</p>
<ul>
  <li>Transform : scale (0) all the dives are 0 scale it means they will not appear .</li>
  <li>Opacity : 0 it means is invisible&nbsp;</li>
  <li>The position is absolute to be free on the page and the padding is 10 pixels from all the sides&nbsp;</li>
</ul>
<p>For the image into the div :&nbsp;</p>
<ul>
  <li>Max-width is the maximum of width can take is 500 pixels&nbsp;</li>
  <li>Border-radius is 15 pixels from all the angles&nbsp;</li>
</ul>
<p>One of those dives will appear it will take the class ' scalable ' :&nbsp;</p>
<ul>
  <li>Transform : scale(1) to appear without problem in the default height&nbsp;</li>
  <li>Opacity : 1 to fadeIn to show to be visible .</li>
</ul>
<p>Now we must click to change the div , it's by the jQuery language and this is the code :&nbsp;</p>
<p><img src="https://a.top4top.net/p_629qekb42.png" width="801" height="223"/></p>
<p>I have selected <code>$('.datatab ul li')</code> the div with class ' datatab' the ul inside this div and the item , when we click on this item it will do this function , $(this) so add to this item that I have clicked on the class active to change the background color and remove the the ' siblings items ' this class to be only with this class .</p>
<p>for all dives remove the class ' scalable ' in the line number 5 and in the line 6 the div with this item add to it this class ' scalable ' to be visible .</p>
<p>This is the result :&nbsp;</p>
<p><img src="https://b.top4top.net/p_629d2v653.png"/></p>
<p>And you can watch this video to see how this slider work :&nbsp;</p>
<p>https://www.youtube.com/watch?v=VfMpA9ISqLE&amp;feature=youtu.be</p>
<p>&nbsp;This is the <strong>Slider with HTML5 , CSS3 &amp; jQuery to Steemit</strong> , If you find this post benefit and you get more informations from it don't forget to upvote and follow me just to encourage me to know that there are peoples follow my courses ..You can also follow my courses of <strong>HTML</strong> and <strong>Excel</strong> , I will do other tutorial of <strong>Css </strong>for the beginners .Thank you for reading my article , I love you all ♥ By <a href="https://steemit.com/@aymenz">@aymenz</a> &nbsp;</p>
<p><img src="https://steemitimages.com/0x0/https://e.top4top.net/p_621rboty1.jpg" width="980" height="358"/></p>
</html>

👍 randowhale0, drifter1, mihaisyblu, krasotka, cryptotrade007, aymenz, randowhaletrail, aauthespian1, aek081969, merryslamb, anomaly, originalworks

`author`	aymenz
`permlink`	beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer
`category`	life
`json_metadata`	{"tags":["life","technology","education","programming","steemit"],"users":["aymenz"],"image":["https://i.ytimg.com/vi/149TCx_8mWA/maxresdefault.jpg","https://b.top4top.net/p_6295rhlc1.png","https://c.top4top.net/p_629vlhid1.png","https://d.top4top.net/p_6292a03r2.png","https://cdn1.iconfinder.com/data/icons/streamline-selection-cursors/60/cell-0-0-30.png","https://e.top4top.net/p_6291vx3e3.png","https://f.top4top.net/p_629t25vs4.png","https://a.top4top.net/p_629ldt6d5.png","https://f.top4top.net/p_629bkp6a1.png","https://a.top4top.net/p_629qekb42.png","https://b.top4top.net/p_629d2v653.png","https://img.youtube.com/vi/VfMpA9ISqLE/0.jpg","https://steemitimages.com/0x0/https://e.top4top.net/p_621rboty1.jpg"],"links":["https://www.youtube.com/watch?v=VfMpA9ISqLE&feature=youtu.be","https://steemit.com/@aymenz"],"app":"steemit/0.1","format":"html"}
`created`	2017-09-21 14:56:00
`last_update`	2017-09-21 18:25:24
`depth`	0
`children`	9
`last_payout`	2017-09-28 14:56:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	1.050 HBD
`curator_payout_value`	0.009 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	7,397
`author_reputation`	22,313,300,380,026
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,529,697
`net_rshares`	403,714,572,457
`author_curate_reward`	""

properties (23)vote details (12)

voter	rshares	pct
drifter1	8,513,904,176	100%
anomaly	366,250,881	1%
krasotka	3,441,048,115	100%
aek081969	617,997,670	100%
aauthespian1	625,756,036	100%
randowhaletrail	644,053,218	0.5%
originalworks	226,541,789	0.5%
cryptotrade007	2,152,075,231	10%
aymenz	922,168,596	70%
mihaisyblu	4,133,098,945	100%
randowhale0	381,688,679,396	2.15%
merryslamb	382,998,404	100%

@aek081969 · Sep 21 '17

beautiful post,Good Job, keep it up

👍 aymenz, aek081969

`author`	aek081969
`permlink`	re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t170948652z
`category`	life
`json_metadata`	{"tags":["life"],"app":"steemit/0.1"}
`created`	2017-09-21 17:09:33
`last_update`	2017-09-21 17:09:33
`depth`	1
`children`	1
`last_payout`	2017-09-28 17:09:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	35
`author_reputation`	1,254,205,740,033
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,541,447
`net_rshares`	1,921,406,453
`author_curate_reward`	""

properties (23)vote details (2)

voter	weight	wgt%	rshares	pct	time
aek081969	0 B		614,028,190	100%
aymenz	0 B		1,307,378,263	100%

@aymenz · Sep 21 '17

thanks

properties (22)

`author`	aymenz
`permlink`	re-aek081969-re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t182041653z
`category`	life
`json_metadata`	{"tags":["life"],"app":"steemit/0.1"}
`created`	2017-09-21 18:20:42
`last_update`	2017-09-21 18:20:42
`depth`	2
`children`	0
`last_payout`	2017-09-28 18:20:42
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	6
`author_reputation`	22,313,300,380,026
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,547,106
`net_rshares`	0

@aymenz · Sep 21 '17

@originalworks

👍 originalworks

`author`	aymenz
`permlink`	re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t193705305z
`category`	life
`json_metadata`	{"tags":["life"],"users":["originalworks"],"app":"steemit/0.1"}
`created`	2017-09-21 19:37:06
`last_update`	2017-09-21 19:37:06
`depth`	1
`children`	1
`last_payout`	2017-09-28 19:37:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	14
`author_reputation`	22,313,300,380,026
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,552,611
`net_rshares`	226,541,789
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
originalworks	0 B		226,541,789	0.5%

@originalworks · Sep 21 '17

originalworks

The @OriginalWorks bot has determined this post by @aymenz to be original material and upvoted it! 
<center>![ezgif.com-resize.gif](https://steemitimages.com/DQmaBi37A5oTnQ9NBLH8YU4jpvhhmFauyvgg3YRrEJwskM9/ezgif.com-resize.gif)</center> 

To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message! 
### To nominate this post for the daily RESTEEM contest, upvote this comment! The user with the most upvotes on their @OriginalWorks comment will win!<h3>
For more information, [Click Here!](https://steemit.com/writing/@originalworks/originalworks-bot-explanation-and-info)

👍 aymenz

`author`	originalworks
`permlink`	re-re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t193705305z-20170921t193804
`category`	life
`json_metadata`	"{"app": "pysteem/0.5.4"}"
`created`	2017-09-21 19:38:06
`last_update`	2017-09-21 19:38:06
`depth`	2
`children`	0
`last_payout`	2017-09-28 19:38:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	617
`author_reputation`	79,292,026,602,057
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,552,687
`net_rshares`	1,237,340,142
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
aymenz	0 B		1,237,340,142	100%

@mahbubalam · Sep 21 '17

I think this post amazing.

👍 aymenz, mahbubalam

`author`	mahbubalam
`permlink`	re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t151445178z
`category`	life
`json_metadata`	{"tags":["life"],"app":"steemit/0.1"}
`created`	2017-09-21 15:14:54
`last_update`	2017-09-21 15:14:54
`depth`	1
`children`	1
`last_payout`	2017-09-28 15:14:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	26
`author_reputation`	-21,767,208,011
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,531,383
`net_rshares`	1,423,438,832
`author_curate_reward`	""

properties (23)vote details (2)

voter	weight	wgt%	rshares	pct	time
aymenz	0 B		1,307,378,263	100%
mahbubalam	0 B		116,060,569	0%

@aymenz · Sep 21 '17

thank you

properties (22)

`author`	aymenz
`permlink`	re-mahbubalam-re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t152123477z
`category`	life
`json_metadata`	{"tags":["life"],"app":"steemit/0.1"}
`created`	2017-09-21 15:21:24
`last_update`	2017-09-21 15:21:24
`depth`	2
`children`	0
`last_payout`	2017-09-28 15:21:24
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	9
`author_reputation`	22,313,300,380,026
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,532,026
`net_rshares`	0

@slefesteem · Sep 21 '17

Great Tutorial ! i will love if you start teaching steemians Python , PHP from beginner to advance classes.

👍 aymenz

`author`	slefesteem
`permlink`	re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t145817862z
`category`	life
`json_metadata`	{"tags":["life"],"app":"steemit/0.1"}
`created`	2017-09-21 14:58:33
`last_update`	2017-09-21 14:58:33
`depth`	1
`children`	2
`last_payout`	2017-09-28 14:58:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	107
`author_reputation`	783,744,181,388
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,529,947
`net_rshares`	1,342,397,323
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
aymenz	0 B		1,342,397,323	100%

@aymenz · Sep 21 '17 (edited)

I will step by step we start with those simple languages and I will give you some tutorials PHP ^_^ , Thank you

properties (22)

`author`	aymenz
`permlink`	re-slefesteem-re-aymenz-beautiful-slideshow-to-steemit-with-html5-css3-and-jquery-by-aymenz-become-web-designer-20170921t150115933z
`category`	life
`json_metadata`	{"tags":["life"],"app":"steemit/0.1"}
`created`	2017-09-21 15:01:15
`last_update`	2017-09-21 15:01:39
`depth`	2
`children`	1
`last_payout`	2017-09-28 15:01:15
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	111
`author_reputation`	22,313,300,380,026
`root_title`	"Beautiful Slideshow To Steemit With HTML5 , CSS3 & jQuery by Aymenz Become Web Designer"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,530,172
`net_rshares`	0

@slefesteem · Sep 21 '17

Following you For Php and python

properties (22)