1584090950
In this article I will build my own content locker with HTML and JavaScript it doesn’t require a lot of code and you can customize it to how you want, although you will need some experience with HTML.
<div id="sociallocker">
<div id="sociallocker-links">
<a href="#" class="social-1 fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-1 tw"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-1 gp"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social-1 in"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a>
<a href="#" class="social-1 su"><i class="fab fa-stumbleupon"></i></a>
</div>
<div id="sociallocker-content">
<a href="http://google.com">Download Now</a>
</div>
<div id="sociallocker-overlay"><i class="fas fa-lock"></i>Unlock content with a social share.</div>
</div>
For this content locker we will be using social buttons, these buttons will share the content when the visitor clicks one of them and then unlock the Download Now button when the window closes, just remember to change the link’s href attribute value to your social share link.
We’re using Font Awesome for the social icons.
@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
#sociallocker {
background-color: #EEEEEE;
text-align: center;
position: relative;
max-width: 500px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius:10px;
}
#sociallocker-overlay {
background-color: rgba(0,0,0,0.6);
font-size: 20px;
font-weight: bold;
color: #ffffff;
transition: all 0.2s ease;
}
#sociallocker-overlay i {
margin-right: 10px;
}
#sociallocker:hover #sociallocker-overlay {
top: -100%;
transition: all 0.2s linear;
}
#sociallocker:hover #sociallocker-content {
top: 100%;
transition: all 0.2s linear;
}
#sociallocker-content a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
background-color: #777777;
color: #f9f9f9;
border-radius: 4px;
font-weight: bold;
}
#sociallocker-overlay,
#sociallocker-content,
#sociallocker-links {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
#sociallocker-content {
background-color: #ccc;
transition: all 0.2s ease;
}
.social-1 {
text-decoration: none;
color: #ffffff;
display: inline-block;
width: 60px;
height: 60px;
overflow: hidden;
margin-right: 5px;
}
.social-1 i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.social-1:hover i {
background-color: rgba(0,0,0,0.1);
transform: scale(1.2);
transition: all 0.2s;
}
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }
If you have already included Font Awesome into your website you can remove the @import… at the top of the above code.
We have 3 containers in our #sociallocker element, these are:
(function() {
var sl = document.querySelector("#sociallocker");
var slc = document.querySelector("#sociallocker-content");
if (!sl) return;
var old_slc_html = slc.innerHTML;
slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) {
ele.onclick = function(e) {
var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
var check_window_close = setInterval(function() {
if (web_window.closed) {
clearInterval(check_window_close);
slc.innerHTML = old_slc_html;
document.querySelector("#sociallocker-links").style.display = "none";
document.querySelector("#sociallocker-overlay").style.display = "none";
document.querySelector("#sociallocker-content").style.top = "0";
}
}, 1000);
e.preventDefault();
};
});
})();
The above JavaScript code will open a new window when the visitor clicks one of the share buttons, and on close (normally happens after you share) the locked content will be unlocked.
This is probably the easiest way you can create a social content locker for your website, blog, posts, articles, etc.
The only problem with this method is you cannot use social page likes (unless you open in new window) to unlock the content because you need to use third-party tools (such as the Facebook SDK), it’s the only way to determine if the visitor likes the page or not, however, you can still integrate it, just include the third-party code and add the events in the JavaScript code above.
#html #css #javascript
1628189100
Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding
1595318322
HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.
The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.
The simple fundamental components oh HTML is
HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.
Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.
#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html
1630506330
This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform those powerful animations we use the GSAP a JavaScript animation library for work done.
In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.
Don't forget to join the channel for more videos like this. Code Savvy
0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations
Click to Watch Full tutorial on YOUTUBE
1629473371
Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.
Anyway, you can learn everything mentioned. Follow the tutorial.
1617789060
The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.
Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.
HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.
#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates