#Pinspiration

Developer
Kyle Shanks
Size
6,935 Kb
Views
44,528
  1. #Pinspiration Previews
  2. #Pinspiration HTML Codes
  3. #Pinspiration CSS Codes
  4. #Pinspiration JS Codes

How do I make an #pinspiration?

What is a #pinspiration? How do you make a #pinspiration? This script and codes were developed by Kyle Shanks on 04 August 2022, Thursday.

#Pinspiration Previews
IQ Test

#Pinspiration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#Pinspiration</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rela-block content-container"> <div class="rela-block top-section"> <div class="nav-bar"> <div class="logo">l'oiseau</div> <div class="los-links"> <a class="nav-link" href="#ourStoryBox">Our Story</a> <a class="nav-link" href="#fareBox">Fare</a> <a class="nav-link" href="#drinkBox">Drink</a> <a class="nav-link" href="#contactBox">Contact</a> </div> </div> <div class="top-center-image"></div> <div class="down-arrow"></div> </div> <div class="rela-block picture-section"> <div class="rela-block picture-box-container left"> <div class="picture-box-picture"></div> <div class="picture-box-text" id="ourStoryBox"> <div class="text-container"> <h2 class="header">OUR STORY</h2> <p class="rela-block text">Blog beard mustache gastropub, retro chillwave disrupt chartreuse master cleanse. Pinterest vegan flexitarian, hella chartreuse ugh trust fund pitchfork flannel etsy narwhal butcher. Food truck chillwave freegan hoodie, authentic knausgaard neutra. Gochujang cred drinking vinegar echo park, lumbersexual normcore umami banh mi vinyl. </p> <span class="rela-block">EST. 2004</span> </div> </div> </div> <div class="rela-block picture-box-container right"> <div class="picture-box-picture"></div> <div class="picture-box-text" id="fareBox"> <div class="text-container"> <h2 class="header">FRESH FARE</h2> <p class="rela-block text">Roof party viral microdosing art party scenester cardigan. Chicharrones 3 wolf moon polaroid, godard four loko viral cold-pressed banh mi put a bird on it bespoke mumblecore. Austin small batch direct trade wolf brooklyn, swag affogato pitchfork hammock.</p> <span class="rela-block">ALL NATURAL</span> </div> </div> </div> <div class="rela-block picture-box-container left"> <div class="picture-box-picture"></div> <div class="picture-box-text" id="drinkBox"> <div class="text-container"> <h2 class="header">LOCAL DISTILLATION</h2> <p class="rela-block text">8-bit salvia before they sold out pickled normcore. Food truck craft beer venmo VHS ramps, plaid microdosing health goth semiotics before they sold out small batch. Church-key XOXO lo-fi flexitarian, deep v vice artisan aesthetic next level kitsch. Craft beer chicharrones iPhone scenester, XOXO aesthetic tote bag ramps.</p> <span class="rela-block">CRAFT LIQOUR</span> </div> </div> </div> <div class="rela-block full-picture-box"></div> </div> <div class="rela-block bottom-section" id="contactBox"> <div class="logo">l'oiseau</div> <div class="footer-text"> <p class="text">555 Hipster Ave<br>Underground, XY 99999<br><br>T: (281) 330-8004<br>F: (555) 555-5555</p> </div> </div>
</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>

