WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1577
webtemplates
Apri nell'Editor
Video
Pubblica il Tuo Codice
0
9 April 2025
Ben Lucas Alves
2 April 2025
Sistema solare
HTML
Copy
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="TemplateMo"> <title>Creative Portfolio Showcase</title> <!-- CSS FILES --> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg"> <div class="container"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a href="index.html" class="navbar-brand mx-auto mx-lg-0">CreativeHub</a> <div class="d-flex align-items-center d-lg-none"> <a class="custom-btn btn" href="#section_5"> +123 4567890 </a> </div> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-lg-5"> <li class="nav-item"> <a class="nav-link click-scroll" href="#section_1">Welcome</a> </li> <li class="nav-item"> <a class="nav-link click-scroll" href="#section_2">Bio</a> </li> <li class="nav-item"> <a class="nav-link click-scroll" href="#section_3">What I Offer</a> </li> <li class="nav-item"> <a class="nav-link click-scroll" href="#section_4">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link click-scroll" href="#section_5">Get in Touch</a> </li> </ul> <div class="d-lg-flex align-items-center d-none ms-auto"> <a class="custom-btn btn" href="#section_5"> +0123 45678900 </a> </div> </div> </div> </nav> <main> <section class="hero d-flex justify-content-center align-items-center" id="section_1"> <div class="container" style="justify-content: center; display: flex;"> <div class="row"> <div class="col-lg-12 col-12"> <div class="hero-text"> <div class="hero-title-wrap d-flex align-items-center text-center mb-4" style="justify-content: center;"> <h1 class="hero-title ms-3 mb-0" style="text-align: center;">Welcome to My World!</h1> </div> <h2 class="mb-4" style="text-align: center;" style="justify-content: center;">Let's Create Something Amazing Together.</h2> <p class="mb-4" style="justify-content: center;display:flex;"><a class="custom-btn btn custom-link" href="#section_2" style="background-color: rgb(45, 49, 100);">Get Started</a></p> </div> </div> </div> </div> </section> <section class="about section-padding" id="section_2"> <div class="container"> <div class="row"> <div class="col-lg-6 col-12"> <img src="/assets/img/placeholder.webp" class="about-image img-fluid" alt=""> </div> <div class="col-lg-6 col-12 mt-5 mt-lg-0"> <div class="about-thumb"> <div class="section-title-wrap d-flex justify-content-end align-items-center mb-4"> <h2 class="text-white me-4 mb-0">My Journey</h2> <img src="/assets/img/placeholder.webp" class="avatar-image img-fluid" alt=""> </div> <h3 class="pt-2 mb-3">How it started...</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel magna vel felis fermentum feugiat. Nunc facilisis, tellus ut mollis sagittis, felis leo ultrices ipsum, vel pretium est elit vel nisl. Maecenas magna tellus, posuere sed nisi et, vestibulum sodales tortor. Donec sed sem accumsan, semper nulla laoreet, dictum quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> </div> </section> <section class="services section-padding" id="section_3"> <div class="container"> <div class="row"> <div class="col-lg-10 col-12 mx-auto"> <div class="section-title-wrap d-flex justify-content-center align-items-center mb-5" style="height:150px"> <h2 class="text-white ms-4 mb-0">What I Offer</h2> </div> <div class="row pt-lg-5"> <div class="col-lg-6 col-12"> <div class="services-thumb"> <div class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"> <h3 class="mb-0">Web Development</h3> <div class="services-price-wrap ms-auto"> <p class="services-price-text mb-0">$2,400</p> <div class="services-price-overlay"></div> </div> </div> <p>Need a stunning website? Let's build one together!</p> <a href="#" class="custom-btn custom-border-btn btn mt-3">Learn More</a> <div class="services-icon-wrap d-flex justify-content-center align-items-center"> <i class="services-icon bi-globe"></i> </div> </div> </div> <div class="col-lg-6 col-12"> <div class="services-thumb services-thumb-up"> <div class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"> <h3 class="mb-0">Brand Strategy</h3> <div class="services-price-wrap ms-auto"> <p class="services-price-text mb-0">$1,200</p> <div class="services-price-overlay"></div> </div> </div> <p>Let's define your brand and make it shine.</p> <a href="#" class="custom-btn custom-border-btn btn mt-3">Learn More</a> <div class="services-icon-wrap d-flex justify-content-center align-items-center"> <i class="services-icon bi-lightbulb"></i> </div> </div> </div> <div class="col-lg-6 col-12"> <div class="services-thumb"> <div class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"> <h3 class="mb-0">E-commerce Solutions</h3> <div class="services-price-wrap ms-auto"> <p class="services-price-text mb-0">$3,600</p> <div class="services-price-overlay"></div> </div> </div> <p>Transform your business with a powerful e-commerce platform.</p> <a href="#" class="custom-btn custom-border-btn btn mt-3">Learn More</a> <div class="services-icon-wrap d-flex justify-content-center align-items-center"> <i class="services-icon bi-phone"></i> </div> </div> </div> <div class="col-lg-6 col-12"> <div class="services-thumb services-thumb-up"> <div class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"> <h3 class="mb-0">SEO Optimization</h3> <div class="services-price-wrap ms-auto"> <p class="services-price-text mb-0">$1,450</p> <div class="services-price-overlay"></div> </div> </div> <p>Let's get your website noticed with top-notch SEO.</p> <a href="#" class="custom-btn custom-border-btn btn mt-3">Learn More</a> <div class="services-icon-wrap d-flex justify-content-center align-items-center"> <i class="services-icon bi-google"></i> </div> </div> </div> </div> </div> </div> </div> </section> <section class="contact section-padding" id="section_5"> <div class="container"> <div class="row"> <div class="col-lg-6 col-12"> <div class="contact-form"> <h2 class="mb-4">Get in Touch</h2> <form class="custom-form contact-form" action="#" method="post" role="form"> <div class="row"> <div class="col-lg-6 col-md-6 col-12"> <div class="form-floating"> <input type="text" name="name" id="name" class="form-control" placeholder="Name" required=""> <label for="floatingInput">Name</label> </div> </div> <div class="col-lg-6 col-md-6 col-12"> <div class="form-floating"> <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email address" required=""> <label for="floatingInput">Email address</label> </div> </div> <div class="col-lg-12 col-12"> <div class="form-floating"> <input type="phone" name="phone" id="phone" class="form-control" placeholder="Phone Number" required=""> <label for="floatingInput">Phone</label> </div> </div> <div class="col-lg-12 col-12"> <div class="form-floating"> <input class="form-control" id="message" name="message" placeholder="Message"> <label for="floatingTextarea">Message</label> </div> </div> <div class="col-lg-3 col-12 ms-auto"> <button type="submit" class="form-control">Submit</button> </div> </div> </form> </div> </div> <div class="col-lg-6 col-12"> <div class="contact-info mt-5"> <h3 class="mb-4">Contact Information</h3> <p class="mb-3"><i class="bi-geo-alt me-2"></i>123 Street, City, Country</p> <p class="mb-3"><i class="bi-telephone me-2"></i>+123 4567890</p> <p><i class="bi-envelope me-2"></i><a href="mailto:hello@company.com">hello@company.com</a></p> </div> </div> </div> </div> </section> <footer class="site-footer"> <div class="container"> <div class="row"> <div class="col-lg-12 col-12"> <div class=""> <p class="mb-0"> <a href="#">CreativeHub</a> © 2024. All rights reserved. </p> </div> </div> </div> </div> </footer> </main> <!-- JAVASCRIPT FILES --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>
CSS
Copy
:root { --white-color: #ffffff; --primary-color: #535da1; --secondary-color: #1468b7; --section-bg-color: #f9f9f9; --dark-color: #000000; --p-color: #717275; --border-color: #e9eaeb; --featured-border-color: #727aab; --body-font-family: 'DM Sans', sans-serif; --h1-font-size: 62px; --h2-font-size: 48px; --h3-font-size: 36px; --h4-font-size: 32px; --h5-font-size: 24px; --h6-font-size: 22px; --p-font-size: 18px; --menu-font-size: 12px; --copyright-font-size: 14px; --border-radius-large: 100px; --border-radius-medium: 20px; --border-radius-small: 10px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; } body { background: var(--white-color); font-family: var(--body-font-family); } h2, h3, h4, h5, h6 { color: var(--dark-color); } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); letter-spacing: -1px; } h1 { font-size: var(--h1-font-size); letter-spacing: -3px; } h2 { font-size: var(--h2-font-size); color: var(--secondary-color); letter-spacing: -3px; } h3 { font-size: var(--h3-font-size); } h4 { font-size: var(--h4-font-size); } h5 { font-size: var(--h5-font-size); line-height: normal; } h6 { font-size: var(--h6-font-size); } p { color: var(--p-color); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); } ul li { color: var(--p-color); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); } a, button { touch-action: manipulation; transition: all 0.3s; } a { color: var(--p-color); text-decoration: none; } a:hover { color: var(--secondary-color); } ::selection { background: var(--secondary-color); color: var(--white-color); } ::-moz-selection { background: var(--secondary-color); color: var(--white-color); } .section-padding { padding-top: 120px; padding-bottom: 120px; } b, strong { font-weight: var(--font-weight-bold); } .section-title-wrap { background: var(--secondary-color); border-radius: var(--border-radius-small); padding: 10px 30px; } .avatar-image { border-radius: var(--border-radius-large); width: 160px; height: 160px; object-fit: cover; } .avatar-image-large { width: 90.4px; height: 90.4px; } .custom-btn, .navbar .custom-btn { font-size: var(--p-font-size); font-weight: var(--font-weight-bold); } .navbar .custom-btn { background: transparent; border-width: 2px; border-style: solid; border-color: var(--white-color); color: var(--white-color); padding: 8px 22px; } .navbar .custom-btn:hover { background: var(--white-color); border-color: transparent; color: var(--secondary-color); } .custom-btn { background: var(--secondary-color); border-radius: var(--border-radius-large); color: var(--white-color); font-weight: var(--font-weight-bold); padding: 12px 24px; } .custom-btn:hover { background: var(--primary-color); box-shadow: 0 1rem 3rem rgba(0,0,0,.175); color: var(--white-color); } .custom-border-btn { background: transparent; border: 2px solid var(--border-color); color: var(--p-color); } .custom-border-btn:hover { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--white-color); } .custom-link { background-color: var(--primary-color); } .custom-link:hover { background-color: var(--secondary-color); } .navbar { background: transparent; position: absolute; z-index: 9; right: 0; left: 0; transition: all 0.3s; padding-top: 15px; padding-bottom: 0; z-index: 1000; } .navbar .container { border-radius: var(--border-radius-small); padding: 10px 25px; } .navbar-brand { font-size: var(--h4-font-size); font-weight: var(--font-weight-bold); } .navbar-brand, .navbar-brand:hover { color: var(--white-color); } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0; padding-left: 0; margin-right: 20px; margin-left: 20px; } .navbar-nav .nav-link { display: inline-block; color: var(--section-bg-color); font-size: var(--menu-font-size); font-weight: var(--font-weight-medium); text-transform: uppercase; position: relative; padding-top: 15px; padding-bottom: 15px; } .navbar-nav .nav-link::after { content: ""; background: transparent; position: absolute; bottom: 6px; right: 0; left: 0; width: 100%; height: 2px; } .navbar-nav .nav-link.active::after, .navbar-nav .nav-link:hover::after { background: var(--secondary-color); } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--secondary-color); } .navbar-toggler { border: 0; padding: 0; cursor: pointer; margin: 0; width: 30px; height: 35px; outline: none; } .navbar-toggler:focus { outline: none; box-shadow: none; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before, .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease; transition: top 300ms 50ms ease, transform 300ms 350ms ease; transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease; top: 0; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(-45deg); } .navbar-toggler .navbar-toggler-icon { background: var(--white-color); transition: background 10ms 300ms ease; display: block; width: 30px; height: 2px; position: relative; } .navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after { transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease; transition: top 300ms 350ms ease, transform 300ms 50ms ease; transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease; position: absolute; right: 0; left: 0; background: var(--white-color); width: 30px; height: 2px; content: ''; } .navbar-toggler .navbar-toggler-icon::before { top: -8px; } .navbar-toggler .navbar-toggler-icon::after { top: 8px; } .hero { background: var(--secondary-color); position: relative; overflow: hidden; padding-top: 330px; padding-bottom: 330px; } @media screen and (min-width: 991px) { .hero { height: 60vh; } } .hero-title, .hero h2 { background: var(--white-color); box-shadow: 0 1rem 3rem rgba(0,0,0,.175); border-radius: var(--border-radius-large); display: inline-block; padding: 8px 24px; } .hero-title { font-size: 44px; } .hero h2 { font-size: 38px; } .hero-text { position: relative; z-index: 22; top: 70px; } .about-image { border-radius: var(--border-radius-medium); } .about-thumb { padding-right: 20px; padding-left: 20px; } /*--------------------------------------- SERVICES -----------------------------------------*/ .services, .featured { background: var(--section-bg-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .services-thumb { background: var(--white-color); border: 2px solid transparent; border-radius: var(--border-radius-medium); position: relative; overflow: hidden; margin-bottom: 24px; padding: 40px 40px 240px 40px; transition: all 0.5s; } .services-thumb-up { position: relative; bottom: 50px; margin-bottom: -50px; } .services-thumb:hover { border: 2px solid var(--secondary-color); box-shadow: 0 1rem 3rem rgba(0,0,0,.175); } .services-thumb:hover .services-icon-wrap { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--white-color); } .services-icon-wrap { border: 1px solid var(--border-color); border-radius: var(--border-radius-small); position: absolute; bottom: 0; right: 0; width: 50%; height: 55%; transform: rotate(-35deg) translateY(55px); transition: all ease 0.5s; } .services-icon { font-size: 90px; position: relative; bottom: 15px; } .services-thumb:hover .services-price-wrap { background: var(--secondary-color); } .services-thumb:hover .services-price-overlay { background: var(--primary-color); } .services-price-wrap { background: var(--primary-color); border-radius: var(--border-radius-medium); position: relative; overflow: hidden; padding: 6px 20px 6px 15px; transition: all ease 0.5s; } .services-price-text { color: var(--white-color); font-size: var(--copyright-font-size); font-weight: var(--font-weight-bold); } .services-price-overlay { background: var(--secondary-color); border-bottom-left-radius: 100%; position: absolute; top: 0; right: 0; width: 20px; height: 20px; pointer-events: none; } /*--------------------------------------- CONTACT -----------------------------------------*/ .contact { background: var(--section-bg-color); } .contact-info { background: var(--white-color); border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); padding: 60px 30px 30px 30px; height: 100%; } .contact-info-border-start { border-right: 1px solid var(--border-color); border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .contact-form { margin-left: 10px; } .custom-form .form-control { background: var(--white-color); box-shadow: none; border: 2px solid var(--border-color); color: var(--p-color); margin-bottom: 24px; padding-top: 13px; padding-bottom: 13px; outline: none; } .custom-form .form-control:hover, .custom-form .form-control:focus { background: transparent; border-color: var(--secondary-color); } .custom-form .form-floating textarea { height: 150px; } .custom-form button[type="submit"] { background: var(--secondary-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-weight: var(--font-weight-bold); transition: all 0.3s; margin-bottom: 0; } .custom-form button[type="submit"]:hover, .custom-form button[type="submit"]:focus { background: var(--primary-color); border-color: transparent; } /*--------------------------------------- SITE FOOTER -----------------------------------------*/ .site-footer { border-top: 1px solid var(--border-color); padding-top: 50px; padding-bottom: 50px; text-align: center; } .site-footer-title { font-size: var(--menu-font-size); color: var(--dark-color); text-transform: uppercase; } @media screen and (min-width: 1600px) { .hero { padding-top: 380px; padding-bottom: 380px; } .hero-title, .hero h2 { font-size: var(--h2-font-size); } } @media screen and (max-width: 991px) { h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 32px; } h4 { font-size: 28px; } h5 { font-size: 20px; } h6 { font-size: 18px; } .section-padding { padding-top: 80px; padding-bottom: 80px; } .custom-btn, .navbar .custom-btn { font-size: var(--copyright-text-font-size); padding: 8px 16px; } .navbar .container { background: var(--white-color); } .navbar-brand, .navbar-brand:hover { color: var(--dark-color); } .navbar .custom-btn { border-color: var(--secondary-color); color: var(--secondary-color); } .navbar-toggler .navbar-toggler-icon, .navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after { background: var(--dark-color); } .navbar-expand-lg .navbar-nav .nav-link { margin-left: 0; } .navbar-nav .nav-link { color: var(--p-color); padding-top: 10px; padding-bottom: 10px; } .hero { padding-top: 200px; padding-bottom: 400px; } .hero-text { top: 0; margin-bottom: 120px; } .about-thumb { padding-right: 0; padding-left: 0; } .about-numbers { font-size: 42px; } .services-thumb-up { bottom: 0; margin-bottom: 32px; } .services-thumb { margin-bottom: 32px; padding-bottom: 270px; } .services-icon-wrap { width: 45%; height: 60%; } .services .col-lg-10 .row .col-lg-6:last-child, .col-lg-4:last-child { margin-bottom: 0; } .contact-info { border-radius: 0 0 var(--border-radius-small) var(--border-radius-small); padding: 40px 30px; } .contact-info-border-start { border-right: 0; border-bottom: 1px solid var(--border-color); border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; } } @media screen and (max-width: 575px) { .navbar .container { margin-right: 12px; margin-left: 12px; } } @media screen and (max-width: 480px) { h1 { font-size: 40px; } h2 { font-size: 28px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 20px; } .custom-btn, .navbar .custom-btn { font-size: 13px; padding: 6px 12px; } }
JS
Copy
(function ($) { "use strict"; $(window).load(function(){ $('.preloader').fadeOut(1000); }); // CUSTOM LINK $('.custom-link').click(function(){ var el = $(this).attr('href'); var elWrapped = $(el); var header_height = $('.navbar').height() + 10; scrollToDiv(elWrapped,header_height); return false; function scrollToDiv(element,navheight){ var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; $('body,html').animate({ scrollTop: totalScroll }, 300); } }); })(window.jQuery); var sectionArray = [1, 2, 3, 4, 5]; $.each(sectionArray, function(index, value){ $(document).scroll(function(){ var offsetSection = $('#' + 'section_' + value).offset().top - 90; var docScroll = $(document).scrollTop(); var docScroll1 = docScroll + 1; if ( docScroll1 >= offsetSection ){ $('.navbar-nav .nav-item .nav-link').removeClass('active'); $('.navbar-nav .nav-item .nav-link:link').addClass('inactive'); $('.navbar-nav .nav-item .nav-link').eq(index).addClass('active'); $('.navbar-nav .nav-item .nav-link').eq(index).removeClass('inactive'); } }); $('.click-scroll').eq(index).click(function(e){ var offsetClick = $('#' + 'section_' + value).offset().top - 90; e.preventDefault(); $('html, body').animate({ 'scrollTop':offsetClick }, 300) }); }); $(document).ready(function(){ $('.navbar-nav .nav-item .nav-link:link').addClass('inactive'); $('.navbar-nav .nav-item .nav-link').eq(0).addClass('active'); $('.navbar-nav .nav-item .nav-link:link').eq(0).removeClass('inactive'); });
