Flat webpage concept

Developer
Gregor Adams
Size
12,434 Kb
Views
36,432
  1. Flat webpage concept Previews
  2. Flat webpage concept HTML Codes
  3. Flat webpage concept CSS Codes
  4. Flat webpage concept JS Codes

How do I make an flat webpage concept?

A simple flat webpage concept . What is a flat webpage concept? How do you make a flat webpage concept? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.

Flat webpage concept Previews
IQ Test

Flat webpage concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat webpage concept</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header"></div>
<div class="page"> <article> <h2 id="about_me">This is who I am</h2> <div class="avatar"> <figure><?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="Sunglasses"><g><rect x="-0.024" style="fill:#00D4A5;" width="100" height="100"/><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="57.5187" y1="52.8842" x2="101.5511" y2="96.9166"><stop offset="0" style="stop-color:#117C71"/><stop offset="0.5401" style="stop-color:#08AB8C"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="22.061,59.565 62.454,99.959 99.976,100 100,53.226 86.17,39.396 48.72,45.101 "/><path style="fill:#8C1C1C;" d="M50.25,41.233c-1.633-0.034-2.556-0.341-3.82-0.618c-4.439-0.975-9.262-2.614-19.721-2.614 c-12.893,0-12.281,1.395-12.281,1.395l0.068,4.797c0,0,2.509-0.298,3.572,7.246c1.09,7.737,5.409,10.546,12.927,10.546 c7.518,0,11.371-1.99,13.642-7.382c2.297-5.455,2.619-8.811,5.613-8.811h0.049v-4.559H50.25z"/><path style="fill:#AD1E1E;" d="M73.889,38.001c-10.46,0-15.282,1.639-19.721,2.614c-1.264,0.278-2.187,0.584-3.82,0.618h-0.049 v4.559h0.049c2.994,0,3.316,3.356,5.613,8.811c2.271,5.392,6.124,7.382,13.642,7.382c7.518,0,11.837-2.809,12.927-10.546 c1.063-7.544,3.572-7.246,3.572-7.246l0.068-4.797C86.17,39.396,86.782,38.001,73.889,38.001z"/><path style="fill:#DB961D;" d="M37.433,40.694c-2.263-0.295-6.83-0.697-8.175-0.655c-1.111,0.034-4.512-0.098-6.861,1.719 c-1.362,1.053-2.374,2.758-2.374,5.542c0,0.095,0.006,0.181,0.007,0.275c0.071,8.387,3.3,11.991,10.925,11.991 c0.364,0,0.707-0.007,1.05-0.015c5.377-0.122,8.296-1.26,10.245-4.969c0.564-1.074,1.053-2.352,1.492-3.898 C45.758,43.577,44.615,41.63,37.433,40.694z"/><path style="fill:#EDBD50;" d="M35.16,41.39c3.282,0,6.339,0.788,8.949,2.13c-0.888-1.586-2.976-2.344-6.675-2.826 c-2.263-0.295-6.83-0.697-8.175-0.655c-1.111,0.034-4.512-0.098-6.861,1.719c-1.362,1.053-2.374,2.758-2.374,5.542 c0,0.095,0.006,0.181,0.007,0.275c0.004,0.46,0.021,0.9,0.044,1.332C23.002,44.427,28.658,41.39,35.16,41.39z"/><path style="fill:#DB961D;" d="M30.955,59.565c0.364,0,0.707-0.007,1.05-0.015c5.377-0.122,8.296-1.26,10.245-4.969 c0.564-1.074,1.053-2.352,1.492-3.898c0.978-3.445,1.203-5.671,0.367-7.163c-2.61-1.343-5.667-2.13-8.949-2.13 c-6.502,0-12.158,3.037-15.085,7.517C20.472,56.34,23.748,59.565,30.955,59.565z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="70.3037" y1="50.5552" x2="106.812" y2="87.0635"><stop offset="0.1034" style="stop-color:#A1443B"/><stop offset="0.1676" style="stop-color:#954E43"/><stop offset="1" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.3;fill:url(#SVGID_2_);" points="60.384,57.266 99.928,96.811 99.928,63.549 79.389,43.01 "/><path style="fill:#EDBD50;" d="M78.179,41.739c-2.349-1.799-5.733-1.666-6.841-1.701c-1.345-0.042-5.912,0.361-8.175,0.655 c-7.181,0.935-8.325,2.883-6.308,9.989c2.05,7.223,5.075,8.882,12.786,8.882c7.639,0,10.866-3.615,10.926-12.033 c0.001-0.08,0.006-0.152,0.006-0.233C80.573,44.501,79.552,42.792,78.179,41.739z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="17.0562" y1="70.2254" x2="78.2979" y2="70.2254"><stop offset="0.0148" style="stop-color:#BE4043"/><stop offset="0.1598" style="stop-color:#974E4D"/><stop offset="0.4828" style="stop-color:#357067"/><stop offset="0.5961" style="stop-color:#117C71"/><stop offset="0.7283" style="stop-color:#0C9580"/><stop offset="1" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.2;fill:url(#SVGID_3_);" points="17.056,42.283 74.721,99.948 78.298,99.954 18.842,40.497 "/><circle style="fill:#DB961D;" cx="17.949" cy="41.39" r="1.262"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="87.0208" y1="45.7499" x2="100.6278" y2="59.3569"><stop offset="0" style="stop-color:#89363C"/><stop offset="0.1438" style="stop-color:#6F5450"/><stop offset="0.4274" style="stop-color:#3F8B74"/><stop offset="0.6722" style="stop-color:#1DB38F"/><stop offset="0.8663" style="stop-color:#08CB9F"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.2;fill:url(#SVGID_4_);" points="81.691,42.187 99.977,60.474 99.98,56.941 83.645,40.607 "/><circle style="fill:#EDBD50;" cx="82.662" cy="41.39" r="1.262"/><path style="fill:#F4D087;" d="M73.107,41.395c1.952,0,3.834,0.286,5.607,0.812c-0.171-0.167-0.349-0.325-0.535-0.467 c-2.349-1.799-5.733-1.666-6.841-1.701c-1.345-0.042-5.912,0.361-8.175,0.655c-7.062,0.92-8.278,2.83-6.399,9.651 C60.104,44.989,66.164,41.395,73.107,41.395z"/><path style="fill:#EDBD50;" d="M69.642,59.565c7.639,0,10.866-3.615,10.926-12.033c0.001-0.08,0.006-0.152,0.006-0.233 c0-2.42-0.765-4.023-1.859-5.093c-1.773-0.526-3.655-0.812-5.607-0.812c-6.944,0-13.003,3.594-16.343,8.951 c0.032,0.115,0.057,0.22,0.09,0.338C58.905,57.906,61.931,59.565,69.642,59.565z"/></g></g><g id="Layer_1"></g></svg></figure> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </article> <article> <h2 id="my_experience">This is what I do</h2> <div class="avatar"> <figure><?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="Mixedtape"><g><rect style="fill:#00D4A5;" width="100" height="100"/><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="52.8066" y1="52.5085" x2="97.6292" y2="97.3311"><stop offset="0" style="stop-color:#117C71"/><stop offset="0.5401" style="stop-color:#08AB8C"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="83.328,28.744 100.096,45.512 100,100 45.881,99.869 17.283,71.271 "/><path style="fill:#B77A18;" d="M81.972,30.132H18.971c-1.074,0-1.945,0.871-1.945,1.945v38.246c0,1.074,0.871,1.945,1.945,1.945 h5.297h57.703c1.074,0,1.945-0.871,1.945-1.945V43.505V32.077C83.916,31.003,83.046,30.132,81.972,30.132z"/><path style="fill:#EDBD50;" d="M81.972,28.187H18.971c-1.074,0-1.945,0.871-1.945,1.945v38.246c0,1.074,0.871,1.945,1.945,1.945 h5.297h57.703c1.074,0,1.945-0.871,1.945-1.945V41.561V30.132C83.916,29.058,83.046,28.187,81.972,28.187z"/><g><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="32.5236" y1="67.9658" x2="60.5919" y2="96.0341"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><polygon style="opacity:0.3;fill:url(#SVGID_2_);" points="20.392,66.446 24.268,70.322 45.492,70.322 34.867,59.697 "/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="60.7329" y1="39.7563" x2="88.8013" y2="67.8247"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><polygon style="opacity:0.3;fill:url(#SVGID_3_);" points="83.914,63.028 83.916,63.033 83.916,41.561 80.371,38.478 51.526,51.929 69.512,48.626 "/></g><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="52.7857" y1="32.0312" x2="85.6704" y2="64.9159"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><path style="opacity:0.15;fill:url(#SVGID_4_);" d="M80.959,40.011v20.056l2.96,2.96L83.915,46.87l-0.003-11.83l-6.852-6.852 l-49.61,6.624l2.957,2.957H78.88C80.028,37.769,80.959,38.773,80.959,40.011z"/><path style="fill:#D64A43;" d="M78.88,37.769H30.406h-8.344c-1.148,0-2.079,1.004-2.079,2.243v25.111 c0,1.239,0.931,2.243,2.079,2.243H78.88c1.148,0,2.079-1.004,2.079-2.243v-5.056V40.011C80.959,38.773,80.028,37.769,78.88,37.769 z"/><polygon style="fill:#DB961D;" points="23.884,28.187 27.449,34.812 73.494,34.812 77.059,28.187 "/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="52.0372" y1="54.0093" x2="68.6315" y2="70.6036"><stop offset="0" style="stop-color:#A1443B"/><stop offset="0.6443" style="stop-color:#C24840"/><stop offset="1" style="stop-color:#D64A43"/></linearGradient><path style="opacity:0.5;fill:url(#SVGID_5_);" d="M83.914,63.028L69.512,48.626l-17.986,3.302l-20.639,3.789l3.979,3.979 l10.625,10.626h36.479c1.074,0,1.945-0.871,1.945-1.945v-5.345L83.914,63.028z"/><path style="fill:#EDBD50;" d="M66.12,47.334H34.823c-2.825,0-5.116,2.29-5.116,5.116c0,2.825,2.29,5.115,5.116,5.115H66.12 c2.825,0,5.116-2.29,5.116-5.115C71.235,49.625,68.945,47.334,66.12,47.334z"/><circle style="fill:#AD1E1E;" cx="35.023" cy="52.45" r="3.941"/><circle style="fill:#117C71;" cx="65.92" cy="52.45" r="3.941"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="52.7816" y1="64.7756" x2="78.1327" y2="90.1267"><stop offset="0" style="stop-color:#B6392B"/><stop offset="0.2745" style="stop-color:#87614A"/><stop offset="0.8958" style="stop-color:#11C599"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.3;fill:url(#SVGID_6_);" points="78.407,60.124 99.908,81.625 100,100 57.627,99.897 22.536,64.807 "/><path style="fill:#AD1E1E;" d="M77.029,65.38H23.914c-1.074,0-1.945-0.871-1.945-1.945v-1.939c0-1.074,0.871-1.945,1.945-1.945 h53.115c1.074,0,1.945,0.871,1.945,1.945v1.939C78.973,64.509,78.103,65.38,77.029,65.38z"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="20.7524" y1="32.96" x2="26.9013" y2="39.1088"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><polygon style="opacity:0.25;fill:url(#SVGID_7_);" points="23.804,37.788 20.187,34.172 22.212,32.642 27.339,37.769 "/><circle style="fill:#DB961D;" cx="21.26" cy="33.485" r="1.276"/><circle style="fill:#DB961D;" cx="79.683" cy="33.485" r="1.276"/></g></g><g id="Layer_1"></g></svg></figure> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </article> <article> <h2 id="my_projects">Here's some fun stuff</h2> <div class="avatar"> <figure><?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="Diamond"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="96.1211" y1="89.7883" x2="142.9375" y2="89.7883"><stop offset="0" style="stop-color:#117C71"/><stop offset="0.2289" style="stop-color:#108073"/><stop offset="0.4331" style="stop-color:#0E8A7A"/><stop offset="0.6279" style="stop-color:#0B9D84"/><stop offset="0.8156" style="stop-color:#06B693"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><polyline style="display:none;opacity:0.4;fill:url(#SVGID_1_);" points="113.765,106.109 98.5,90.844 96.121,80.657 98.108,75.311 102.504,72.451 107.562,73.188 142.938,107.125 "/><g><rect style="fill:#00D4A5;" width="100" height="100.002"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="58.2028" y1="54.0531" x2="101.6171" y2="79.0398"><stop offset="0" style="stop-color:#117C71"/><stop offset="0.5401" style="stop-color:#08AB8C"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><path style="opacity:0.4;fill:url(#SVGID_2_);" d="M100,100c0.001-0.5,0.035-52.847,0.035-52.847l-4.406-4.406L68.251,15.368 L50,66.834l-1.125,1.291l-5.666,3.349l-1.212,7.285l0.972,3.492L60.72,99.97L100,100z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="66.6883" y1="56.0659" x2="103.9673" y2="77.5215"><stop offset="0" style="stop-color:#117C71"/><stop offset="0.5401" style="stop-color:#08AB8C"/><stop offset="0.9852" style="stop-color:#00D4A5"/></linearGradient><polygon style="opacity:0.4;fill:url(#SVGID_3_);" points="100.018,51.476 74.793,26.251 50,66.834 83.233,100.067 100,100 "/><circle style="fill:none;stroke:#BF9643;stroke-width:2;stroke-miterlimit:10;" cx="50" cy="76.763" r="7.874"/><polygon style="fill:#EF6D6A;" points="44.041,15.377 44.041,15.368 31.921,15.368 37.985,26.263 "/><polygon style="fill:#D64A43;" points="56.143,15.372 56.143,15.364 44.023,15.364 50.088,26.259 "/><polygon style="fill:#8C1C1C;" points="68.25,15.377 68.251,15.368 56.131,15.368 62.195,26.263 "/><polygon style="fill:#AD1E1E;" points="50.083,26.243 44.051,15.38 38.01,26.251 50.083,26.251 "/><polygon style="fill:#FF8A8A;" points="37.958,26.243 31.925,15.38 25.207,26.251 37.958,26.251 "/><polygon style="fill:#B74141;" points="56.141,15.371 50.091,26.251 62.191,26.251 "/><polygon style="fill:#B74141;" points="68.24,15.371 62.191,26.251 74.793,26.251 "/><polygon style="fill:#D64A43;" points="37.992,26.251 50,66.834 50.091,26.251 "/><polygon style="fill:#EF6D6A;" points="25.207,26.251 50,66.834 37.992,26.251 "/><polygon style="fill:#8C1C1C;" points="62.191,26.251 50,66.834 74.793,26.251 "/><polygon style="fill:#AD1E1E;" points="50.091,26.251 50,66.834 62.191,26.251 "/><circle style="fill:none;stroke:#EDBD50;stroke-width:2;stroke-miterlimit:10;" cx="50" cy="75.46" r="7.874"/></g></g><g id="Layer_1"></g></svg></figure> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </article> <article> <h2 id="social">You can also find me here</h2> <div class="avatar"> <figure><?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="Heart"><g><rect x="-0.02" style="fill:#EDBD50;" width="100" height="100"/><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.9268" y1="60.5114" x2="103.9973" y2="92.5819"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="50.716,79.417 71.237,99.938 99.98,99.938 100,48.468 83.159,31.627 "/><polygon style="fill:#D64A43;" points="81.724,23.879 81.698,23.852 81.698,23.871 "/><polygon style="fill:#EF6D6A;" points="40.969,22.606 27.184,22.606 27.184,32.353 29.319,32.353 27.184,32.353 27.184,35.658 27.184,32.353 17.437,32.353 17.437,46.138 27.184,55.885 50.716,79.417 50.716,32.353 "/><polygon style="fill:#D64A43;" points="74.248,22.606 60.463,22.606 50.716,32.353 50.716,79.417 74.248,55.885 83.995,46.138 83.995,32.353 "/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="26.2917" y1="31.5435" x2="40.9077" y2="46.1595"><stop offset="0" style="stop-color:#C84F50"/><stop offset="0.0425" style="stop-color:#CA5151"/><stop offset="0.645" style="stop-color:#E56563"/><stop offset="1" style="stop-color:#EF6D6A"/></linearGradient><polygon style="opacity:0.5;fill:url(#SVGID_2_);" points="27.184,22.606 46.583,42.005 36.753,51.835 35.93,50.846 17.437,32.353 "/><polygon style="fill:#AD1E1E;" points="27.184,22.606 17.437,32.353 27.184,32.353 "/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="62.1383" y1="60.0476" x2="99.9679" y2="60.0476"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><polygon style="opacity:0.4;fill:url(#SVGID_3_);" points="62.138,48.997 99.954,86.813 99.968,55.755 77.495,33.282 "/><g><polygon style="fill:#00B58A;" points="71.908,27.657 71.908,27.657 62.79,27.657 62.79,27.657 67.349,38.664 "/><polygon style="fill:#0C4C41;" points="67.349,38.664 71.908,49.669 78.355,43.222 "/><polygon style="fill:#117C71;" points="78.355,43.222 78.355,43.222 78.355,34.105 78.355,34.105 67.349,38.664 "/><polygon style="fill:#00D4A5;" points="62.79,27.657 56.343,34.105 67.349,38.664 "/><polygon style="fill:#0C4C41;" points="78.355,34.105 71.908,27.657 67.349,38.664 "/><polygon style="fill:#117C71;" points="62.79,49.669 62.79,49.669 71.908,49.669 71.908,49.669 67.349,38.664 "/><polygon style="fill:#00B58A;" points="56.343,34.105 56.343,34.105 56.343,43.222 56.343,43.222 67.349,38.664 "/><polygon style="fill:#00D4A5;" points="56.343,43.222 62.79,49.669 67.349,38.664 "/></g></g></g><g id="Layer_1"></g></svg></figure> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </article> <article> <h2 id="contact">Got questions?</h2> <div class="avatar"> <figure><?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="Iphone"><g><polygon style="fill:#EDBD50;" points="0.789,0 0.789,100 45.394,100 100.789,100 100.789,44.861 100.789,0 "/><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="104.6793" y1="86.1862" x2="48.8762" y2="52.0931"><stop offset="0.1514" style="stop-color:#EDBE58"/><stop offset="0.2708" style="stop-color:#E5B353"/><stop offset="0.4838" style="stop-color:#D19445"/><stop offset="0.7632" style="stop-color:#B0632F"/><stop offset="1" style="stop-color:#91341A"/></linearGradient><polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="36.852,83.271 53.219,99.633 53.601,100.014 100.789,100 100.764,52.682 97.812,49.731 64.977,16.896 "/><path style="fill:#117C71;" d="M61.655,15.978c0,0.507-0.289,0.918-0.646,0.918h-3.949c-0.357,0-0.646-0.411-0.646-0.918l0,0 c0-0.507,0.289-0.917,0.646-0.917h3.949C61.366,15.061,61.655,15.471,61.655,15.978L61.655,15.978z"/><path style="fill:#117C71;" d="M35.676,30.46c-0.507,0-0.917-0.289-0.917-0.646v-3.949c0-0.357,0.411-0.646,0.917-0.646l0,0 c0.507,0,0.917,0.289,0.917,0.646v3.949C36.593,30.171,36.183,30.46,35.676,30.46L35.676,30.46z"/><path style="fill:#0C4C41;" d="M66.82,79.636c0,2.929-2.34,5.304-5.227,5.304H40.687c-2.887,0-5.227-2.374-5.227-5.304V22.887 c0-2.929,2.34-5.304,5.227-5.304h20.907c2.887,0,5.227,2.375,5.227,5.304V79.636z"/><path style="fill:#117C71;" d="M66.82,77.73c0,2.929-2.34,5.304-5.227,5.304H40.687c-2.887,0-5.227-2.374-5.227-5.304V20.982 c0-2.929,2.34-5.304,5.227-5.304h20.907c2.887,0,5.227,2.375,5.227,5.304V77.73z"/><rect x="37.789" y="24" style="fill:#00D4A5;" width="26" height="49"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.0916" y1="79.6566" x2="59.9669" y2="79.6566"><stop offset="0" style="stop-color:#91341A"/><stop offset="1" style="stop-color:#DB341A"/></linearGradient><polygon style="opacity:0.25;fill:url(#SVGID_2_);" points="59.967,83.032 53.217,76.282 49.092,80.26 51.279,82.448 51.857,83.026 "/><circle style="fill:#EDBD50;" cx="51.14" cy="78.26" r="2.862"/><path style="fill:#00D4A5;" d="M55.341,20.036c0,0.278-0.225,0.503-0.503,0.503h-7.396c-0.278,0-0.503-0.225-0.503-0.503l0,0 c0-0.278,0.225-0.503,0.503-0.503h7.396C55.116,19.533,55.341,19.758,55.341,20.036L55.341,20.036z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="41.2745" y1="68.0636" x2="100.7895" y2="68.0636"><stop offset="0" style="stop-color:#91341A"/><stop offset="0.7241" style="stop-color:#EDBE58"/></linearGradient><polyline style="opacity:0.3;fill:url(#SVGID_3_);" points="41.275,51.656 48.657,58.749 48.653,58.749 89.862,100.084 100.789,100 100.778,74.497 57.949,36.043 "/><polygon style="fill:#D64A43;" points="41.275,51.712 49.605,55.346 57.897,58.658 57.909,47.911 57.949,36.043 "/><polygon style="fill:#A02924;" points="57.949,36.043 47.373,54.363 48.657,58.749 50.212,55.588 "/></g></g><g id="Layer_1"></g></svg></figure> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </article>
</div>
<div class="sidebar"> <div class="menu"> <div class="button" id="sidebarToggle"><span></span><span></span></div> <ul class="morpher"> <li class="item"><a class="link" href="#about_me"><span>about me</span></a></li> <li class="item"><a class="link" href="#my_experience"><span>my experience</span></a></li> <li class="item"><a class="link" href="#my_projects"><span>my projects</span></a></li> <li class="item"><a class="link" href="#social"><span>social</span></a></li> <li class="item"><a class="link" href="#contact"><span>contact</span></a></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat webpage concept - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:200);
*, *:before, *:after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent;
}
html { height: 100%; font-size: 16px;
}
body { min-height: 100%; font-family: 'Roboto', sans-serif; font-weight: 200; background-color: #D61818; color: #FFF4D5; min-width: 20em; margin: 0; padding: 0; overflow-x: hidden; font-weight: 200; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
article { overflow: hidden; margin: 2em 0;
}
h2 { font-weight: 200; font-size: 1.4em; line-height: 1.2;
}
.sidebar { width: 0; position: fixed; z-index: 6; top: 0; right: 100%; bottom: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.sidebar, .sidebar * { -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.sidebar .menu { position: absolute; left: 0; top: 0; right: 0; bottom: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transition-delay: 0.9s; transition-delay: 0.9s; -webkit-transform: translate3d(2.4em, 0, 0); transform: translate3d(2.4em, 0, 0);
}
.sidebar .menu .morpher { position: absolute; overflow: hidden; right: 0.2em; top: 1em; height: 0; padding-top: 0.2em; background: #F2E9E4; pointer-events: none; width: 2em; -webkit-transition-property: top, height, width, -webkit-transform; transition-property: top, height, width, -webkit-transform; transition-property: transform, top, height, width; transition-property: transform, top, height, width, -webkit-transform; -webkit-transition-delay: 0.6s, 0s, 0s, 0.6s; transition-delay: 0.6s, 0s, 0s, 0.6s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
}
.sidebar .menu.open { -webkit-transform: translate3d(14em, 0, 0); transform: translate3d(14em, 0, 0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
@media only screen and (max-width: 22.5em) { .sidebar .menu.open { -webkit-transform: translate3d(20em, 0, 0); transform: translate3d(20em, 0, 0); }
}
.sidebar .menu.open .morpher { pointer-events: all; top: 0; -webkit-transform: translatex(-2em); transform: translatex(-2em); width: 12em; height: 100%; -webkit-transition-delay: 0.3s, 0.9s, 0.9s, 0.3s; transition-delay: 0.3s, 0.9s, 0.9s, 0.3s;
}
@media only screen and (max-width: 22.5em) { .sidebar .menu.open .morpher { width: 17.8em; }
}
.sidebar .menu.open .button span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.sidebar .menu.open .button span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.sidebar .menu.open .button span { -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
.sidebar .menu .button { display: block; position: absolute; top: 0; right: 0; height: 2.6em; width: 2.4em; cursor: pointer;
}
.sidebar .menu .button span { display: block; background: #F2E9E4; height: 0.2em; position: absolute; left: 0.2em; right: 0.2em; top: 50%; margin-top: -0.1em; pointer-events: none; -webkit-transition: -webkit-transform 0.3s ease-in; transition: -webkit-transform 0.3s ease-in; transition: transform 0.3s ease-in; transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in; -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.sidebar .menu .button span:nth-child(1) { -webkit-transform: translatey(-0.7em); transform: translatey(-0.7em);
}
.sidebar .menu .button span:nth-child(2) { -webkit-transform: translatey(0.3em); transform: translatey(0.3em);
}
.sidebar .menu ul, .sidebar .menu li { display: block; list-style: none; margin: 0; padding: 0;
}
.sidebar .menu .item { position: relative; overflow: hidden; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.sidebar .menu a { display: block; color: #D61818; padding: 0.5em 1em; text-decoration: none;
}
.sidebar .menu a span { position: relative; z-index: 3; pointer-events: none;
}
.sidebar .menu a:hover blob { -webkit-transition-duration: 0; transition-duration: 0; -webkit-transition-delay: 0; transition-delay: 0;
}
.sidebar .menu a:hover blob.scale { box-shadow: 0 0 1em 8em rgba(235, 222, 214, 0.7) inset; -webkit-transition-duration: 0.6s, 0; transition-duration: 0.6s, 0; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transform: scale(1); transform: scale(1);
}
.page { display: block; margin: 3em 2.4em 2.4em; padding-right: 11.6em; line-height: 1.2em; max-width: 70em; overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transition-delay: 0.9s; transition-delay: 0.9s;
}
@media only screen and (max-width: 40em) { .page { padding-right: 0; }
}
.page.open { -webkit-transition-delay: 0; transition-delay: 0; -webkit-transform: translate3d(11.6em, 0, 0); transform: translate3d(11.6em, 0, 0);
}
@media only screen and (max-width: 22.5em) { .page.open { -webkit-transform: translate3d(17.6em, 0, 0); transform: translate3d(17.6em, 0, 0); padding-right: 0; }
}
.page .avatar { display: block; width: 100%; max-width: 9em; float: left; margin: 0 1.2em 0 0; border-radius: 100%; overflow: hidden; line-height: 0; -webkit-shape-outside: circle(50%); shape-outside: circle(50%);
}
@media only screen and (max-width: 22.5em) { .page .avatar { -webkit-shape-outside: initial; shape-outside: initial; float: none; width: 100%; max-width: 100%; }
}
.page .avatar figure { margin: 0; padding: 0; background-color: #F2E9E4;
}
.page .avatar img { width: 100%; display: block; height: auto; border-radisu: inherit;
}
blob { display: block; position: absolute; z-index: 0; height: 25em; width: 25em; margin: -12.5em; background: rgba(239, 227, 221, 0.5); box-shadow: 0 0 0 20em rgba(235, 222, 214, 0.5) inset; pointer-events: none; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.6s cubic-bezier(1, 0.22, 0.5, 0.75); transition: all 0.6s cubic-bezier(1, 0.22, 0.5, 0.75); -webkit-transition-property: box-shadow, -webkit-transform; transition-property: box-shadow, -webkit-transform; transition-property: transform, box-shadow; transition-property: transform, box-shadow, -webkit-transform;
}
blob.blob2.scale { background: #ebded6; box-shadow: 0 0 1em 8em rgba(235, 222, 214, 0.7) inset; z-index: 1; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transform: scale(1); transform: scale(1);
}
@media only screen and (max-width: 22.5em) { blob { z-index: 0; height: 43em; width: 43em; margin: -21.5em; }
}
.header { position: fixed; z-index: 5; top: 0; left: 0; right: 0; background: rgba(214, 24, 24, 0.9); height: 2.4em; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

Flat webpage concept - Script Codes JS Codes

$(function() { var $blob = $('<blob/>'); var $blob2 = $('<blob class="blob2"/>'); $('#sidebarToggle').on('click', function() { $(this).closest('.menu').toggleClass('open'); $('.page').toggleClass('open'); }); $('.link').on('mouseleave touchend', function(e) { //e.preventDefault(); $blob.css({ top: e.offsetY + 'px', left: e.offsetX + 'px' }); $blob.removeClass('scale'); }); $('.link').on('mousemove touchmove', function(e) { e.preventDefault(); $(this).find('blob').css({ top: e.offsetY + 'px', left: e.offsetX + 'px' }); }); $('.sidebar').on('mousemove touchmove', function(e) { e.preventDefault(); }); $('.link').on('mouseenter touchstart', function(e) { $blob.css({ top: e.offsetY + 'px', left: e.offsetX + 'px' }); $(this).append($blob); setTimeout(function() { $blob.addClass('scale'); }, 20); }); $('.link').on('click', function(e) { e.preventDefault(); $blob2.css({ top: e.offsetY + 'px', left: e.offsetX + 'px' }); $blob2.removeClass('scale'); $(this).append($blob2); setTimeout(function() { $blob2.addClass('scale'); }, 20); var target = $(this).attr('href'); var scroll = $(target)[0].offsetTop - 70; $('html, body').animate({ scrollTop: scroll }); });
});
Flat webpage concept - Script Codes
Flat webpage concept - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded June 20, 2022
Rating 4.5
Size 12,434 Kb
Views 36,432
Do you need developer help for Flat webpage concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregor Adams (pixelass) Script Codes
Name
Fractal curve generator
Diagonal scroll
Cantor Set in CSS
Numbers cube counter
Pure CSS marching ants border
Text stroke helpers for SCSS
SVG sine wave
Material design upload button with progress
Google dots animation
Morphing search input
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!