Images For ThemeForest - Envato

Size
7,100 Kb
Views
4,048

How do I make an images for themeforest - envato?

What is a images for themeforest - envato? How do you make a images for themeforest - envato? This script and codes were developed by Hemant Aggarwal on 09 January 2023, Monday.

Images For ThemeForest - Envato Previews

Images For ThemeForest - Envato - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Images For ThemeForest - Envato</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans|Oxygen' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
<div class="feature f4">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Responsive.png" style="padding-top: 10px;" />	</div>	<h2>100% Responsive Design</h2>	<p>Mstoic theme is completely responsive and looks stunning on every device it is viewed on. This makes it versatile, and your website looks good and interactive on every device.</p>
</div>
<div class="feature f5" style="min-height: 310px;">	<div class="image">	<img class="inner img-shadow" src="https://dl.dropboxusercontent.com/u/37248667/demo-page-images/fonts.jpg" style="top: 30px;" />	</div>	<h2>650+ Google Fonts</h2>	<p>Choose from 650+ Google Fonts and customize your website's typography the way you like. Mstoic also lets you choose different fonts for body text and the headings.</p>
</div>
<div class="feature f5" style="min-height: 310px;">	<div class="image">	<img class="inner img-shadow" src="https://dl.dropboxusercontent.com/u/37248667/TF-Logos/6-Header-Designs.png"/>	</div>	<h2>6 Header Designs</h2>	<p>Mstoic comes with 6 pre-built header designs. All of these are special in their own way. Also, you can optionally display links to your social netowrks and search button in the header.</p>
</div>
<div class="feature f5">	<div class="image">	<img class="inner no-outer" src="https://dl.dropboxusercontent.com/u/37248667/unlimited-sidebars.png" />	</div>	<h2>Unlimited Sidebar Areas</h2>	<p>With Mstoic, you can create any number of Sidebar areas, and display any sidebar on any page. This gives you the flexibility to have any set of widgets on any page/post.</p>
</div>
<div class="feature f4">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/sticky.png" />	</div>	<h2>Sticky Header and Sidebar</h2>	<p>Mstoic allows you to stick header/navigation at the top of the page when user scrolls down. Not only this, we have included a sidebar area, widgets in which will stick at the top when user scrolls past the first widget.</p>
</div>
<div class="feature f2">	<div class="image">	<img class="inner no-outer" src="https://dl.dropboxusercontent.com/u/37248667/Ad-Management.png" />	</div>	<h2>In-built Ad Management</h2>	<p>Mstoic allows you to manage ads on your website without even touching the code. It can even transform your normal ads to responsive advertisements.</p>
</div>
<div class="feature inner-img-auto-dim f16" style="min-height: 300px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Color-Schemes.png" style="padding-top: 10px;" />	</div>	<h2>11 Color Schemes</h2>	<p>Mstoic comes with 11 pre-built color schemes. You can choose any color scheme at any time, and give a complete makeover to your website. Also, you can choose any color from the palette, and Mstoic will use it as the base color for your websites color scheme.</p>
</div>
<div class="feature inner-img-auto-dim f13" style="min-height: 310px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Customize-Colors.png" style="padding-top: 0px;" />	</div>	<h2>Customize Colors</h2>	<p>In addition to the color schemes, you can also choose any color for any element on the website, using our easy to use color pickers. Choose any color for any element from millions of colors.</p>
</div>
<div class="feature f1">	<div class="image">	<img class="outer" src="https://dl.dropboxusercontent.com/u/37248667/Safari-Browser-New.png" />	<img class="inner img-shadow" src="https://dl.dropboxusercontent.com/u/37248667/Square_Speed.png" />	</div>	<h2>Loads Your Pages Faster</h2>	<p>Mstoic takes very less resources and loads your webpages amazingly fast. It loads no images except the ones you upload. We only load Font Awesome icon set to make your website visually appealing.</p>
</div>
<div class="feature inner-img-auto-dim f3">	<div class="image">	<img class="outer" src="https://dl.dropboxusercontent.com/u/37248667/Safari-Browser-New.png" />	<img class="inner img-shadow" src="https://dl.dropboxusercontent.com/u/37248667/demo-page-images/featured-image.jpg" />	</div>	<h2>Featured Image Support</h2>	<p>Mstoic supports featured images and displays them very beautifully. The theme uses featured images in various places to show what the article is all about. You can also turn off the featured image support from the theme's options page.</p>
</div>
<div class="feature inner-img-auto-dim f9" style="min-height: 320px !important;">	<div class="image">	<img class="inner img-shadow" src="https://dl.dropboxusercontent.com/u/37248667/Options%20Page.png" style="top: 20px;"/>	</div>	<h2>Beautiful Options Page</h2>	<p>You can customize everything in Mstoic Theme, that too without even touching the code. We have added a very easy to use options page, that gives you complete control over your website. We have used the simplicity and power of Redux; to build our options page.</p>
</div>
<div class="feature f6" style="min-height: 330px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Slider-New.png" style="top: 30px;" />	</div>	<h2>Customizable Slider</h2>	<p>Mstoic comes with in-built options for slider. Sliders are often used to put the best content forward. With Mstoic, you can have a slider up and running in seconds. Moreover, the slider is fully customizable, and slides can carry customizable title, description and link too.</p>
</div>
<div class="feature inner-img-auto-dim f23" style="min-height: 320px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Font-Awesome.png" style="padding-top: 20px;" />	</div>	<h2>Font Awesome Integration</h2>	<p>Mstoic comes with complete Font Awesome integration. Not only Mstoic uses the Font Awesome fonts to make your website beautiful, you can include Font Awesome fonts in your posts and pages too. To make adding Font Awesome fonts very easy, we have added the option for adding Font Awesome fonts in our shortcode builder.</p>
</div>
<div class="feature inner-img-auto-dim f22" style="min-height: 320px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/1438799667_icon-navicon-round.png" style="padding-top: 20px;" />	</div>	<h2>App Like Mobile Navigation</h2>	<p>The navigation menus are the one of the hardest elements to be made responsive. With Mstoic, we made sure that your nav menus are completely functional, and simultaneously look elegant on any device your website loads on. For this, your nav menus are automatically converted to an app like navigation on touch devices.</p>
</div>
<div class="feature inner-img-auto-dim f21" style="min-height: 300px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Newspaper.png" style="padding-top: 0px;" />	</div>	<h2>Newspaper Layout</h2>	<p>The standard blog layout is seen everywhere, give your blog a refreshing look with Newspaper layout. It displays your posts as newspaper articles and also loads posts infinitely when user scrolls.</p>
</div>
<div class="feature inner-img-auto-dim f20" style="min-height: 320px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Popup-Box.png" style="padding-top: 5px;" />	</div>	<h2>Popup Box</h2>	<p>You can display first time visitors a popup box, that can contain a Facebook like box, a Twitter Follow button or your newsletter subscription form. You can even add your custom HTML code that will displayed in the popup box. And all of this, without even writing a single line of code.</p>
</div>
<div class="feature inner-img-auto-dim f7" style="min-height: 310px;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/notification-2.png" style="padding-top: 15px;" />	</div>	<h2>Notification Bar</h2>	<p>Mstoic comes with a built-in hello bar like notification bar. You can customize it to show a link to any post, the latest post, or any custom HTML content. You can decide to show the notification bar at the top/bottom of your website. The visitors can also hide the notification bar if they wish to.</p>
</div>
<div class="feature inner-img-auto-dim f19" style="min-height: 310px !important;">	<div class="image">	<img class="inner img-shadow" src="https://dl.dropboxusercontent.com/u/37248667/YARPP-Logo.png" style="padding-top: 0px; top: 25px;" />	</div>	<h2>YARPP Compatible</h2>	<p>YARPP, short for Yet Another Related Posts Plugin, is the best plugin in WordPress Repository to display related posts on your website. To get more clicks, we have added a unique YARPP template to our theme, which makes related posts more pleasing to the eyes.</p>
</div>
<div class="feature inner-img-auto-dim f17" style="min-height: 300px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/1438789264_Coding-Html.png" style="padding-top: 0px;" />	</div>	<h2>Clean / Well Documented Code</h2>	<p>We have made our best efforts to keep the code as clean as possible. We have also added comments almost everywhere, to make sure developers can customize it to their own liking.</p>
</div>
<div class="feature inner-img-auto-dim f14" style="min-height: 320px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Custom-HTML-CSS.png" style="padding-top: 50px;" />	</div>	<h2>Add Custom CSS & JS</h2>	<p>To make your website your own, you can even add your custom CSS and JS codes. Your CSS and JS codes are added after the theme's core files are loaded, to make sure your code over-ride ours. Even more, you get an option to add CSS to specific posts and pages, and those particular styles will load only on those posts/pages.</p>
</div>
<div class="feature inner-img-auto-dim f12" style="min-height: 320px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/WordPress%20Shortcodes.png" style="padding-top: 10px;" />	</div>	<h2>17 Amazing Shortcodes</h2>	<p>As of now, we have 17 shortcodes integrated into the theme. These shortcodes allow you to add a contact form, related posts, notice boxes, tabs, and accordion menus, and much more with just some simple mouse clicks.</p>
</div>
<div class="feature inner-img-auto-dim f18" style="min-height: 300px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/SEO.png" style="top: 10px;" />	</div>	<h2>SEO - Search Engine Optimization</h2>	<p>While designing the theme, we have kept best practices in mind, both for coding and for SEO. The theme is designed by completely following the schema.org microformat directives.</p>
</div>
<div class="feature inner-img-auto-dim f10" style="min-height: 360px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/woo-bbpress-edd.png" style="padding-top:30px; padding-bottom: 35px;" />	</div>	<h2>WooCommerce, bbPress and EDD</h2>	<p>Our theme is fully compatible with bbPress, Woocommerce and Easy Digital Downloads. Going one step further, we have added our custom styles for all the plugins, to make sure they match the styles of our theme. Even more, you can have a different sidebar displayed on pages of these different plugins, like only Woocommerce widgets on Woocommerce pages, isn't that amazing?</p>
</div>
<div class="feature inner-img-auto-dim f15" style="min-height: 320px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/1438956620_15-Dashboard%20.png" style="padding-top: 15px;" />	</div>	<h2>A Plethora of Widgets</h2>	<p>Mstoic Theme comes with 10 custom widgets. You can add a Facebook like box, a follow us widget, a widget that caries author info, image and links to his social profiles, using the built-in widgets. We also added mobile only and desktop only widgets.</p>
</div>
<div class="feature inner-img-auto-dim f15" style="min-height: 300px !important;">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/Google-Analytics.png" style="padding-top: 0px;" />	</div>	<h2>Google Analytics Integration</h2>	<p>Just type your Google Analytics ID in the theme options page, and Mstoic will take care of the rest. It will automatically add the tracking code, and Google Analytics will start tracking your website immediately.</p>
</div>
<!--
<div class="feature inner-img-auto-dim f8">	<div class="image">	<img class="inner" src="https://dl.dropboxusercontent.com/u/37248667/demo-page-images/fonts.jpg" />	</div>	<h2>Sticky Navigation Menus - Pic</h2>	<p>If you want, you can make navigation menus stick to the top when user scrolls past the navigation menu. This will make sure that the navigation menus are always in view.</p>
</div>
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Images For ThemeForest - Envato - Script Codes CSS Codes

