Học Web Archives - Lập trình không khó

Tạo popup đăng nhập, đăng ký với HTML, CSS, và JS

ByContributor 21/10/202021/10/2020

Việc tạo popup đăng nhập & đăng ký giúp website của bạn trở lên đẹp và hoàn hảo hơn trong mắt người sử dụng. Hơn hết, việc tạo form đăng nhập popup lên sẽ không làm gián đoạn trải nghiệm người dùng, người dùng không cần đợi website tải trang đăng nhập. Bài viết này…

Kiểm tra form hợp lệ với HTML5 hoặc Javascript

ByNguyễn Văn Hiếu 05/10/202009/10/2020

Việc kiểm tra form hợp lệ là điều cần thiết trước khi gửi dữ liệu để phòng tránh việc người dùng gửi form mà không điền hoặc điền sai định dạng dữ liệu mà chúng ta mong muốn. Do đó, bài viết này LTKK sẽ hướng dẫn các bạn cách đơn giản nhất để kiểm…

Học Web

Tạo Slideshow chuyên nghiệp với HTML, CSS và Javascript

ByNguyễn Văn Hiếu 29/09/202012/10/2020

Bài viết này Lập Trình Không Khó (LTKK) sẽ hướng dẫn các bạn cách triển khai code để tạo slideshow bằng Javascript. Tất nhiên chúng ta sẽ code chay từ đầu đến cuối để các bạn có thể hiểu được ý tưởng để code slideshow ảnh theo ý muốn. Việc tạo slide ảnh bằng Javascript…

Học Web | Bài dịch

Học 20 kiến thức thú vị về HTML trong 20 ngày

ByNguyễn Văn Hiếu 20/03/202020/04/2020

Chào các bạn độc giả của Lập Trình Không Khó, trong bài viết này chúng ta sẽ đi tìm hiểu 20 kiến thức cực kỳ thú vị về HTML. Mình cá các bạn đã từng học HTML chưa chắc đã biết tới những kiến thức thú vị này. Do vậy, hãy cũng mình khám phá…

Học Java | Học Web

Tạo Rest API đơn giản với Spring boot

ByVõ Văn Tâm 04/03/202005/03/2020

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn tạo một Rest API đơn giản với Spring boot. Tạo project Các bạn mở IDE Interlij lên vào tạo project như sau: Nếu bạn chưa biết cách tạo project bằng Spring Assistant plugin thì có thể xem bài viết của mình tại đây….

Chia sẻ | Học Web

Danh sách 20 hosting miễn phí cho dân IT

ByNguyễn Văn Hiếu 27/02/202010/03/2020

Chào cả nhà, đã lâu rồi mình không có bài chia sẻ nào mới. Hôm nay Lập trình không khó đã quay lại và đem tới cho bạn một chia sẻ nho nhỏ. Đó là một bài viết tổng hợp danh sách các hosting miễn phí để chúng ta có thể triển khai các dự…

Học Web | Featured

CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap

ByNguyễn Văn Hiếu 27/01/202017/04/2020

Bài viết này Lập trình không khó sẽ hướng dẫn bạn cách xây dựng các chức năng CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap kết nối tới SQL Server. CRUD là viết tắt của Create – Read – Update – Delete, đó là các chức năng không thể thiếu của mọi ứng dụng…

Học Web | Học VueJS | Học JQuery

Học Javascript – Jquery – Vue js qua từng bài tập bind list data

ByLê Xuân Huy 24/01/202022/02/2020

Tiếp tục với loạt bài viết ” học Javascript – Jquery – Vue js qua từng bài tập “.Ở bài viết này thì mình sẽ hướng dẫn các bạn thực hiện bài tập bind list data. Chúng ta sẽ đi luôn vào bài tập Yêu cầu: Nắm được Javascript căn bản củ thể là phần JS…

Học PHP | Học Web

100+ Bài tập PHP có lời giải chi tiết

ByLê Xuân Huy 24/01/202009/10/2020

Chào tất cả các bạn, trong bài viết này mình xin chia sẻ tới các bạn độc giả bộ 100 bài tập PHP có lời giải. Các phần bài tập sẽ trải dài từ những bài tập căn bản nhất như xuất ra chuỗi Hello World cho đến các bài tập thao tác với cơ sở…

Học Web

Làm form đăng nhập cực kỳ đẹp với Bootstrap

ByNguyễn Văn Hiếu 22/01/201924/01/2019

Giao diện form đăng nhập có kết quả như sau: HTML Code:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<section class="login-block">
    <div class="container">
	<div class="row">
		<div class="col-md-4 login-sec">
		    <h2 class="text-center">Login Now</h2>
		    <form class="login-form">
  <div class="form-group">
    <label for="exampleInputEmail1" class="text-uppercase">Username</label>
    <input type="text" class="form-control" placeholder="">
    
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1" class="text-uppercase">Password</label>
    <input type="password" class="form-control" placeholder="">
  </div>
  
  
    <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      <small>Remember Me</small>
    </label>
    <button type="submit" class="btn btn-login float-right">Submit</button>
  </div>
  
</form>
<div class="copy-text">Created with <i class="fa fa-heart"></i> by <a href="http://grafreez.com">Grafreez.com</a></div>
		</div>
		<div class="col-md-8 banner-sec">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                 <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
            <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="https://static.pexels.com/photos/33972/pexels-photo.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <div class="banner-text">
            <h2>This is Heaven</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
        </div>	
  </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <div class="banner-text">
            <h2>This is Heaven</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
        </div>	
    </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <div class="banner-text">
            <h2>This is Heaven</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
        </div>	
    </div>
  </div>
            </div>	   
		    
		</div>
	</div>
</div>
</section>

<h2 class="text-center">Login Now</h2>

<label for="exampleInputEmail1" class="text-uppercase">Username</label>

</div>

<label for="exampleInputPassword1" class="text-uppercase">Password</label>

</div>

<small>Remember Me</small>

</label>

<button type="submit" class="btn btn-login float-right">Submit</button>

</div>

</form>

<div class="copy-text">Created with <i class="fa fa-heart"></i> by <a href="http://grafreez.com">Grafreez.com</a></div>

</div>

</ol>

<h2>This is Heaven</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

</div>

<h2>This is Heaven</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

</div>

<h2>This is Heaven</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

</div>

</section>

CSS Code:

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.login-block{
    background: #DE6262;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
float:left;
width:100%;
padding : 50px 0;
}
.banner-sec{background:url(https://static.pexels.com/photos/33972/pexels-photo.jpg)  no-repeat left bottom; background-size:cover; min-height:500px; border-radius: 0 10px 10px 0; padding:0;}
.container{background:#fff; border-radius: 10px; box-shadow:15px 20px 0px rgba(0,0,0,0.1);}
.carousel-inner{border-radius:0 10px 10px 0;}
.carousel-caption{text-align:left; left:5%;}
.login-sec{padding: 50px 30px; position:relative;}
.login-sec .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}
.login-sec .copy-text i{color:#FEB58A;}
.login-sec .copy-text a{color:#E36262;}
.login-sec h2{margin-bottom:30px; font-weight:800; font-size:30px; color: #DE6262;}
.login-sec h2:after{content:" "; width:100px; height:5px; background:#FEB58A; display:block; margin-top:20px; border-radius:3px; margin-left:auto;margin-right:auto}
.btn-login{background: #DE6262; color:#fff; font-weight:600;}
.banner-text{width:70%; position:absolute; bottom:40px; padding-left:20px;}
.banner-text h2{color:#fff; font-weight:600;}
.banner-text h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px;}
.banner-text p{color:#fff;}

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");

.login-block{

background: #DE6262; /* fallback for old browsers */

background: -webkit-linear-gradient(to bottom, #FFB88C, #DE6262); /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to bottom, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

float:left;

width:100%;

padding : 50px 0;

}

.banner-sec{background:url(https://static.pexels.com/photos/33972/pexels-photo.jpg) no-repeat left bottom; background-size:cover; min-height:500px; border-radius: 0 10px 10px 0; padding:0;}

.container{background:#fff; border-radius: 10px; box-shadow:15px 20px 0px rgba(0,0,0,0.1);}

.carousel-inner{border-radius:0 10px 10px 0;}

.carousel-caption{text-align:left; left:5%;}

.login-sec{padding: 50px 30px; position:relative;}

.login-sec .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}

.login-sec .copy-text i{color:#FEB58A;}

.login-sec .copy-text a{color:#E36262;}

.login-sec h2{margin-bottom:30px; font-weight:800; font-size:30px; color: #DE6262;}

.login-sec h2:after{content:" "; width:100px; height:5px; background:#FEB58A; display:block; margin-top:20px; border-radius:3px; margin-left:auto;margin-right:auto}

.btn-login{background: #DE6262; color:#fff; font-weight:600;}

.banner-text{width:70%; position:absolute; bottom:40px; padding-left:20px;}

.banner-text h2{color:#fff; font-weight:600;}

.banner-text h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px;}

.banner-text p{color:#fff;}

Source code xem trực tiếp: https://bootsnipp.com/snippets/gXV9M