Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

18 June 2025

Formulário de login HTML animado

HTML

<!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;
}
}

Recomendado

escalada de montanha

Gerador de senhas

Formulário de login HTML animado

HTML

CSS

JS

Recomendado

escalada de montanha

Gerador de senhas

Formulário de login HTML animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS