Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function toggle_visibility(id) {
                var e = document.getElementById(id);
                if(e.style.display == 'block')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }
        </script>

<style>
            body {
                margin:0; 
                width:100%; 
                height:100%
            }
            #first {
                z-index:1; 
                position:relative; 
                display:block;width:25%; 
                height:10%; 
                background-color:#F00; 
                float: left
            }
            #second {
                z-index:1;
                position:relative; 
                display:block;
                width:25%; 
                height:10%; 
                background-color:#FF0; 
                float: left
            }
            #first_hidden {
                display:none;
                z-index:10;
                position:relative; 
                width:100%;
                height:100%;
                background-color:#0F0
            }
            #second_hidden {
                display:none;
                z-index:10;
                position:relative; 
                width:100%; 
                height:100%; 
                background-color:#F0F;
            }
          div {padding:1px;}
        </style>
    </head>
    <body>
        <div id="first">
            <a href="#" onclick="toggle_visibility('first_hidden');toggle_visibility('first_hidden_none');">First</a>
        </div>
        <div id="first_hidden"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus non massa nec porta. Sed mollis aliquam dui at egestas.</p>
            <a href="#"onclick="toggle_visibility('first_hidden');toggle_visibility('first_hidden_none');"><-Back1</a>
        </div>

<div id="second">
            <a href="#" onclick="toggle_visibility('second_hidden');toggle_visibility('second_hidden_none');">Second</a>
        </div>
        <div id="second_hidden"> 
            <p>Nulla id mauris volutpat, elementum urna suscipit, tempor diam. Sed semper metus purus, vel luctus nulla rutrum eu. Nulla id.</p>
            <a href="#" onclick="toggle_visibility('second_hidden');toggle_visibility('second_hidden_none');"><-Back2</a>
        </div>
    </body>
</html>

Check out the new AI-powered Python Playground