Product card Generator

Product card Generator

Offers.Tuday.in

Description

₹000

₹000

Product Card

Image URL Here

Heading Here

Description Here

Old Price Here

New Price Here

Product Card Generator

Product Card Generator

Best code editor with Live preview Online - html editor with live preview online

HTML

Background

<figure class="product"> <img src="https://inrdeals.sgp1.cdn.digitaloceanspaces.com/production/411978/1214605-200x200.jpg" alt="" /><figcaption> <h3> Gaming Laptop</h3> <p>[For HDFC Bank Card EMI] MSI Gaming GF63 Thin, Intel 11th Gen. i5-11400H, 40CM FHD 144Hz Gaming Laptop (8GB/512GB NVMe </p> <div class="price"> <div id="old">₹000</div> <div id="new">₹000</div> </div> </figcaption> <div id="clac"><i class="ion-android-cart"></i></div> </figure> <div class="form"> <h2 class="discount">Discount Calculator</h2> <form class="jontainer"> <p><input type="text" id="old_price" placeholder="Old Price" required></p> <p><input type="text" id="new_price" placeholder="New Price" required></p> <p><input type="button" value="Save" onclick="calc()"></p> </form> </div>

CSS

.product { margin:0; padding:0; box-sizing:border-box; background-color: #212121; float:left; display:inline; font-family: 'Oswald', Arial, sans-serif; position: relative; float: left; max-width:30%; min-width: 280px; width: 100%; background: #ffffff; text-align: center; color: #000000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-size: 16px; padding: 15px; margin:20px; margin-bottom:70px; } .product img { max-width: 100%; vertical-align: top; position: relative; } .product figcaption { padding: 20px 15px; } .product h3, .product p { margin: 0; } .product h3 { font-size: 1.3em; font-weight: 400; margin-bottom: 5px; text-transform: uppercase; } .product p { font-size: 0.9em; letter-spacing: 1px; font-weight: 300; } .product .price { font-weight: 500; font-size: 1.5em; line-height: 70px; letter-spacing: 1px; } .product .price #old { margin-right: 5px; opacity: 0.5; font-size: 0.85em; display:inline-block; text-decoration:line-through; } .product .price #new {display:inline-block;} .product #clac{ position: absolute; bottom: 0; left: 22%; width:150px; padding:2px; text-align: center; border-radius: 26%; background-color: #ff3349; color: #ffffff; font-size: 1.6em; border: 4px solid #ffffff; } .form { float:right; display:inline; width: 320px; margin: 16px; font-size: 16px; font-family: 'Open Sans', sans-serif; margin-bottom:0; } .discount, .form p { margin-top: 0; margin-bottom: 0; } .discount { background: #ff5050; padding: 20px; font-size: 1.4em; font-weight: normal; text-align: center; text-transform: uppercase; color: #fff; display:inline-block; width:100%; } .jontainer { background: #ebebeb; padding: 12px; } .form p { padding: 12px; } .form input { box-sizing: border-box; display: block; width: 100%; border-width: 1px; border-style: solid; padding: 16px; outline: 0; font-family: inherit; font-size: 0.95em; } .form input[type="text"]{ background: #fff; border-color: #bbb; color: #555; } .form input[type="button"] { background: #ff5050; border-color: transparent; color: #fff; cursor: pointer; } .form input[type="button"]:hover { background: #ff6666; }

JavaScript

var oldp = document.getElementById("old_price"), newp = document.getElementById("new_price"); function calc() { "use strict"; var a = Number(oldp.value), b = Number(newp.value); if (b > a) { var c = b / a * 100 - 100; document.getElementById("clac").innerHTML = parseInt(c) + "% UP"; document.getElementById("old").innerHTML = "₹" + a; document.getElementById("new").innerHTML = "₹" + b; } else if (b < a) { var c = -b / a * 100 + 100; document.getElementById("clac").innerHTML = parseInt(c) + "% OFF"; document.getElementById("old").innerHTML = "₹" + a; document.getElementById("new").innerHTML = "₹" + b; } else { document.getElementById("old").innerHTML = "₹"; document.getElementById("new").innerHTML = "₹" + b;} };

Width

Height

Align

Devices

Choose Background Image

DROP IMAGE OR CLICK ME

Gold Rate Today Animation

Gold Rate Today Animation

Best code editor with Live preview Online - html editor with live preview online

HTML

Background

<div class="text-anim"> <div id="container-anim">Gold rate Today<div id="flip"> <div><span>1Gram - 22K</span> <div>5565</div> </div> <div><span>10 Gram - 22K</span> <div>55,650</div> </div> <div><span>1Gram - 24K</span> <div>6071</div> </div> <div><span>10Gram - 24K</span> <div>60,710</div> </div> </div> <br> Siver Rate Today <div id="flip"> <div><span>1Gram - </span> <div>72.90</div> </div> <div><span>10Gram - </span> <div>729</div> </div> <div><span>1KG - </span> <div>72,900</div> </div></div></div> </div>

CSS

#container-anim { color:#260119; text-align:center; text-transform: uppercase; font-size:36px; margin-top:50px; font-family: 'Fredericka the Great', cursive; width:100%; bottom:45%; display:block;} #flip { height:50px; overflow:hidden;} #flip > div > div { color:#fff; padding:4px 12px; height:50px; margin-bottom:38px; display:inline-block;} #flip div:first-child { animation: show 9s linear infinite;} #flip div div {background:#8C1864;} #flip div:first-child div {background:#F2911B;} #flip div:last-child div {background:#F2911B;} @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} }

JavaScript

Width

Height

Align

Devices

Choose Background Image

DROP IMAGE OR CLICK ME

Mobile view of website: How to view a Webpage in mobile view?

Mobile view of website: How to view a Webpage in mobile view?

Best code editor with Live preview Online - html editor with live preview online

HTML

Background

<iframe src="https://techtooler.blogspot.com" style="height:1000px;width:100%" title="Iframe Example"></iframe>

CSS

JavaScript

Width

Height

Align

Devices

Choose Background Image

DROP IMAGE OR CLICK ME

News Article

News Article

Best code editor with Live preview Online - html editor with live preview online

HTML

Background

<div class="card"> <img src="https://assets.indiadesire.com/images/amazon%20great%20indian%20festival%20sale%2023rd%20sep%202022.jpg"/> <div class="test2"> <p>telugu.todaype.com</p></div> <h1 class="title"> This is My post heading for Lorem Ipsum </h1> <p class="content"> Amazon Great Indian Festival Sale 2022 will be returing back this year from 23rd September 2022. Amazon Great Indian Festival Sale will start on 23rd September For All Users And on 22nd September For its Amazon Prime members. Amazon will be offering Great Festive Deals On Mobiles, Electronics, Laptops, Home Products, And Much More. Amazon Great Indian Festival Sale brings out the best deals & offers Of the festive season to its Amazon India shoppers. </p> <a href="#" class="read-link">Read post</a> </div>

CSS

.test2 p { color: white; display: inline-block; background-color: rgba(0,0,0,.6); padding: 0px; line-height: 30px; height: 30px; width: 34.7%; background-size: cover; position: absolute; margin-top: -50px; text-align: center; } .card{ display:flex !important; flex-direction:column; justify-content:center; border:1px solid #ccc; padding:10px; } .card .title{ font-size: 18px; } .card .content{ display:flex !important; flex-direction:column; font-size: 14px; } .card img{ display:flex !important; flex-direction:column; margin-bottom:20px; object-fit: cover; object-position: center; } .card .read-link{ padding:10px; background:blue; color:white; text-decoration:none; margin-top:13px; display: inline-block; margin-bottom:10px; text-align:center; } }

JavaScript

Width

Height

Align

Devices

Choose Background Image

DROP IMAGE OR CLICK ME