Free HTML Editor: Best code editor with Live preview Online

Free HTML Editor: Best code editor with Live preview Online

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

HTML

Background

<div class="deal-content"> <h1 class="title">Deals of the Day</h1> <h4 class="details">Toronto (YYZ) to Paris (CDG)</h4> <div class="price">C$ 15% OFF</div> </div>

CSS

.preview { display:flex !important; flex-direction:column; justify-content:center; } .deal-content { text-align:center; background-color:rgba(12, 166, 220, 0.9); color:#fff; padding:15px 0px; } .deal-content .title{ font-weight:bold; text-transform:uppercase; margin:0; line-height:1; } .deal-content .details { margin:30px 0px; font-weight:bold; line-height:1; } .deal-content .price { height:44px; line-height:44px; display:inline-block; padding:0 20px; background-color:#fff; color:rgb(12, 166, 220); font-size:18px; font-weight:bold; border-radius:30px; }

JavaScript

Width

Height

Align

Devices

Choose Background Image

DROP IMAGE OR CLICK ME

Free HTML Editor: Best code editor with Live preview Online

Free HTML Editor: Best code editor with Live preview Online

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

.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