Thank you for using the Layout Generator. Here is your code output for your selections! If you did not make a selection, the default style output is displayed. You can go back to the generator to make different selections and generate new code.
Click on the tabs to see your HTML, CSS, and JavaScript code output. We are assuming that you already have a basic understanding of web page creation. Just copy and paste the code inside to your own index.html, style.css, and script.js files into the same directory and add your own content. Remember to do the below:
Save the below code to a file called index.html. Make sure all your files are in the same directory!
<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
<link rel="stylesheet" href="reset.css" \>
<link rel="stylesheet" href="style.css" \>
</head>
<body>
<div id="wrapper">
<header>
<h1>Your Site Title</h1>
<p>
Insert your title sub-text, maybe a brief description of your site.
</p>
<p>
<a href="#">Here is what a link looks like!</a>
</p>
</header>
<nav>
<ul id="dropdown">
<li class="mobile" id="mobileMenu">Menu</li>
<span class="dropdown-content" id="dropdownContent">
<li id="homeLink">Home</li>
<li id="link1">Section One</li>
<li id="link2">Section Two</li>
</span>
</ul>
</nav>
<section id="link1Section">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est placerat in egestas erat imperdiet sed euismod nisi porta. Egestas congue quisque egestas diam in arcu. Dictum varius duis at consectetur lorem donec massa sapien. Scelerisque felis imperdiet proin fermentum leo vel. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. In metus vulputate eu scelerisque felis imperdiet. Lacus vel facilisis volutpat est velit egestas. Mauris pharetra et ultrices neque ornare aenean. Non consectetur a erat nam at lectus urna duis convallis. Convallis convallis tellus id interdum velit laoreet id donec. Ut sem nulla pharetra diam. Malesuada nunc vel risus commodo.
</p>
<p>
Quam nulla porttitor massa id. Sem integer vitae justo eget magna. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Fringilla urna porttitor rhoncus dolor purus non. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Et netus et malesuada fames ac. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Quis blandit turpis cursus in hac habitasse platea dictumst. Id faucibus nisl tincidunt eget nullam non nisi. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam.
</p>
<p>
Blandit turpis cursus in hac. Egestas quis ipsum suspendisse ultrices gravida dictum. Id donec ultrices tincidunt arcu non. At auctor urna nunc id cursus metus aliquam eleifend mi. Pharetra diam sit amet nisl suscipit adipiscing. Facilisis leo vel fringilla est ullamcorper eget nulla. Morbi blandit cursus risus at ultrices mi. Enim nec dui nunc mattis enim ut tellus elementum. At tellus at urna condimentum. Et molestie ac feugiat sed. Pharetra vel turpis nunc eget lorem. Eget aliquet nibh praesent tristique magna sit amet purus. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Arcu odio ut sem nulla pharetra diam.
</p>
</section>
<section id="link2Section">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est placerat in egestas erat imperdiet sed euismod nisi porta. Egestas congue quisque egestas diam in arcu. Dictum varius duis at consectetur lorem donec massa sapien. Scelerisque felis imperdiet proin fermentum leo vel. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. In metus vulputate eu scelerisque felis imperdiet. Lacus vel facilisis volutpat est velit egestas. Mauris pharetra et ultrices neque ornare aenean. Non consectetur a erat nam at lectus urna duis convallis. Convallis convallis tellus id interdum velit laoreet id donec. Ut sem nulla pharetra diam. Malesuada nunc vel risus commodo.
</p>
<p>
Quam nulla porttitor massa id. Sem integer vitae justo eget magna. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Fringilla urna porttitor rhoncus dolor purus non. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Et netus et malesuada fames ac. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Quis blandit turpis cursus in hac habitasse platea dictumst. Id faucibus nisl tincidunt eget nullam non nisi. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam.
</p>
<p>
Blandit turpis cursus in hac. Egestas quis ipsum suspendisse ultrices gravida dictum. Id donec ultrices tincidunt arcu non. At auctor urna nunc id cursus metus aliquam eleifend mi. Pharetra diam sit amet nisl suscipit adipiscing. Facilisis leo vel fringilla est ullamcorper eget nulla. Morbi blandit cursus risus at ultrices mi. Enim nec dui nunc mattis enim ut tellus elementum. At tellus at urna condimentum. Et molestie ac feugiat sed. Pharetra vel turpis nunc eget lorem. Eget aliquet nibh praesent tristique magna sit amet purus. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Arcu odio ut sem nulla pharetra diam.
</p>
<p>
Dui ut ornare lectus sit amet est placerat. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Ornare arcu dui vivamus arcu felis bibendum ut. Risus commodo viverra maecenas accumsan lacus. Nulla pharetra diam sit amet nisl suscipit adipiscing. Mattis enim ut tellus elementum sagittis vitae et leo. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Auctor urna nunc id cursus metus aliquam. Dignissim sodales ut eu sem. Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Tellus at urna condimentum mattis pellentesque id. Justo nec ultrices dui sapien eget mi proin. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Sit amet nisl purus in mollis nunc sed.
</p>
<p>
Volutpat maecenas volutpat blandit aliquam etiam. Turpis massa tincidunt dui ut ornare lectus sit. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Nec ullamcorper sit amet risus nullam eget felis eget. Amet venenatis urna cursus eget nunc. Lacus luctus accumsan tortor posuere ac ut consequat. Quis ipsum suspendisse ultrices gravida dictum fusce. Ornare lectus sit amet est placerat in egestas erat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Felis eget nunc lobortis mattis aliquam faucibus purus. Ornare massa eget egestas purus viverra.
</p>
</section>
<footer>
<p>
© Your Copyright Here
</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
1. Save the below code to a file called style.css.
2. Make a file called reset.css and save the code at this link (pops up in new window) into it.
3. Please save the image at (pops up in new window) and rename it to background.jpg.
Make sure all your files are in the same directory!
Save the below code to a file called script.js. Make sure all your files are in the same directory!