Techno Sunita

Tuesday, 18 August 2020

Thumbnail owl carousel responsive html and CSS By Techno Sunita

Html code

<!DOCTYPE html>

<head>

</head>

<body>

<h1 class="headingone"> Instagram </h1>

</div>

</div>

</section>

</body>

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

content box style html using bootstrap By techno Sunita

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

how to create a New Style Card in html and css || How to make a card in ...

How to create a New Style Card in html and css || How to make a card in html and css by techno sunita

html code

bootstrap responsive cards<!DOCTYPE html>

<head>

</head>

<body>

<h3> Bouquet of Flowers </h3>

<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci obcaecati neque et, dignissimos molestias unde soluta delectus exercitationem minima! Architecto officia doloremque eligendi blanditiis eum enim repudiandae.

Aperiam, asperiores incidunt! </p>

</div>

<h3> Bouquet of Flowers </h3>

Aperiam, asperiores incidunt! </p>

</div>

<h3> Bouquet of Flowers </h3>

Aperiam, asperiores incidunt! </p>

</div>

</section>

</body>

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

background-color: #fff

}

.cardSection {

padding: 100px 0px;

}

.cardBlock {

border-top: 2px solid red;

border-left: 2px solid red;

border-right: 2px solid red;

border-bottom: 8px solid red;

border-radius: 200px 200px 0px 0px;

transition: ease .3s all;

box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);

}

.cardBlock:hover {

border-width: 2px 2px 8px 2px;

border-style: solid;

border-color: lawngreen;

}

.cardBlock>img {

max-width: 100%;

height: 260px;

border-radius: 200px 200px 0px 0px;

}

.contenBox {

padding: 15px;

}

.contenBox h3 {

text-align: center;

font-size: 25px;

font-weight: 600;

text-align: center;

margin-bottom: 20px;

margin-top: 15px;

}

.contenBox p {

font-size: 16px;

font-weight: 300px;

text-align: center;

}

Thursday, 30 July 2020

Product Design Blog HTML CSS

Html Code

<!DOCTYPE html>

<head>

</head>

<body>

<h3 class="titaleProduct"> Product List </h3>

</div>

</div>

<h3>Beach Decoration </h3>

<p> Accessories </p>

₹.300

</div>

<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, debitis. Sed laudantium cumque cum qui dignissimos facilis consequatur, sequi excepturi nam, quam fuga. Ea voluptate, suscipit magni laborum tenetur voluptates!

</p>

<li>

</li>

<li> <a href="#" class="ReadMore">ReadMore </a> </li>

<li>

</li>

</ul>

</div>

</div>

<h3>Beach Decoration </h3>

<p> Accessories </p>

₹.300

</div>

</p>

<li>

</li>

<li> <a href="#" class="ReadMore">ReadMore </a> </li>

<li>

</li>

</ul>

</div>

</div>

<h3>Beach Decoration </h3>

<p> Accessories </p>

₹.300

</div>

</p>

<li>

</li>

<li> <a href="#" class="ReadMore">ReadMore </a> </li>

<li>

</li>

</ul>

</div>

</div>

<h3>Beach Decoration </h3>

<p> Accessories </p>

₹.300

</div>

</p>

<li>

</li>

<li> <a href="#" class="ReadMore">ReadMore </a> </li>

<li>

</li>

</ul>

</div>

</div>

<h3>Beach Decoration </h3>

<p> Accessories </p>

₹.300

</div>

</p>

<li>

</li>

<li> <a href="#" class="ReadMore">ReadMore </a> </li>

<li>

</li>

</ul>

</div>

</div>

<h3>Beach Decoration </h3>

<p> Accessories </p>

₹.300

</div>

</p>

<li>

</li>

<li> <a href="#" class="ReadMore">ReadMore </a> </li>

<li>

</li>

</ul>

</div>

</section>

</body>

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

background-color: #fff

}

.product-Box {

overflow: hidden;

position: relative;

padding: 15px;

background-color: #fff;

box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);

}

.product-img>img {

max-width: 100%;

height: auto;

transform-origin: 65% 75%;

transition: transform 1s, filter 0.5s ease-in-out;

}

.product-img {

width: 100%;

height: 200px;

overflow: hidden;

transition: ease-in 0.5 all;

position: relative;

}

.product-img>img:hover {

transform: scale(1.3);

}

.product-img:hover::before {

content: "";

background-color: rgba(0, 0, 0, 0.2);

position: absolute;

left: 0px;

right: 0;

top: 0px;

bottom: 0;

width: 100%;

height: 100%;

}

.product-content {

text-align: center;

padding: 15px;

}

.product-content h3 {

font-size: 20px;

font-weight: 600;

margin-bottom: 4px;

}

.product-content p {

text-align: center;

font-size: 14px;

margin-bottom: 4px;

}

.product-content .priceTag {

font-size: 25px;

font-weight: 600;

color: #f75f05;

}

.product-section {

padding: 100px 0px;

}

.titaleProduct {

position: relative;

text-align: center;

margin-bottom: 30px;

text-transform: uppercase;

font-size: 30px;

padding-bottom: 20px;

font-weight: 600;

}

.titaleProduct::before {

content: "";

width: 50px;

height: 4px;

position: absolute;

left: 0px;

right: 0px;

bottom: 0px;

margin: auto;

background-color: tomato;

}

.bottom-Link {

margin: 20px 0 0 0;

padding: 10px 0;

list-style: none;

display: flex;

justify-content: center;

border-top: 1px solid #f4f4f4;

border-bottom: 1px solid #f4f4f4;

}

.bottom-Link>li {

flex: 1;

}

.bottom-Link>li>a {

color: tomato;

}

.bottom-Link>li>a:hover {

text-decoration: none;

}

.bottom-Link>li>a.ReadMore {

background-color: tomato;

color: #fff;

padding: 10px 30px;

color: #fff;

}

.bottom-Link>li:first-child {

text-align: left;

}

.bottom-Link>li:last-child {

text-align: right;

}

.contenbox {

visibility: hidden;

opacity: 0;

position: absolute;

transition: ease-in 0.2s all;

}

.product-Box:hover .contenbox {

visibility: visible;

opacity: 1;

position: relative;

}

.product-Box:hover {

position: absolute;

top: -20px;

left: 15px;

right: 15px;

z-index: 99;

}

.product-Box {

margin-bottom: 30px;

}