Webleb - HTML UI Elements -

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

23 October 2024

Reiner horizontaler Slider mit verschiebbarem Menü

26 May 2025

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Innovative App Solutions</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg">
  <div class="container"> <a class="navbar-brand navbar-logo" href="#"> <img src="" alt="Innovative App Solutions Logo" class="logo-1"> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"> <a class="nav-link" href="" data-scroll-nav="0">Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#" data-scroll-nav="1">About Us</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#" data-scroll-nav="2">Features</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#" data-scroll-nav="4">Testimonials</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#" data-scroll-nav="6">Contact</a> </li>
      </ul>
    </div>
  </div>
</nav>
<section class="banner" data-scroll-index='0'>
  <div class="banner-overlay">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <div class="banner-text">
            <h2 class="white">Innovative App Solutions</h2>
            <p class="banner-text white">Discover the future of app technology with our innovative solutions designed to enhance your digital experience. Join us in revolutionizing the way you interact with technology.</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-12"> <img src="" alt="App Showcase" class="img-fluid wow fadeInUp"/> </div>
      </div>
    </div>
  </div>
</section>
<section class="about section-padding prelative" data-scroll-index='1'>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="sectioner-header text-center">
          <h3>About Us</h3>
          <span class="line"></span>
          <p>At Innovative App Solutions, we are dedicated to creating cutting-edge applications that drive efficiency and growth. Our team of experts works tirelessly to bring you the best in technology and design.</p>
        </div>
        <div class="section-content text-center">
          <div class="row">
            <div class="col-md-4">
              <div class="icon-box wow fadeInUp" data-wow-delay="0.2s"> <i class="fa fa-life-ring" aria-hidden="true"></i>
                <h5>Support</h5>
                <p>We provide 24/7 support to ensure your experience with our applications is seamless and trouble-free.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="icon-box wow fadeInUp" data-wow-delay="0.4s"> <i class="fa fa-mobile" aria-hidden="true"></i>
                <h5>Cross Platform</h5>
                <p>Our applications are designed to be compatible across various platforms, ensuring flexibility and accessibility.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="icon-box wow fadeInUp" data-wow-delay="0.6s"> <i class="fa fa-bolt" aria-hidden="true"></i>
                <h5>Fast</h5>
                <p>Experience lightning-fast performance with our optimized applications tailored to meet your needs.</p>
              </div>
            </div>
          </div>
          <a href="#" class="about-btn">Learn More</a> </div>
      </div>
    </div>
  </div>
</section>
<section class="video-section prelative text-center white">
  <div class="section-padding video-overlay">
    <div class="container">
      <h3>Watch Our Story</h3>
      <i class="fa fa-play" id="video-icon" aria-hidden="true"></i>
      <div class="video-popup">
        <div class="video-src">
          <div class="iframe-src">
            <iframe src="" allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="feature section-padding" data-scroll-index='2'>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="sectioner-header text-center">
          <h3>Features</h3>
          <span class="line"></span>
          <p>Explore the unique features that set our applications apart from the rest. Our focus is on innovation, reliability, and user satisfaction.</p>
        </div>
        <div class="section-content text-center">
          <div class="row">
            <div class="col-md-4 col-sm-12">
              <div class="media single-feature wow fadeInUp" data-wow-delay="0.2s">
                <div class="media-body text-right media-right-margin">
                  <h5>Fast Processing</h5>
                  <p>Our applications are built for speed, ensuring quick and efficient performance to meet your needs.</p>
                </div>
                <div class="media-right icon-border"> <span class="fa fa-bolt" aria-hidden="true"></span> </div>
              </div>
              <div class="media single-feature wow fadeInUp" data-wow-delay="0.4s">
                <div class="media-body text-right media-right-margin">
                  <h5>Low Power Consumption</h5>
                  <p>Optimize your device's battery life with our energy-efficient applications.</p>
                </div>
                <div class="media-right icon-border"> <span class="fa fa-battery-full" aria-hidden="true"></span> </div>
              </div>
              <div class="media single-feature wow fadeInUp" data-wow-delay="0.6s">
                <div class="media-body text-right media-right-margin">
                  <h5>Wifi Compatibility</h5>
                  <p>Seamlessly connect and operate our applications over any Wi-Fi network.</p>
                </div>
                <div class="media-right icon-border"> <span class="fa fa-wifi" aria-hidden="true"></span> </div>
              </div>
            </div>
            <div class="col-md-4 d-none d-md-block d-lg-block">
              <div class="feature-mobile"> <img src=" " alt="App Features" class="img-fluid wow fadeInUp"/> </div>
            </div>
            <div class="col-md-4 col-sm-12">
              <div class="media single-feature wow fadeInUp" data-wow-delay="0.2s">
                <div class="media-left icon-border media-right-margin"> <span class="fa fa-check-double" aria-hidden="true"></span> </div>
                <div class="media-body text-left">
                  <h5>Regular Updates</h5>
                  <p>Stay up-to-date with the latest features and improvements through regular updates.</p>
                </div>
              </div>
              <div class="media single-feature wow fadeInUp" data-wow-delay="0.4s">
                <div class="media-left icon-border media-right-margin"> <span class="fa fa-dollar-sign" aria-hidden="true"></span> </div>
                <div class="media-body text-left">
                  <h5>Affordable Pricing</h5>
                  <p>Enjoy premium features at an affordable price with our competitive pricing plans.</p>
                </div>
              </div>
              <div class="media single-feature wow fadeInUp" data-wow-delay="0.6s">
                <div class="media-left icon-border media-right-margin"> <span class="fa fa-user-check" aria-hidden="true"></span> </div>
                <div class="media-body text-left">
                  <h5>User Friendly</h5>
                  <p>Our intuitive interface ensures a user-friendly experience, even for beginners.</p>
                </div>
              </div>
            </div>
          </div>
          <a href="#" class="about-btn">Learn More</a> </div>
      </div>
    </div>
  </div>
</section>
<section class="testimonial section-padding" data-scroll-index='4'>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="sectioner-header text-center white">
          <h3>Testimonials</h3>
          <span class="line"></span>
          <p class="white">Hear from our satisfied customers and discover how our applications have transformed their digital experiences.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="contact section-padding" data-scroll-index='6'>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="sectioner-header text-center">
          <h3>Contact us</h3>
          <span class="line"></span>
          <p>Sed quis nisi nisi. Proin consectetur porttitor dui sit amet viverra. Fusce sit amet lorem faucibus, vestibulum ante in, pharetra ante.</p>
        </div>
        <div class="section-content">
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-8">
              <form id="contact_form" action="">
                <div class="row">
                  <div class="col">
                    <input type="text" id="your_name" class="form-input w-100" name="full-name" placeholder="Full Name" required>
                  </div>
                  <div class="col">
                    <input type="email" id="email" class="form-input w-100" name="email" placeholder="Email" required>
                  </div>
                </div>
                <input type="text" id="subject" class="form-input w-100" name="subject" placeholder="Subject">
                <input class="form-input w-100" id="message" placeholder="Message" name="message">
                <button class="btn-grad w-100 text-uppercase" type="submit" name="button">submit</button>
              </form>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-4">
              <div class="contact-info white">
                <div class="contact-item media"> <i class="fa fa-map-marker-alt media-left media-right-margin"></i>
                  <div class="media-body">
                    <p class="text-uppercase">Address</p>
                    <p class="text-uppercase">Your Addess</p>
                  </div>
                </div>
                <div class="contact-item media"> <i class="fa fa-mobile media-left media-right-margin"></i>
                  <div class="media-body">
                    <p class="text-uppercase">Phone</p>
                    <p class="text-uppercase"><a class="text-white" href="tel:+15173977100">000000000</a> </p>
                  </div>
                </div>
                <div class="contact-item media"> <i class="fa fa-envelope media-left media-right-margin"></i>
                  <div class="media-body">
                    <p class="text-uppercase">E-mail</p>
                    <p class="text-uppercase"><a class="text-white" href="mailto:abcdefg@gmail.com">abc@gmail.com</a> </p>
                  </div>
                </div>
                <div class="contact-item media"> <i class="fa fa-clock media-left media-right-margin"></i>
                  <div class="media-body">
                    <p class="text-uppercase">Working Hours</p>
                    <p class="text-uppercase">Mon-Fri 9.00 AM to 5.00PM.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<footer class="footer-copy">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <p>2024 © All Rights Reserved</p>
      </div>
    </div>
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 
</body>
</html>

CSS

