Even though I'm not an expert of the Emmet plugin, I still love it :-)

With this project, I wanted to gain a bit more experience of its ins and outs.

Before you check the generated code, keep in mind that normally this isn't the way I create a website. It's just a fun experiment on Emmet... :-)

This is the link to the project on CodePen: https://codepen.io/tomsoos/pen/VwYyZLy

But if you'd rather copy and paste the whole thing into your editor then here ya go :D

html>head>meta[charset="UTF-8"]+meta[name="viewport" content="width=device-width"]+title{Emmet Website}+style[type="text/css"]{::-moz-selection { color: white; background-color: #5B9615;} ::selection{color: white;background-color: #5B9615;} h1{color: #7ACB17; text-shadow: -2px 2px 1px rgb(0,0,0);} h3{margin:0;font-size: 1em;line-height: 1.1;} a{color: white; text-decoration:none} p,span{color: #D3D3D3} body{background-color: #3C3B44;font-family: Arial,sans-serif;} .content{width: 750px; margin: 30px auto} #lorem{color: black;line-height: 1.6; font-size: .8em} .lorem{background-color: white; padding: 15px; box-shadow: 1px 1px 5px rgba(0,0,0,.6);} .btn{font-size: 3em; font-weight: 700; padding: .4em .6em; color: white; background-color: #5B9615; background-image: linear-gradient(#90D14A, #5B9615); border-radius: .2em; box-shadow: 0 1px 4px rgba(0,0,0,.5); text-shadow: 1px 1px 1px rgba(0,0,0,.6); text-align: center; display: block; margin: 50px auto; width: 400px;} .btn_bottom-text{display: block;font-weight: 400;opacity: .7;white-space: nowrap;font-size: 12px;font-family: georgia,serif;font-style: italic;color:white;}}^body>div.content>header>h1{An example website created with }>a[href="http://emmet.io" target="_blank"]{Emmet }>img[border="0" alt="Emmet Website" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjY1cHgiIGhlaWdodD0iNjVweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogICAgPHRpdGxlPkVtbWV0IExvZ288L3RpdGxlPgogICAgPGcgdHJhbnNmb3JtPSJzY2FsZSgwLjE2MjUpIj4KICAgIAk8ZWxsaXBzZSBjeD0iMjAwIiBjeT0iMjAwIiByeD0iMjAwIiByeT0iMjAwIiBmaWxsPSJyZ2IoMjgsMjgsMzIpIj48L2VsbGlwc2U+CiAgICAJPGcgZmlsbD0icmdiKDIxNSwyMTUsMjE1KSIgaWQ9IkxvZ28iIHRyYW5zZm9ybT0icm90YXRlKC00NSkgdHJhbnNsYXRlKC0xNjIsIDEzMykgc2NhbGUoMC45KSI+CiAgICAJICAgIDxwYXRoIGlkPSJUaXAiIGQ9Ik0yNDcsMjI1IEwyNDcsMTkwIEwyOTMsMTYyIEwyNDcsMTMzIEwyNDcsOTkgTDM1MiwxNjIgTDI0NywyMjUgWiBNMjQ3LDIyNSIgZmlsbD0icmdiKDE4NiwyNTUsMTY5KSI+PC9wYXRoPgogICAgCSAgICA8cGF0aCBpZD0iQmFzZSIgZD0iTTEwMiwzMTIgTDEwMiwxMiBMMjA3LDc1IEwyMDcsMTA5IEwxMzIsNjQgTDEzMiwxMzIgTDE4MSwxNjIgTDEzMiwxOTEgTDEzMiwyNTkgTDIwNywyMTQgTDIwNywyNDkgTDEwMiwzMTIgWiBNMTAyLDMxMiIgZmlsbD0icmdiKDEyMiwyMDMsMjIpIj48L3BhdGg+CiAgICAJPC9nPgogICAgPC9nPgo8L3N2Zz4=" width="6%" height="5%"]^^hr+br+span{Let's draw some basic }>abbr[title="Scalable Vector Graphics"]{SVG}+span{ elements: }+input[type="button" value="Play Again" onClick="window.location.reload()"]+br+br^svg[width="750" height="160" style="background-color:white"]>circle[cx="100" cy="80" r="50" fill="black"]+polygon[style="fill: #5B9615; stroke: black"]>animate[attributeName="points" from="0 130, 100 130, 50 30" to="220 130, 320 130, 270 30" dur="2s" fill="freeze" repeatCount="1"]^rect[width="300" height="100" y="30" fill="#90D14A" stroke="black"]>animate[attributeName="x" from="0" to="400" dur="2s" fill="freeze" repeatCount="1"]^{Sorry, your browser does not support inline SVG.}^br+br+br+p{Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:}+div.lorem>h3{lorem100 + TAB:}+p[id="lorem"]{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eveniet suscipit, molestiae facilis debitis repellendus nesciunt placeat deserunt eum sed vero qui explicabo, iste vel veritatis atque pariatur, sunt, quisquam eius commodi eaque deleniti iure ipsam animi reiciendis? Tempore quaerat voluptates, modi suscipit blanditiis quibusdam possimus consectetur enim animi, itaque magni! Fugit sequi quam dignissimos officiis provident eligendi, minus expedita quis! Vel odio at, rem tenetur labore. Blanditiis, doloribus aliquid veniam ducimus perspiciatis, reiciendis qui facilis vero similique pariatur quod harum dolore possimus modi accusamus debitis id amet fugiat. Ducimus magnam aliquid tenetur dolore nihil, fugit. Sequi vel, debitis quod!}^a[href="https://emmet.io/download" target="_blank" class="btn"]{Download}>span[class="btn_bottom-text"]{Emmet for your favorite editor}^^footer>p{2020 | Created by }>a[href="https://www.skillshare.com/profile/Tam%C3%A1s-So%C3%B3s/37095695" target="_blank"]{Tamas Soos}

Tamás Soós

7

8