Techno Sunita: technosunita

Showing posts with label technosunita. Show all posts

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;

}

Techno Sunita

Saturday, 19 September 2020

Owl slider testimonials html CSS | Responsive testimonials using only H...

Tuesday, 18 August 2020

Thumbnail owl carousel responsive html and CSS By Techno Sunita

Html code

CSS CODE

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

CSS Source code

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

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

CSS code

Thursday, 30 July 2020

Product Design Blog HTML CSS

Html Code

Css code

Friday, 10 July 2020

listing box html css bootstrap tutorial by techno Sunita | content box css

Saturday, 27 June 2020

Html table tag with colspan and rowspan tutorial | Website design | html...

Friday, 26 June 2020

table th || table heading ||Table tags in html ||Table tag in html wit...

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

Monday, 8 June 2020

How to transition css | How to transition css

How to transition css | How to transition css by techno sunita