Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Wix Template Recreation
ID	5062555829714944
Created	1 years ago, 1704476846452
Updated	1 years ago, 1704517248274
Code	<!DOCTYPE html> <!-- Lol thumbnail... --> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Wix Template Recreation</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap" rel="stylesheet" /> <!-- --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <!-- All of our styles --> <style> , ::before, ::after { box-sizing: border-box; font-family: "Quicksand", sans-serif; } body { margin: 0; padding: 0; } header { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mt._Carrigain.jpg/1200px-Mt._Carrigain.jpg"); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; height: 120vh; } nav { display: flex; justify-content: space-between; background-color: #0c3c60; padding: 0.5rem 2rem; } nav ul { display: flex; list-style: none; } nav ul:last-child { display: none; } nav ul li a { color: white; text-decoration: none; margin-left: 30px; transition: 0.3s; } nav ul li a:hover { color: rgb(140, 176, 183); } section { margin-top: 10rem; } .heading { color: white; font-size: 1.3em; cursor: pointer; } .log-in { display: flex; gap: 8px; } .material-symbols-outlined { color: white; } .hero-container { display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; font-weight: bold; text-align: center; padding: 2rem; position: absolute; opacity: 0; top: 50%; left: 50%; width: 400px; transform: translate(-50%, 90%); border-radius: 0.3em; animation: fade-in 1s ease 1s forwards; } .title, .encourage-txt { font-weight: 500; } .title { font-size: 1.5em; } .encourage-txt { color: #072136; text-transform: uppercase; font-size: 4em; } .btn { background: none; border: none; border: 0.5px solid #072136; padding: 1rem 3rem; font-weight: bold; font-size: 1em; cursor: pointer; transition: 0.4s ease; } .btn:hover { background-color: #0c3c60; color: white; } .links-section { padding: 4rem; margin-top: 80px; } .links-container { display: grid; grid-template-columns: repeat(3, minmax(250px, auto)); justify-content: space-around; gap: 30px; } .box { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; max-width: 300px; opacity: 0; transition: 0.5s; } .title-box { text-transform: uppercase; font-weight: 500; font-size: 2.5em; } .mini-txt { text-align: center; line-height: 1.6em; font-size: 16px; } .about-section { background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2e/White_Mountains_12_30_09_81.jpg"); background-size: cover; background-color: rgb(236, 248, 255, 0.8); background-blend-mode: overlay; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding: 4rem 0; } .about-container { opacity: 0; transition: 0.3s; text-align: center; max-width: 700px; margin: 0 auto; line-height: 1.6em; font-size: 16px; } .scrolled { opacity: 1; } .scrolled.up { animation: slide-up 1s ease both 0.3s; } .hamburger-lines { background-color: white; width: 20px; height: 3px; border-radius: 0.3em; } .client-container { opacity: 0; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 150px; margin-top: 50px; margin-bottom: 150px; } .logo-img { width: 100px; } .title-name { font-weight: bold; color: #0c3c60; } .person { font-weight: 100; } .contacts { margin-top: -30px; background: #0c3c60; } .contact-title { text-transform: uppercase; color: white; text-align: center; font-weight: 500; font-size: 2.5em; padding: 50px 0px; } .label { color: white; border: none; outline: none; font-size: 1.1em; } .form { display: grid; grid-template-columns: repeat(2, minmax(450px, auto)); justify-content: center; align-items: center; gap: 30px; } .information { display: flex; flex-direction: column; padding-bottom: 3rem; } .contact-input, .contact-textarea { background: none; border: none; outline: none; border-bottom: 1px solid white; margin-top: 10px; color: white; font-size: 1em; } .contact-textarea { width: 100%; height: 80px; } .submit-btn { width: 150px; border: 1px solid white; background-color: white; padding: .8rem 1.5rem; margin: 30px 0; font-weight: bolder; transition: .5s ease; } .submit-btn:hover { cursor: pointer; background-color: #0c3c60; color: white; } .footer { background-color: #072136; margin-top: -40px; padding: 50px 0px 100px 0px; } .footer-container { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; } .footer-nav { display: flex; flex-direction: column; } .footer-info { color: white; } .footer-title { font-weight: lighter; } .footer-list { list-style: none; padding-left: 0; } .footer-list > li { margin-bottom: 5px; } .footer-list > li > a { color: white; text-decoration: none; transition: .3s ease; } .footer-list > li > a:hover { color: #7BBCDB; } .footer-imgs { width: 30px; } @media (max-width: 940px) { nav { align-items: center; padding: 0; } / This is for the nav bar turning into a hamburger bar / nav ul:nth-child(2) { display: none; } / This is for the "Acheiving growth" box / .hero-container { background: white; font-weight: bold; text-align: center; padding: 2rem; position: absolute; opacity: 0; top: -10%; left: 50%; width: 80vw; border-radius: 0.3em; } / This is for the links / .links-container { display: grid; grid-template-columns: repeat(1, minmax(250px, auto)); justify-content: space-around; gap: 30px; } / Hamburger / nav ul:last-child, .hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding-right: 15px; } / About container / .about-container { opacity: 0; transition: 0.3s; text-align: center; max-width: 700px; margin: 0 auto; line-height: 1.6em; font-size: 16px; padding: 1.5rem; } / Logos / .client-container { display: flex; justify-content: center; align-items: center; gap: 150px; flex-wrap: wrap; } / Contact info / .form { display: grid; grid-template-columns: repeat(1, minmax(550px, auto)); justify-content: center; gap: 30px; } } @media (max-width: 550px) { .encourage-txt { color: #072136; text-transform: uppercase; font-size: 35px; } .hero-container { background: white; font-weight: bold; text-align: center; padding: 2rem; position: absolute; opacity: 0; top: -10%; left: 50%; width: 80vw; border-radius: 0.3em; text-align: center; } .btn.book-btn { scale: 0.8; } / Contact info / .form { display: grid; grid-template-columns: repeat(1, minmax(250px, auto)); justify-content: center; gap: 30px; } / Footer info / .footer-container { display: flex; justify-content: left; align-items: left; padding-left: 30px; flex-wrap: wrap; gap: 20px; flex-direction: column; } } @keyframes fade-in { 100% { transform: translate(-50%, 60%); opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body> <!-- Hero --> <header> <nav> <ul> <li><span class="heading">JAMES CONSULTING</span></li> </ul> <ul> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Plans</a></li> <li><a href="#">Tools</a></li> <li><a href="#">Contact</a></li> <li class="login"> <a class="log-in" href="#" ><span class="material-symbols-outlined"> login </span>Log In </a> </li> </ul> <ul> <div class="hamburger"> <div class="hamburger-lines"></div> <div class="hamburger-lines"></div> <div class="hamburger-lines"></div> </div> </ul> </nav> <div class="hero-container"> <h2 class="title">Developing Innovative Strategies</h2> <h1 class="encourage-txt">Achieving Growth</h1> <button class="btn book-btn">Book A Consultation</button> </div> </header> <!-- Different links section --> <section class="links-section"> <div class="links-container"> <div class="box up"> <h1 class="title-box">Services</h1> <p class="mini-txt"> I'm a paragraph. Click here to add your own text and edit me. It's easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I'm a great place for you to tell a story and let your users know a little more about you. </p> <br /><br /> <button class="btn">More Info</button> </div> <div class="box up"> <h1 class="title-box">Projects</h1> <p class="mini-txt"> I'm a paragraph. Click here to add your own text and edit me. It's easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I'm a great place for you to tell a story and let your users know a little more about you. </p> <br /><br /> <button class="btn">More Info</button> </div> <div class="box up"> <h1 class="title-box">Clients</h1> <p class="mini-txt"> I'm a paragraph. Click here to add your own text and edit me. It's easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I'm a great place for you to tell a story and let your users know a little more about you. </p> <br /><br /> <button class="btn">More Info</button> </div> </div> </section> <!-- About Us section --> <section class="about-section"> <div class="about-container up"> <h1 style="text-transform: uppercase; font-size: 2.5em; font-weight: 400" > About Us </h1> <p> I'm a paragraph. Click here to add your own text and edit me. It's easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I'm a great place for you to tell a story and let your users know a little more about you. </p> <br /> <p> This is a great space to write a long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are. </p> <br /><br /> <button class="btn">Learn More</button> </div> </section> <!-- Client section --> <section> <h1 style=" text-transform: uppercase; font-size: 2.5em; font-weight: 400; text-align: center; " > Our clients </h1> <br /> <div class="client-container up"> <img class="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Mci_logo.svg/640px-Mci_logo.svg.png" alt="Example logo 1" /> <img class="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/MMM_logo.svg/1200px-MMM_logo.svg.png" alt="Example logo 2" /> <img class="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Stratton_Oakmont_Logo.png" alt="Example logo 3" /> <img class="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Qnet.jpg/220px-Qnet.jpg" alt="Exmaple logo 4" /> </div> </section> <!-- Contacts section --> <section class="contacts"> <h1 id="contact" class="contact-title">Contact</h1> <div class="form"> <div class="information"> <label class="label" for="name">First Name</label> <input class="contact-input" type="text" /> </div> <div class="information"> <label class="label" for="name">Last Name</label> <input class="contact-input" type="text" /> </div> <div class="information"> <label class="label" for="name" aria-required="true">Email</label> <input class="contact-input" type="text" /> </div> <div class="information"> <label class="label" for="name" aria-required="true">Subject</label> <input class="contact-input" type="text" /> </div> <div class="information"> <label class="label" for="">Message</label> <textarea class="contact-textarea" name="message" id="" cols="30" rows="10" ></textarea> ><br /> <button class="submit-btn">Submit</button> </div> </div> </section> <!-- Footer section --> <section class="footer"> <div class="footer-container"> <div class="footer-info"> <h1 class="footer-title">James Consulting</h1> <p> 500 Terry Francine Street<br />San Francisco, CA 94158<br />Mail: info@mywebsite.com<br />Tel: 123-456-7890 </p> </div> <div class="footer-info"> <h1 class="footer-title">Menu</h1> <ul class="footer-list"> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Plans</a> </li> <li> <a href="#">Tools</a> </li> <li> <a class="special" href="#contact">Contact</a> </li> </ul> </div> <div class="footer-info"> <h1 class="footer-title">Socials</h1> <div class="footer-img-links"> <img class="footer-imgs" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/2023_Facebook_icon.svg" alt="facebook" /> <img class="footer-imgs" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/220px-Logo_of_Twitter.svg.png" alt="twitter" /> <br /><br /> <p>© 2035 by Classic Kid</p> <p>Powered by ME</p> </div> </div> </div> </section> <!-- Big credit to Polar for this amazing scroll function --> <script> function checkScroll() { const scrollElements = document.querySelectorAll(".box"); for (let i = scrollElements.length; i--; ) { if ( scrollElements[i].getBoundingClientRect().top < window.innerHeight ) { scrollElements[i].classList.add("scrolled"); } else { scrollElements[i].classList.remove("scrolled"); } } } //check scroll on load checkScroll(); //add event listener document.addEventListener("scroll", checkScroll); </script> <script> function checkScrollAgain() { const scrollElements = document.querySelectorAll(".about-container"); for (let i = scrollElements.length; i--; ) { if ( scrollElements[i].getBoundingClientRect().top < window.innerHeight ) { scrollElements[i].classList.add("scrolled"); } else { scrollElements[i].classList.remove("scrolled"); } } } //check scroll on load checkScrollAgain(); //add event listener document.addEventListener("scroll", checkScrollAgain); </script> <script> function checkScrollThird() { const scrollElements = document.querySelectorAll(".client-container"); for (let i = scrollElements.length; i--; ) { if ( scrollElements[i].getBoundingClientRect().top < window.innerHeight ) { scrollElements[i].classList.add("scrolled"); } else { scrollElements[i].classList.remove("scrolled"); } } } //check scroll on load checkScrollThird(); //add event listener document.addEventListener("scroll", checkScrollThird); </script> <!-- Credit to Bluebird for the thumbnail script --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script><script type>var r=600,s=document.documentElement.clientWidth;window.parent.html2canvas=t=>{try{html2canvas(document.body,{width:s,height:s,useCORS:!0,onclone:t=>t.getAnimations().forEach((t=>{try{t.finish()}catch{}}))}).then((t=>{var e=document.createElement("canvas");e.width=r,e.height=r,e.getContext("2d").drawImage(t,0,0,t.width,t.height,0,0,r,r),window.top.postMessage(e.toDataURL(),"")})).catch((t=>{alert("Thumbnail Script Error: "+t)}))}catch{window.top.postMessage(document.createElement("canvas").toDataURL(),"*")}};</script> </body> </html>
Folds	27,492,496,528,531,567,570,596,599,633,636,668,671,719,722,739,741,758,760,777
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIuP4ov_CAw
Votes	18
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Classic Kid
Author Name	classickid
Author ID	kaid_1168774361013512472344293
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1719411323042
Updated	6 months ago, 1719411323042
Source Deleted	unknown