html { counter-reset: index; /* Create a `index` counter scope */
}
.feature:before { counter-increment: index; /* Add 1 to `index` */
}
.line { height: 1px; width: 100%; position: absolute; bottom: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+0,777777+50,777777+100&0.1+0,1+50,0.1+100 */ background: -moz-linear-gradient(left, rgba(119, 119, 119, 0.1) 0%, #777777 50%, rgba(119, 119, 119, 0.1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(119, 119, 119, 0.1)), color-stop(50%, #777777), color-stop(100%, rgba(119, 119, 119, 0.1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(119, 119, 119, 0.1) 0%, #777777 50%, rgba(119, 119, 119, 0.1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(119, 119, 119, 0.1) 0%, #777777 50%, rgba(119, 119, 119, 0.1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(119, 119, 119, 0.1) 0%, #777777 50%, rgba(119, 119, 119, 0.1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(119, 119, 119, 0.1) 0%, #777777 50%, rgba(119, 119, 119, 0.1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a777777', endColorstr='#1a777777', GradientType=1); /* IE6-9 */
}
.feature { width: 615px; min-height: 270px; content: ''; margin: 20px 5px; position: relative; border: 1px solid #ddd; /*&:nth-of-type(2n) {	background: #EDEDED;	}	&:nth-of-type(2n+1) {	background: #FAFAFA;	}*/
}
img.outer { position: absolute; left: 20px; top: 20px; width: 209.75px; height: 225px; z-index: 1;
}
img.inner { width: 200px; height: 200px; position: absolute; top: 19px; left: 3.5px; margin: 20px; z-index: 9;
}
.img-shadow { box-shadow: 0 1px 3px 2px #ddd;
}
h2 { padding-top: 30px;
}
h2,
p { padding-left: 250px; width: 350px; text-align: center; color: #0059B3; font-family: Apple Symbols; font-family: 'Oxygen', sans-serif; font-family: 'Gudea', sans-serif;
}
p { top: 90px; text-align: justify; color: #777; font-size: 0.95em; line-height: 1.9em; font-family: 'Calibri', sans-serif;
}
.inner-img-auto-dim .inner { width: 32.6% !important; height: auto !important;
}
.f3 .inner,
.f3 .outer { padding-top: 10px;
}
.f3 h2 { margin-top: 0px;
}
.no-image { min-height: auto; width: 575px; padding: 0px 20px 20px 20px;
}
.no-image h2,
.no-image p { width: auto; padding-left: 0px; padding-right: 0px;
}

Images For ThemeForest - Envato - Script Codes JS Codes

//$('.feature').append('<div class="line"></div>');
Images For ThemeForest - Envato - Script Codes
Images For ThemeForest - Envato - Script Codes
Home Page Home
Developer Hemant Aggarwal
Username mstoic
Uploaded January 09, 2023
Rating 3
Size 7,100 Kb
Views 4,048
Do you need developer help for Images For ThemeForest - Envato?

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!

Hemant Aggarwal (mstoic) Script Codes
Create amazing web content 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!