Webleb - Code-Snippets -

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

28 May 2025

HTML-Website-Navigationsleiste und Hero-Bereich

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Creative Portfolio Showcase</title>

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

<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_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="section-title-wrap d-flex justify-content-end align-items-center mb-4">
                                    <h2 class="text-white me-4 mb-0">My Journey</h2>

<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">

<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>

<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>

<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>

<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>

<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>
                        </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>

<label for="floatingInput">Email address</label>
                                            </div>
                                        </div>

<label for="floatingInput">Phone</label>
                                            </div>
                                        </div>

<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><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>
        
        <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

: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

(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');
});

Empfohlen

Federkiel

Tic Tac Toe

HTML-Website-Navigationsleiste und Hero-Bereich

HTML

CSS

JS

Empfohlen

Federkiel

Tic Tac Toe

HTML-Website-Navigationsleiste und Hero-Bereich

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS