Techno Sunita: July 2020

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

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