#Pinspiration - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Knewave");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,600,800");
* { -webkit-transition: 0.4s ease; transition: 0.4s ease;
}
body { background-color: #a0c7b4;
}
.rela-block { display: block; position: relative; overflow: hidden; text-align: center;
}
.content-container { width: 85%; max-width: 1400px; min-width: 320px; margin: 80px auto; background-color: #fff; box-shadow: 8px 8px 20px 5px rgba(20,20,20,0.4); font-family: "Raleway"; font-size: 22px; line-height: 28px; letter-spacing: 4px;
}
.top-section { height: 700px; background: url("https://moderndaygypsyblog.files.wordpress.com/2014/12/photodune-2487584-white-wood-background-m.jpg") no-repeat center;
}
.top-section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,0.65);
}
.nav-bar { position: absolute; width: 100%; max-width: 1250px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden;
}
.logo { display: inline-block; position: absolute; text-transform: uppercase; width: 100%; max-width: 270px; font-size: 50px; line-height: 68px; top: 35px; left: 70px; letter-spacing: 2px; font-family: "Knewave"; cursor: pointer; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); -webkit-transition: 0.3s ease, left 0.4s ease; transition: 0.3s ease, left 0.4s ease; z-index: 10;
}
.logo::before { content: ""; position: absolute; left: 50%; bottom: -10px; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 10px; width: 40px; background-color: rgba(195,18,77,0.7);
}
.logo:hover { -webkit-transform: rotate(-8deg) scale(1.15); transform: rotate(-8deg) scale(1.15); -webkit-transition: 0.3s cubic-bezier(0.3, 0.2, 0, 2); transition: 0.3s cubic-bezier(0.3, 0.2, 0, 2);
}
.los-links { display: inline-block; position: relative; float: right; text-transform: uppercase; padding: 45px 20px;
}
.nav-link { display: inline-block; position: relative; text-decoration: none; color: #000; padding: 5px 15px 10px; font-size: 15px; letter-spacing: 3px; font-weight: 600; -webkit-transition: 0.4s ease, padding 0.3s ease; transition: 0.4s ease, padding 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.nav-link::before { content: ""; position: absolute; bottom: 0; left: 49%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 2px; width: 71%; background-color: #000; opacity: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.nav-link:nth-child(1)::before { width: 80%;
}
.nav-link:nth-child(4)::before { width: 76%;
}
.nav-link:hover::before { opacity: 1; bottom: 8px;
}
.top-center-image { position: absolute; height: 200px; width: 200px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("http://1.bp.blogspot.com/-i3JId-IqdwQ/T2wBJRQpmwI/AAAAAAAAETc/RE7Xj6KyOpg/s1600/free%2Bdigital%2Bstamp_cute%2Bbird.png") no-repeat center; background-size: cover;
}
.top-center-image::before { content: ""; position: absolute; top: 42px; left: -55px; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 90px solid rgba(195,18,77,0.6); -webkit-transform: rotate(245deg); transform: rotate(245deg);
}
.down-arrow { position: absolute; height: 45px; width: 105px; bottom: 60px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: bob 1.1s alternate infinite ease-in-out; animation: bob 1.1s alternate infinite ease-in-out;
}
.down-arrow::before,
.down-arrow::after { content: ""; position: absolute; width: 40%; height: 4px; background-color: rgba(204,51,102,0.867); top: 20px;
}
.down-arrow::before { -webkit-transform: rotate(36deg); transform: rotate(36deg); left: 15%;
}
.down-arrow::after { -webkit-transform: rotate(-36deg); transform: rotate(-36deg); left: 45.5%;
}
.picture-box-container { min-height: 500px;
}
.picture-box-container.left .picture-box-text,
.picture-box-container.right .picture-box-picture { float: left;
}
.picture-box-container.left .picture-box-picture,
.picture-box-container.right .picture-box-text { float: right;
}
.picture-box-container:nth-child(1) .header { font-size: 42px; line-height: 50px;
}
.picture-box-container:nth-child(1) .picture-box-picture { background: url("https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/64288519198309.56372ea2d775a.jpg") no-repeat center;
}
.picture-box-container:nth-child(2) .picture-box-picture { background: url("https://pbs.twimg.com/media/CVd0v1JVEAA9SFY.png:large") no-repeat center;
}
.picture-box-container:nth-child(3) .picture-box-picture { background: url("https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/77909519198309.56372ea32456d.jpg") no-repeat center;
}
.picture-box-text { position: relative; min-height: 500px; width: 40%; background-color: #bbb; background: url("http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg") no-repeat center; background-size: cover; overflow: hidden;
}
.picture-box-text::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,0.65);
}
.text-container { position: absolute; width: 90%; top: 48%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden;
}
.text-container span { font-size: 18px; line-height: 26px; letter-spacing: 3px; font-weight: 800; color: rgba(195,18,77,0.9);
}
.header { display: block; position: relative; margin-bottom: 30px; padding-bottom: 15px; font-size: 31px; line-height: 42px; letter-spacing: 2px; font-family: "Raleway"; font-weight: 800; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.header::before { content: ""; position: absolute; left: 50%; bottom: -10px; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 8px; width: 36px; background-color: rgba(195,18,77,0.7);
}
.text { font-size: 14px; line-height: 18px; letter-spacing: 2px; font-weight: 600; margin-bottom: 30px;
}
.picture-box-picture { position: relative; min-height: 500px; width: 60%; background-size: cover !important;
}
.full-picture-box { height: 500px; background: url("https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/0bed7619198309.56372ea303c87.jpg") no-repeat center; background-size: cover;
}
.bottom-section { min-height: 350px; background: url("http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg") repeat-x center; background-size: 800px;
}
.bottom-section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,0.65);
}
.bottom-section .logo { top: 65px; left: 40px; font-size: 40px; -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.bottom-section .logo:hover { -webkit-transform: scale(1.2); transform: scale(1.2);
}
.footer-text { position: absolute; width: 100%; max-width: 200px; top: 200px; left: 70px; text-align: left;
}
.footer-text .text { font-size: 13px; font-weight: 800; margin: 0;
}
@media screen and (max-width: 960px) { .nav-bar .logo { left: 50%; -webkit-transform: translateX(-50%) rotate(-5deg); transform: translateX(-50%) rotate(-5deg); } .nav-bar .logo:hover { -webkit-transform: translateX(-50%) rotate(-8deg) scale(1.15); transform: translateX(-50%) rotate(-8deg) scale(1.15); -webkit-transition: 0.3s cubic-bezier(0.3, 0.2, 0, 2); transition: 0.3s cubic-bezier(0.3, 0.2, 0, 2); } .los-links { padding: 150px 0 15px; width: 100%; } .top-center-image { top: 64%; } .picture-box-text { width: 100%; min-height: 300px; } .picture-box-picture { min-height: 250px; width: 100%; } .text-container { display: block; position: relative; margin: auto; top: 0; left: 0; padding: 30px 0; -webkit-transform: scale(1); transform: scale(1); } .bottom-section .logo, .bottom-section .footer-text { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .bottom-section .logo:hover { -webkit-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); }
}
@media screen and (max-width: 700px) { .full-picture-box { height: 300px; } .content-container { margin: 50px auto 60px; }
}
@-webkit-keyframes bob { to { bottom: 10px; }
}
@keyframes bob { to { bottom: 10px; }
}

#Pinspiration - Script Codes JS Codes

// #Pinspiration
// https://www.pinterest.com/pin/70228075417474245/
// https://www.behance.net/gallery/19198309/Ce-Soir-Restaurant
// Fun dummy text
// http://hipsum.co/
$( document ).ready(function() { // Nav-bar Scroll Function $(".nav-link").click(function(){ if($(this.hash).height() > $(window).height()) { $('html,body').animate({ scrollTop: $(this.hash).offset().top-25 }, 1000); } else { $('html,body').animate({ scrollTop: $(this.hash).offset().top-(($(window).height() - $(this.hash).innerHeight())/2) }, 1000); } return false; });
});
#Pinspiration - Script Codes
#Pinspiration - Script Codes
Home Page Home
Developer Kyle Shanks
Username mavrK
Uploaded August 04, 2022
Rating 3.5
Size 6,935 Kb
Views 44,528
Do you need developer help for #Pinspiration?

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!

Kyle Shanks (mavrK) Script Codes
Name
Metro Stuff
Just social stuff
Test design stuff
Idk yet
Placeholder Site
Choose your Starter
Nvm all fixed now
New cube thingy
Ableton Concept
Package Manager Thing
Create amazing blog posts 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!