Free App Launch Website Template

App Launch Website Template from w3

"W3.CSS Website Templates

We have created some responsive W3.CSS website templates for you to use.

You are free to modify, save, share, and use them in all your projects."

Source Code

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<style>

body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}

body {font-size: 16px;}

img {margin-bottom: -8px;}

.mySlides {display: none;}

</style>

<button class="w3-button w3-block w3-green w3-hide-large w3-hide-medium" onclick="document.getElementById('download').style.display='block'">Download <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button>

<h1 class="w3-xlarge">Take photos with our app</h1>

<p>Super simple installment: free of charge</p>

<p><button class="w3-button w3-block w3-green w3-round" onclick="document.getElementById('download').style.display='block'">Download <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button></p>

</div>

<h1 class="w3-xlarge w3-text-red"><b>CLICK!</b> Fast and Easy</h1>

<p>Choose from thousands of features</p>

<p><button class="w3-button w3-block w3-red w3-round" onclick="document.getElementById('download').style.display='block'">Download <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button></p>

</div>

<h1 class="w3-xlarge">Smart Design</h1>

<p>Customize photos as you go</p>

<p><button class="w3-button w3-block w3-indigo w3-round" onclick="document.getElementById('download').style.display='block'">Download <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button></p>

</div>

</header>

<p><span class="w3-xlarge">Take photos like a pro.</span> You should buy this app because lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<i class="fa fa-download"></i> Download Application

</button>

<p>Available for <i class="fa fa-android w3-xlarge w3-text-green"></i> <i class="fa fa-apple w3-xlarge"></i> <i class="fa fa-windows w3-xlarge w3-text-blue"></i></p>

</div>

<i class="fa fa-download"></i> Download Application

</button>

</div>

<h2 class="w3-wide">DOWNLOAD</h2>

<p>Download the app in AppStore, Google Play or Microsoft Store.</p>

<button type="button" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom" onclick="document.getElementById('download').style.display='none'">Fake Download</button>

</div>

</div>

<h1 class="w3-jumbo"><b>Clarity</b></h1>

<h1 class="w3-xxxlarge w3-text-red"><b>Pixels, who?</b></h1>

<p><span class="w3-xlarge">A revolution in resolution.</span> Sharp and clear photos with the world's best photo engine, incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</div>

<h1 class="w3-jumbo"><b>Features</b></h1>

<p>This app is just so lorem ipsum.</p>

</div>

<p>Loved</p>

</div>

<p>Clarity</p>

</div>

<p>Power</p>

</div>

<p>Sharp</p>

</div>

<p>Cloud</p>

</div>

<p>Global</p>

</div>

<p>Storage</p>

</div>

</div>

<p>Stabile</p>

</div>

<p>Connected</p>

</div>

</div>

<h1 class="w3-jumbo"><b>Pricing</b></h1>

<p class="w3-large">Choose a pricing plan that fits your needs.</p>

<li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16"><b>250</b> Photos</li>

<li class="w3-padding-16"><b>10</b> Features</li>

<li class="w3-padding-16"><b>Office hours</b> Support</li>

</li>

<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"><i class="fa fa-download"></i> Download</button>

</li>

</ul>

</div>

<li class="w3-red w3-xlarge w3-padding-32">Premium</li>

<li class="w3-padding-16"><b>1000</b> Photos</li>

<li class="w3-padding-16"><b>50</b> Features</li>

<li class="w3-padding-16"><b>Endless</b> Support</li>

</li>

<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"> <i class="fa fa-download"></i> Download</button>

</li>

</ul>

</div>

<br>

</div>

</div>

<p class="w3-medium">Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

// Slideshow

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n);

}

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

if (n > x.length) {slideIndex = 1}

if (n < 1) {slideIndex = x.length}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

x[slideIndex-1].style.display = "block";

}

</script>

</body>

</html>

Search This Blog

Free Code Examples