PNT Page

Developer
Lahvjal
Size
4,697 Kb
Views
6,072
  1. PNT Page Previews
  2. PNT Page HTML Codes

How do I make an pnt page?

What is a pnt page? How do you make a pnt page? This script and codes were developed by Lahvjal on 11 January 2023, Wednesday.

PNT Page Previews
IQ Test

PNT Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PNT Page</title>
</head>
<body> <style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
body { font-family: lato; position: relative; overflow-x: hidden; color: #333;
}
.rel { position: relative;
}
.flexxer { display: flex;
}
.flex_center_hor { align-items: center;
}
.flex_center_vert{ justify-content: center;
}
.flex_col { flex-direction: column;
}
.spacerz { height: 145px; width: 100%;
}
.headerz { width: 100%; background: linear-gradient(white, white, rgba(255,255,255,0.8), transparent, transparent, transparent), url(http://wallup.net/wp-content/uploads/2015/12/269399-nature-landscape-trees-mountain-clouds-sky-valley-cliff-USA-Wyoming-national_park-forest-Yosemite_National_Park.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; height: 100vh; position: relative;
}
.container { max-width: 1200px; width: 100%;
/* border: 1px solid red; */
}
.headerz_box {
/* border: 1px solid red; */ height: 200px; margin-top: 0px;
}
p { font-size: 15px; line-height: 25px; font-weight: 700; color: #333;
}
.scroll_ico { width: 24px; height: 47px; border: 2px solid white; border-radius: 100px; display: flex; justify-content: center; margin-top: 75px;
}
.scrolly { width: 4px; height: 16px; background-color: white; border-radius: 50px; margin-top: 7px; -webkit-animation:bounce 800ms infinite;
}
@-webkit-keyframes bounce { 0% { margin-top:7px; }
/* 25%, 75% {margin-top: 16px;} */ 50% { margin-top:13px; } 100% {margin-top:7px;}
}
.headerz_p { max-width: 600px; text-align: center; margin-top: 60px; font-size: 15px; font-weight: 900; color: #777; line-height: 25px;
}
.titlez_main { text-align: center; font-size: 90px; font-family: lato; text-transform: uppercase; font-weight: 900; background: -webkit-linear-gradient(to right, #faae2f, #b873d8); background: linear-gradient(to right, #faae2f, #b873d8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 5px 0;
}
.titlez_under { text-align: center; font-size: 20px; font-family: lato; text-transform: uppercase; font-weight: 900; background: -webkit-linear-gradient(to right, #faae2f, #b873d8); background: linear-gradient(to right, #faae2f, #b873d8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 5px 0; letter-spacing: 10px;
}
.sectionzz { width: 100%; background-color: white;
}
.treez { position: absolute; bottom: 0; width: 100%;
}
.clear { clear: both;
}
.sect_qual_content { height: auto; z-index: 100; padding-top: 30px;
}
.sub_sect { width: 100%; height: auto; margin-bottom: 50px; justify-content: space-between;
}
.sub_blocks { height: 500px; width: 50%; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box;
/* background: red; */
}
.sub_blocksy { height: auto; width: 50%; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box;
/* background: red; */
}
.r_adjust { align-items: flex-end; text-align: right;
}
.r_adjust>h4 { margin: 0 -18px 0 0 !important;
}
.sub_blocks>p, .sub_blocksy>p { font-size: 20px; line-height: 35px; font-weight: 500; width: 80%; max-width: 450px;
}
.sub_blocks>h3, .sub_blocksy>h3 { font-size: 30px; margin: 5px 0; font-weight: 900;
}
.sub_blocks>h4, .sub_blocksy>h4 { padding: 15px 20px; font-size: 18px; color: white; font-weight: 900; background-size: contain; background-position: center; background-repeat: no-repeat; margin: 0 0 0 -18px;
}
.brush1 {background-image: url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/ZyK1gfY8X42B1rf/brush.png);}
.brush2 {background-image: url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/fEbKapr2mcD0qfI/brush2.png);}
.brush3 {background-image: url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/KyynVS7o1YB7BPp/brush3.png);}
.image { height: 100%; width: 100%; background-color: grey;
}
.lm_btn { text-transform: uppercase; text-decoration: none; color: white; font-size: 14px; font-weight: 900; padding: 7px 15px; border-radius: 5px; max-width: 100px; text-align: center;
/* display: inline-block; */ background: -webkit-linear-gradient(to right, #faae2f, #b873d8); background: linear-gradient(to right, #faae2f, #b873d8); transition: all ease 300ms;
}
.lm_btn:hover { box-shadow: 1px 6px 10px rgba(0,0,0,0.3);
}
.im2 { background-image: url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/fJF361ImJIwyF58/natural_img.jpg); background-size: cover;
}
.im3 { background-image: url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/qjsX7t7ZBzfH84K/therapeutic_img.jpg); background-size: cover;
}
.left_in { margin-left: -100px; opacity: 0; left: 0; transition: all ease 800ms;
}
.right_in { transition: all ease 800ms; right: 0; margin-right: -100px; opacity: 0;
}
.full_sect { height: 100vh;
}
.natural { background: linear-gradient(to right, white, rgba(255,255,255,0.9), rgba(255,255,255,0.8),transparent, transparent), url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/qt5maVjv3myeIyD/natural_bg.jpg); background-size: cover; background-position: right;
}
.therap { background: linear-gradient(to left, white, rgba(255,255,255,0.9), rgba(255,255,255,0.6),transparent, transparent), url(https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/9FrU9QktirC9Vrg/therapeutic_bg.jpg); background-size: cover; background-position: right;
}
</style>
<div class="headerz flexxer flex_col flex_center_hor flex_center_vert"> <div class="container headerz_box flexxer flex_center_hor flex_col"> <h1 class="titlez_main">We promise</h1> <h4 class="titlez_under">pure • natural • therapeutic</h4> <p class="headerz_p"></p> </div> <a href="#scroll_downz"> <div class="scroll_ico"> <div class="scrolly"></div> </div> </a> <div class="spacerz"></div> <img src="https://s3.amazonaws.com/uploads.hipchat.com/58044/1066276/iUl9xMfTOu6d0yd/tree_sil_pnt1.png" class="treez" alt="">
</div>
<div class="sectionzz flexxer flex_col flex_center_hor rel"> <div class="container sect_qual_content flexxer flex_col flex_center_hor"> <div class="sub_sect flexxer rel" id="scroll_downz"> <div class="sub_blocks left_in"> <div class="image im1"></div> </div> <div class="sub_blocks right_in"> <h4 class="sect_brush brush1">QUALITY</h4> <h3 class="sub_sect_title">Pure</h3> <p class="content_graph">GC/MS tests verify the purity and quality of the oils we sell. We use the latest cutting edge scientific studies, world renowned chemists, aromatherapists, and quality technicians to bring you the highest quality oils available today. </p> <a href="#" class="lm_btn"> learn more </a> </div> </div> <div class="sub_sect flexxer"> <div class="sub_blocks left_in r_adjust"> <h4 class="sect_brush brush1">QUALITY</h4> <h3 class="sub_sect_title">Natural</h3> <p class="content_graph">We procure our essential oils where nature intended to preserve the plants' natural therapeutic properties. We support small farms, work with qualified distillery technicians and world-renowned labs to ensure we’re bringing you the most potent and effective essential oils.
</p> <a href="#" class="lm_btn"> learn more </a> </div> <div class="sub_blocks right_in"> <div class="image im2"></div> </div> </div> <div class="sub_sect flexxer"> <div class="sub_blocks left_in"> <div class="image im3"></div> </div> <div class="sub_blocks right_in"> <h4 class="sect_brush brush1">QUALITY</h4> <h3 class="sub_sect_title">Therapeutic</h3> <p class="content_graph">Essential oils are pure plant extracts taken from flowers, grasses, fruits, roots, trees, and leaves. There are many ways to use safely use essential oils therapeutically. To receive the benefits we suggest practicing deep inhalation, applying them topically for targeted relief or diffusing them for aromatherapy purposes. To learn more about how to use essential oils, click below.</p> <a href="#" class="lm_btn"> learn more </a> </div> </div> </div>
</div>
<div class="sectionzz full_sect flexxer flex_center_hor flex_center_vert rel natural"> <div class="container sect_qual_content flexxer flex_col"> <div class="sub_blocksy left_in"> <h4 class="sect_brush brush2">SUSTAINABILITY</h4> <p class="content_graph">Essential oils are precious gifts from the earth and we believe they should be used with respect, properly cared for and protected. This begins before the bottle and includes responsible sourcing. Just as we take great care to protect the purity of our essential oils, we are also dedicated to protecting the earth that provides them. <br><br>
Our current sustainability efforts include packaging created from 100% recycled materials and the industry’s first Glass Bottle Recycling Program. Click below to learn more.</p> <a href="#" class="lm_btn"> learn more </a> </div> </div>
</div>
<div class="sectionzz full_sect flexxer flex_center_hor flex_center_vert rel therap"> <div class="container sect_qual_content flexxer flex_col" style="align-items: flex-end;"> <div class="sub_blocksy right_in r_adjust"> <h4 class="sect_brush brush3">SATISFACTION GUARANTEE</h4> <p class="content_graph">We put our customers first. This is backed by our 90-Day Satisfaction Guarantee and our S.A.A.F.E. Promise. </p> <a href="#" class="lm_btn"> learn more </a> </div> </div>
</div>
<script src="//code.jquery.com/jquery-1.10.1.js"></script>
<script>
$('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } }
});
jQuery(window).scroll(function(){	var wScroll = jQuery(this).scrollTop();	jQuery('.headerz_box').css({	'transform' : 'translate(0px, '+ wScroll /4 +'%)'	}); jQuery('.headerz_p').css({	'transform' : 'translate(0px, -'+ wScroll /4 +'%)', 'opacity' : 'calc(1 - '+ wScroll/500 +')'	});	jQuery('.headerz').css({	'background-position' : '50% '+ 50 - (wScroll/6) +'%', 'background-size' : 100 + (wScroll/20) +'%'	}); jQuery('.scroll_ico').css({	'opacity' : 1 - wScroll/300	});	});
$(window).on('scroll', function () { var scrollTop = $(window).scrollTop(); $('.left_in').each( function () { if((($(this).offset().top)-scrollTop) <= 550){ $(this).css({ 'margin-left' : '0px', 'opacity' : '1' }); } else { $(this).css({ 'margin-left' : '-100px', 'opacity' : '0' }); } }); $('.right_in').each( function () { if((($(this).offset().top)-scrollTop) <= 550){ $(this).css({ 'margin-right' : '0px', 'opacity' : '1' }); } else { $(this).css({ 'margin-right' : '-100px', 'opacity' : '0' }); } });
});
</script> <script src='http://code.jquery.com/jquery-1.10.1.js'></script>
</body>
</html>
PNT Page - Script Codes
PNT Page - Script Codes
Home Page Home
Developer Lahvjal
Username lahvjal
Uploaded January 11, 2023
Rating 3
Size 4,697 Kb
Views 6,072
Do you need developer help for PNT Page?

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!

Lahvjal (lahvjal) Script Codes
Name
Recycle Search - RMO
Portfolio ideas
RMO Live Style Guide
Afa home page
A Pen by Lahvjal
Fall blends lander
Floating Product image
ToggleCss
RMO live StyleGuide
Product-Carousel items
Create amazing art & images 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!