* {
	padding:0;
	margin:0;
}
body {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
}
a {
	color:#5f0099;
}
a:hover {
	color:#e4ebfd;
}
h1, h2, h3 {
	font-weight: 700;
}
h4, h5 {
	font-weight:600;
}
h6 {
	font-weight:500;
}
.white {
	color:#ffffff !important;
}
.black {
	color:#000000;
}
.navbar {
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	min-height: 50px;
	line-height: 50px;
	background: transparent;
	z-index: 1030;
}
.navbar .active {
	color: #5f0099 !important;
}
.navbar .navbar-brand {
}
.navbar .nav-item {
	margin: 0 5px;
	padding: 0;
}
.navbar .nav-item a {
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
}
.navbar .nav-item a:hover {
	color: #dde6ff;
}
.navbar .nav-link {
	position: relative;
	padding: 0;
}
.navbar .navbar-toggler {
	cursor: pointer;
}
.navbar .navbar-toggler span {
	color: #fff;
}
.navbar-style2 .active:after, .navbar-style2 .nav-link:after {
	display: none;
}
.nav-scroll {
	background: #fff;
	-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
	box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}
.nav-scroll .navbar-nav > li > a {
	color: #333;
}
.nav-scroll .navbar-brand img {
	-webkit-transform: scale(1.03) !important;
	transform: scale(1.03) !important;
}
.nav-scroll .navbar-toggler {
	cursor: pointer;
}
.nav-scroll .navbar-toggler span {
	color: #333;
}
.nav-scroll .nav-link:hover:after {
	background-color: #597ee2;
}
.nav-scroll .active {
	position: relative;
}
.banner {
	background: #4f32e0;
	background: linear-gradient(to left, #382692, #63dcec);
	padding:100px 0px;
	position:relative;
}
.banner::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.banner a.weblink {
	color:#ffffff;
	border-bottom:1px dotted #ffffff;
}
.banner a:hover {
	text-decoration:none;
}
.banner-text {
	padding-right:80px;
	margin:50px 0px 0px;
}
.banner-text p {
	margin:40px 0px;
}
.banner-text ul {
	list-style: none;
}
.banner-text ul li {
	display: inline-block;
	margin: 0px 10px 10px 0px;
}
.banner-text ul li a {
	display: block;
}
.banner-text ul li a img {
	width: 150px;
	border-radius: 7px;
}
.prelative {
	position:relative
}
.section-padding {
	padding:80px 0px;
}
.sectioner-header {
	width:69%;
	margin:0 auto;
}
.line {
	height: 2px;
	width: 50px;
	background: #597ee2;
	display: block;
	margin: 20px auto 20px;
}
.line::after {
	content:"";
	position: absolute;
	left: 50%;
	width: 150px;
	height: 2px;
	border-bottom: 2px dashed #597ee2;
	margin-left: -75px;
}
.sectioner-header p {
	color:#818992;
	font-size: 17px;
}
.section-content {
	margin-top: 80px;
}
.icon-box {
	margin-bottom:50px;
}
.icon-box i {
	display: block;
	position: relative;
	width: 135px;
	height: 135px;
	border-radius: 100px;
	background: #4f32e0;
	background: linear-gradient(to left, #382692, #63dcec);
	color: #ffffff;
	font-size: 50px;
	line-height: 135px;
	margin: 0 auto;
}
.icon-box h5 {
	margin-top:30px;
}
.icon-box p {
	color: #818992;
	font-size: 14px;
	width: 80%;
	margin: 0 auto;
}
.about-btn {
	color: #597ee2;
	padding: 10px 40px;
	border: 2px solid #597ee2;
	border-radius: 7px;
	margin-top: 30px;
	display: inline-block;
	font-size: 18px;
}
.about-btn:hover {
	background:#597ee2;
	color:#ffffff;
	text-decoration:none;
}
.video-overlay {
	background: #597ee2;
	background: linear-gradient(to left, #382692, #63dcec);
}
.video-section h3 {
	font-weight: 600;
	font-size: 38px;
}
.video-section i {
	display: block;
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 100px;
	background: #ffffff;
	color: #597ee2;
	font-size: 30px;
	line-height: 70px;
	margin: 0 auto;
	cursor:pointer;
}
.video-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-content: center !important;
	-ms-flex-line-pack: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
}
.video-popup .video-src {
	position: relative;
	width: 700px;
	max-width: 80%;
}
.video-popup .iframe-src {
	width: 100%;
	height: 0;
	padding-top: 56.3%;
	position: relative;
	display: none;
}
.video-popup .iframe-src iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.single-feature {
	margin-bottom: 80px;
	margin-top: 40px;
}
.single-feature h5 {
	font-size: 16px;
}
.media-right-margin {
	margin-right:25px;
}
.single-feature p {
	font-size: 13px;
}
.icon-border {
}
.icon-border span {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	color: rgb(142, 30, 252);
	font-size: 18px;
	line-height: 50px;
	border: 1px solid rgb(142, 30, 252);
}
.team {
	background: #fafafa;
	border-top: 1px solid #e4e4e4;
}
.team-detail {
	margin-top:40px;
}
.team-detail img {
	border-radius: 50%;
	width: 70%;
}
.team-detail h4 {
	color:rgb(142, 30, 252);
	margin-top: 20px;
	font-size: 17px;
	margin-bottom: 0px;
}
.testimonial {
	background: #4f32e0;
	background: linear-gradient(to left, #382692, #63dcec);
	padding:100px 0px;
	position:relative;
}
.testimonial::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

}
form-input {
	border: 1px solid #e4e4e4;
}
input {
	height: 42px;
	padding: 0 1rem;
	background: #fff;
	border-radius: 30px;
	margin-bottom: 1rem;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border:0;
}
#contact_form textarea {
	resize: none;
	padding: 1rem;
	height: 150px;
	background: #fff;
	border: 0;
	border-radius: 30px;
	margin-bottom: 1rem;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.btn-grad {
 padding: .7rem 2rem;
	display: inline-block;
	color: #fff;
	border-radius: 2rem;
	border: 0;
	background: #4f32e0;
	background: linear-gradient(to left, #382692, #63dcec);
	cursor:pointer;
}
.contact-info {
	padding: 2rem 2rem 1rem;
	border-radius: 8px;
	background: #4f32e0;
	background: linear-gradient(to left, #382692, #63dcec);
}
.contact-item {
	margin:23px 0px;
}
.contact-item i {
	font-size: 20px;
}
.contact-item p {
	line-height: 20px;
	margin: 0;
}
input{
	border: 1px solid #000;
}
#contact_form textarea {
	border: 1px solid #000;
}
.footer-copy {
	background: #ffffff;
	color: #242424;
	font-size: 13px;
	text-align: center;
	padding:15px 0px;
}
.footer-copy p {
	margin-bottom:0px;
}
@media all and (max-width:991px) {
.navbar .navbar-collapse {
	overflow: auto;
	background:  rgb(213, 198, 221);
	color: #fff !important;
	text-align: center;
	padding: 10px 0;
}
.nav-scroll .navbar-collapse {
	background: #fff !important;
}
#contact_form {
	margin-bottom:20px;
}
}
@media all and (max-width:768px) {
.nav-scroll .navbar-brand img, .navbar-brand img {
	transform: scale(0.75) !important;
	-webkit-transform: scale(0.75) !important;
}
.banner-text {
	padding-right: 0px;
	margin: 10px 0px 0px;
}
h2 {
	font-size: 25px;
}
h3 {
	font-size: 23px;
}
.section-padding {
	padding: 40px 0px;
}
.banner-text p {
	margin: 25px 0px;
}
.banner-text ul li a img {
	width: 140px;
	border-radius: 7px;
}
.sectioner-header {
	width: 90%;
}
.sectioner-header p {
	font-size: 14px;
}
.about-btn {
	padding: 5px 30px;
	margin-top: 0px;
	font-size: 16px;
}
.single-feature {
	margin-bottom: 20px;
	margin-top: 20px;
}
.team-detail {
	margin-top: 20px;
}
.team-detail img {
	width: 50%;
}
.bx-controls
{
	display:none;
}
.bx-wrapper {
	margin: 0px 20px !important;
}

.section-content {
	margin-top: 40px;
}
.faq-content {
	margin: 10px 0px;
}
.faq-content h4 {
	font-size: 16px;
}
.faq-content p {
	font-size: 13px;
}
#contact_form {
	margin-bottom:20px;
}
.contact-item {
	font-size: 12px;
}
.download ul li a img {
	width: 120px;
}
.footer-copy p {
	font-size: 10px;
}
}

Empfohlen

Der Würfel

Reiner horizontaler Slider mit verschiebbarem Menü

Mo

HTML

CSS

JS

Empfohlen

Der Würfel

Reiner horizontaler Slider mit verschiebbarem Menü

Mo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS