Showing posts with label table html. Show all posts
Showing posts with label table html. Show all posts
Saturday, 19 September 2020
Tuesday, 18 August 2020
Thumbnail owl carousel responsive html and CSS By Techno Sunita
Html code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.theme.default.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<section class="thumnailSlider">
<div class="container-fluid">
<div class="row">
<div class=" col-md-12">
<h1 class="headingone"> Instagram </h1>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<div id="imageGallary" class=" loop owl-carousel owl-theme">
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#imageGallary').owlCarousel({
items: 2,
loop: true,
margin: 10,
responsive: {
600: {
items: 5
}
}
});
});
</script>
</html>
CSS CODE
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
}
.thumnailSlider {
padding: 80px 0px;
position: relative;
}
.headingone {
text-align: center;
margin-bottom: 40px;
font-size: 45px;
}
.thumnailSlider .owl-carousel .owl-item img {
height: 200px;
object-fit: cover;
}
Thursday, 13 August 2020
Monday, 3 August 2020
Center logo in navbar very easy way using bootstrap4 | logo center in bo...
Html Source code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body style="background-image: url(./images/header.jpg);" class="bg">
<nav class="navbar navbar-expand-md bg-dark menubar">
<div class="container"> <a href="#" class="brandlogo"><img src="./images/logo.jpg" alt=""> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"> <a href="#" class="nav-link">Home </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">About us </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Services </a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a href="#" class="nav-link">Contact </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Services </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">new </a> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS Source code
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
}
.bg {
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-position: center center;
background-size: cover;
height: 100vh;
}
.bg::before {
content: "";
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: 0;
}
.brandlogo {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0px;
margin: auto;
text-align: center;
width: 82px;
}
.brandlogo>img {
max-width: 82px;
height: auto;
}
.menubar ul.navbar-nav>li.nav-item>a.nav-link {
color: #fff;
padding: 10px 30px !important;
font-size: 18px;
text-transform: uppercase;
transition: ease 0.3s all;
}
.menubar ul.navbar-nav>li.nav-item>a.nav-link:hover {
color: chocolate;
}
Friday, 31 July 2020
How to make login page fast HTML& CSS new Look | Awesome look design create by techno Sunita
html source code
Login
CSS source code
@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap'); body { font-family: 'Open Sans', sans-serif; color: #292929; } .bg { background-attachment: fixed; background-repeat: no-repeat; position: relative; background-position: center center; background-size: cover; height: 100vh; } .bg::before { content: ""; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: 0; } .loginPage { background-color: #fff; padding: 60px; border-bottom: 8px solid blue; width: 460px; margin: 40px auto; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; border-radius: 4px; } .loginPage h3 { text-align: center; font-size: 35px; text-transform: uppercase; font-weight: 600; margin-bottom: 30px; } .loginPage input { width: 100%; height: 45px; display: block; border: 2px solid #ccc; border-radius: 2px; margin-bottom: 20px; padding: 10px 15px; transition: ease-in all 0.3s; } .loginPage input:hover { border: 2px solid blue; } .loginPage ul { margin: 30px 0px 0px 0px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; } .loginPage ul>li { flex: 1; } .loginPage ul>li>input { width: 20px; display: inline-block; margin-bottom: 0; padding: 0px; height: auto; } .loginBtn { width: 100%; display: block; padding: 12px 10px; text-align: center; background-color: blue; color: #fff; text-transform: uppercase; border: 2px solid blue; margin-bottom: 20px; cursor: pointer; margin-top: 55px; } .ragisterBtn { width: 100%; display: block; padding: 12px 10px; text-align: center; text-transform: uppercase; color: blue; border: 2px solid blue; cursor: pointer; background-color: #fff; } .emailIcon, .passwordIcon { position: relative; } .emailIcon::before, .passwordIcon::before { position: absolute; right: 20px; top: 10px; font-family: 'FontAwesome'; font-size: 18px; } .emailIcon::before { content: '\f003'; } .passwordIcon::before { content: '\f084'; }Saturday, 27 June 2020
Friday, 26 June 2020
Friday, 19 June 2020
Abbr tag in html ||Abbr tag in Hindi || Abbreviation html || Html abbrev...
Abbr tag in html ||Abbr tag in Hindi || Abbreviation html || Html abbreviation || by Techno Sunita
Abbr tag in html ||Abbr tag in Hindi || Abbreviation html || Html abbrev...
Abbr tag in html ||Abbr tag in Hindi || Abbreviation html || Html abbreviation || by Techno Sunita
Monday, 8 June 2020
How to transition css | How to transition css
How to transition css | How to transition css by techno sunita
Subscribe to:
Posts (Atom)