Creative Juice Co.

Developer
Sasha
Size
6,391 Kb
Views
12,144
  1. Creative Juice Co. Previews
  2. Creative Juice Co. HTML Codes
  3. Creative Juice Co. CSS Codes
  4. Creative Juice Co. JS Codes

How do I make an creative juice co.?

Practicing Parallax Scroll. View in full page view :) . What is a creative juice co.? How do you make a creative juice co.? This script and codes were developed by Sasha on 03 January 2023, Tuesday.

Creative Juice Co. Previews
IQ Test

Creative Juice Co. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Creative Juice Co.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a id="backToTop" class="hidden" href="#"> &uarr; </a>
<!-- navigation -->
<div class="nav"> <div class="logo"> <img id="main-logo" src="https://res.cloudinary.com/sasha-tran/image/upload/v1483576978/creative_co_logo_2_kijl1h.png"></img> <span id="logo-text"> Creative Juice Co. </span> </div> <div class="nav-bar"> <ul> <li><a href="#purchase"> Buy </a></li> <li> <a href="https://sasha-tran.appspot.com" target="_blank">About </a></li> <li> Contact </li> </ul> </div>
</div>
<div class="parallax"> <!-- orange block --> <section> <div class="p-one"> <div class="text"> <img id="carrot" src="https://res.cloudinary.com/sasha-tran/image/upload/v1483493285/carrot_2_xwuapg.png"></img> <p>Looking for creative juice?</p> <button id="buy"> <a href="#block-three">Buy Now</a> </button> </div> </div> </section>
<!-- yellow block --> <section> <div class="tri" style="opacity: 0.9;"> <img id="tri" src="https://res.cloudinary.com/sasha-tran/image/upload/v1483561336/tri2_jrtfez.png"> </img></div> <div class="block" id="block-two"> <div class="text"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 2189 2644" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-3" transform="translate(-18.000000, -6.000000)"> <path d="M950.404309,2186.56118 L950.404309,2641.56118" id="Line" stroke="#FFFFFF" stroke-width="20" stroke-linecap="square" transform="translate(950.404309, 2414.061180) rotate(10.000000) translate(-950.404309, -2414.061180) "></path> <rect id="Rectangle" fill="#FFFFFF" transform="translate(1135.602494, 1381.026388) rotate(10.000000) translate(-1135.602494, -1381.026388) " x="896.602494" y="727.526388" width="478" height="1307" rx="12"></rect> <rect id="Rectangle-2" fill="#FFFFFF" transform="translate(1007.536963, 2107.322106) rotate(10.000000) translate(-1007.536963, -2107.322106) " x="895.536963" y="2023.32211" width="224" height="168" rx="21"></rect> <rect id="Rectangle-3" fill="#FFFFFF" transform="translate(1258.864160, 684.854131) rotate(10.000000) translate(-1258.864160, -684.854131) " x="925.36416" y="631.354131" width="667" height="107" rx="38"></rect> <rect id="Rectangle-4" fill="#FFFFFF" transform="translate(1310.608913, 374.118744) rotate(10.000000) translate(-1310.608913, -374.118744) " x="1163.10891" y="112.618744" width="295" height="523"></rect> <rect id="Rectangle-5" fill="#FFFFFF" transform="translate(1366.614056, 82.412258) rotate(10.000000) translate(-1366.614056, -82.412258) " x="1101.61406" y="45.9122583" width="530" height="73" rx="36.5"></rect> <rect id="Rectangle-6" fill="#F19090" transform="translate(1094.447876, 1614.425826) rotate(10.000000) translate(-1094.447876, -1614.425826) " x="855.447876" y="1197.92583" width="478" height="833"></rect> <path d="M1206.13586,948.100929 L1441.13586,948.100929" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1323.635861, 948.100929) rotate(10.000000) translate(-1323.635861, -948.100929) "></path> <path d="M1183.2143,1078.09555 L1418.2143,1078.09555" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1300.714301, 1078.095553) rotate(10.000000) translate(-1300.714301, -1078.095553) "></path> <path d="M1160.98733,1204.15094 L1395.98733,1204.15094" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1278.487335, 1204.150945) rotate(10.000000) translate(-1278.487335, -1204.150945) "></path> <path d="M1138.76037,1330.20634 L1373.76037,1330.20634" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1256.260368, 1330.206337) rotate(10.000000) translate(-1256.260368, -1330.206337) "></path> <path d="M1116.5334,1456.26173 L1351.5334,1456.26173" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1234.033401, 1456.261730) rotate(10.000000) translate(-1234.033401, -1456.261730) "></path> <path d="M1085.04119,1606.06907 L1320.04119,1606.06907" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1202.541191, 1606.069075) rotate(10.000000) translate(-1202.541191, -1606.069075) "></path> <path d="M1063.39706,1757.6129 L1298.39706,1757.6129" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1180.897059, 1757.612902) rotate(10.000000) translate(-1180.897059, -1757.612902) "></path> <path d="M1040.4755,1887.60753 L1275.4755,1887.60753" id="Line" stroke="#979797" stroke-width="15" stroke-linecap="square" transform="translate(1157.975499, 1887.607525) rotate(10.000000) translate(-1157.975499, -1887.607525) "></path> <path d="M1297.70817,1022.65009 L1417.70817,1022.65009" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1357.708169, 1022.650093) rotate(10.000000) translate(-1357.708169, -1022.650093) "></path> <path d="M1275.30755,1149.69029 L1395.30755,1149.69029" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1335.307554, 1149.690293) rotate(10.000000) translate(-1335.307554, -1149.690293) "></path> <path d="M1262.11751,1276.32371 L1382.11751,1276.32371" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1322.117506, 1276.323711) rotate(10.000000) translate(-1322.117506, -1276.323711) "></path> <path d="M1232.41645,1392.93781 L1352.41645,1392.93781" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1292.416454, 1392.937808) rotate(10.000000) translate(-1292.416454, -1392.937808) "></path> <path d="M1207.23747,1535.73493 L1327.23747,1535.73493" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1267.237469, 1535.734932) rotate(10.000000) translate(-1267.237469, -1535.734932) "></path> <path d="M1180.6693,1686.41052 L1300.6693,1686.41052" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1240.669298, 1686.410518) rotate(10.000000) translate(-1240.669298, -1686.410518) "></path> <path d="M1162.96199,1821.38626 L1282.96199,1821.38626" id="Line" stroke="#979797" stroke-width="8" stroke-linecap="square" transform="translate(1222.961992, 1821.386262) rotate(10.000000) translate(-1222.961992, -1821.386262) "></path> <rect id="Rectangle-8" fill="#47B75A" transform="translate(1063.401943, 1329.875147) scale(1, -1) rotate(40.000000) translate(-1063.401943, -1329.875147) " x="1003.12648" y="-251.831546" width="120.550924" height="3163.41339" rx="45"></rect> <rect id="Rectangle-8" fill="#47B75A" transform="translate(1162.401943, 1350.875147) scale(-1, -1) rotate(40.000000) translate(-1162.401943, -1350.875147) " x="1102.12648" y="-230.831546" width="120.550924" height="3163.41339" rx="45"></rect> </g> </g>
</svg> <p>Non GMO </p></div> </div> </section>
<!-- green block --> <section> <div class="tri2"> <img id="tri" src="https://res.cloudinary.com/sasha-tran/image/upload/v1483561616/yellow_kls4ik.png"> </img></div> <div class="p-two"> <div class="text"> <img id="broccoli" src="https://res.cloudinary.com/sasha-tran/image/upload/v1483493368/broccoli_f1xomg.png"> </img> <p> 100% Organic </p></div> </div> </section>
<!-- purple block --> <section id="purchase"> <div class="tri"> <img id="tri" src="https://res.cloudinary.com/sasha-tran/image/upload/v1483562125/green_gq37dz.png"> </img></div> <div class="block" id="block-three"> <p id="three">Please enter your email to sign up for the queue</p> <input placeholder="Enter your email here"> </input> <button id="submit"> Submit </button> </div>
</section>
</div>
<!-- footer -->
<footer> <div> Coded By Sasha Tran </div>
<div>Icons made by <a href="http://www.flaticon.com/authors/madebyoliver" title="Madebyoliver">Madebyoliver</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0</a></div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Creative Juice Co. - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Roboto");
svg { width: 200px; height: 200px;
}
body, html { font-family: 'Roboto', sans-serif; width: 100%; height: 100%; margin: 0;
}
#tri { z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 30px; opacity: 1;
}
.nav { width: 100%; height: 60px; background: none; position: fixed; color: #fff; justify-content: space-between; align-items: center; z-index: 100;
}
.logo { padding: 30px; font-size: 15px; letter-spacing: 5px; display: inline-block;
}
#main-logo { position: absolute; width: 16px;
}
#logo-text { position: absolute; margin-left: 30px; margin-top: 15px;
}
.nav-bar { position: absolute; left: 1100px; top: 10px;
}
.nav-bar > ul li { font-size: 12px; display: inline-block; padding: 8px; color: #FFF; text-transform: uppercase; letter-spacing: 5px;
}
li a { text-decoration: none; color: #FFF;
}
li a:hover { color: #EEE;
}
section { width: 100%; height: 100vh; flex: 1; display: flex; text-align: center; position: relative; overflow: hidden;
}
.p-one { padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: #FF9B66; background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;
}
.text { position: absolute; margin: 0; top: 150px; bottom: 0; left: 0; right: 0; font-size: 30px; color: #FFF; padding: 30px; text-transform: uppercase; letter-spacing: 20px;
}
.p-two { background: #47B75A; padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;
}
.block { padding: 100px; padding-top: 300px; width: 100%; margin: 0 auto; text-align: justify; font-size: 15px; line-height: 25px;
}
#block-two { background: #FCCF6F; text-align: center;
}
#block-three { background: #F7AFB5; text-align: center; color: #FFF;
}
#block-three input { width: 200px; height: 25px; border: none; border-radius: 20px; padding-left: 10px; outline: none; color: #666;
}
#buy { font-size: 13px; border: 2px solid #FFF; background: none; border-radius: 20px; width: 140px; height: 30px; text-transform: uppercase; color: #FFF; outline: none;
}
#buy:hover { background: #47B75A; color: #FFF; border: 2px solid #47B75A; cursor: pointer;
}
#buy a { text-decoration: none; color: #FFF;
}
.vege { position: absolute; top: 50px; left: 300px;
}
#carrot, #broccoli { width: 150px;
}
footer { margin: 0; top: 0; bottom: 0; left: 0; right: 0; padding: 20px; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 5px;
}
footer > div { padding: 4px;
}
footer a { text-decoration: none; color: #333;
}
#backToTop { position: fixed; bottom: 10px; right: 40px; z-index: 1; width: 100px; height: 32px; text-align: center; line-height: 30px; color: #000; font-size: 14px; cursor: pointer; text-decoration: none; transition: opacity 0.2s ease-out;
}
#backToTop a { color: #000;
}
.show { visibility: visible;
}
.hidden { visibility: hidden;
}
p#three { text-align: center; font-size: 20px; color: #FFF; letter-spacing: 5px; text-transform: uppercase;
}
#submit { margin-left: 5px; font-size: 13px; border: 2px solid #FFF; background: none; border-radius: 20px; width: 140px; height: 30px; text-transform: uppercase; color: #FFF; outline: none;
}
#submit:hover { background: #47B75A; color: #FFF; border: 2px solid #47B75A; cursor: pointer;
}
#submit a { text-decoration: none; color: #FFF;
}
#Rectangle-6 { animation: 6s move ease infinite;
}
@keyframes move { 50% { height: 1200px; y: 800px; }
}

Creative Juice Co. - Script Codes JS Codes

$('#buy a').click(function () { var $href = $(this).attr('href'); $('body').stop().animate({ scrollTop: $($href).offset().top }, 1000); return false;
});
$('.nav-bar a').click(function () { var $href = $(this).attr('href'); $('body').stop().animate({ scrollTop: $($href).offset().top }, 1000); return false;
});
$('#backToTop').click(function () { $('body').animate({ scrollTop: 0 }, 1000, function(){ $('#backToTop').removeClass('show'); $('#backToTop').addClass('hidden'); }); return false;
});
$(window).scroll(function() { $('#backToTop').removeClass('hidden'); $('#backToTop').addClass('show');
});
Creative Juice Co. - Script Codes
Creative Juice Co. - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded January 03, 2023
Rating 3.5
Size 6,391 Kb
Views 12,144
Do you need developer help for Creative Juice Co.?

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!

Sasha (sashatran) Script Codes
Name
Layout Design
CSS Gallery Hover Effect
Pages of 2017
VueJS Todo List
Svg Stars Experiment
VueJS Zip Code Finder
Random Color Generator
Google Inspired Floating Action Button
Instagram Inspired Loader
Subscribe Button
Create amazing marketing copy 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!