Custom Bulleted List Template Skeleton

Developer
Gunnar Guddal
Size
4,617 Kb
Views
2,024
  1. Custom Bulleted List Template Skeleton Previews
  2. Custom Bulleted List Template Skeleton HTML Codes
  3. Custom Bulleted List Template Skeleton CSS Codes

How do I make an custom bulleted list template skeleton?

What is a custom bulleted list template skeleton? How do you make a custom bulleted list template skeleton? This script and codes were developed by Gunnar Guddal on 06 January 2023, Friday.

Custom Bulleted List Template Skeleton Previews
IQ Test

Custom Bulleted List Template Skeleton - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Bulleted List Template Skeleton </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='main'> <div class='header'> <div class='wrapper'> <img alt='' src='http://placehold.it/120x60'> </div> </div> <div class='hero'> <div class='wrapper'> <div class='first'> <h1>Main Title</h1> <p> <a href='http://www.wwu.edu/ee/outreach/landing06/index.shtml'>See final.</a> Lorem ipsum dolor sit amet, ne meis insolens mediocritatem has, debet perfecto in veltibique, molestiae vituperata cum an. </p> <ol> <li> <h3>Bullet Point</h3> <p>Text text text text text</p> </li> <li> <h3>Bullet Point</h3> <p>Text text text text text</p> </li> <li> <h3>Bullet Point</h3> <p>Text text text text text</p> </li> <li> <h3>Bullet Point</h3> <p>Text text text text text</p> </li> </ol> </div> <div class='second'> <h2>Column Title</h2> <p>Vim te esse erroribus evertitur, sed ad accusamus scripserit, pro ad adipisci rationibus. Vis id dico alia sapientem. An cum nonumy corpora, liber omnes equidem no vix.</p> <form action=''> <input placeholder='Name' type='text'> <input placeholder='Email' type='text'> <input placeholder='Favorite place to read dinosaur books' type='text'> <input class='button' type='submit' value='Hey'> </form> <a href='#'>Privacy Policy</a> </div> </div> </div> <div class='lower'> <div class='wrapper'> <h2>Section title goes here</h2> <div class='quoteboxes'> <div class='quotebox'> <p>"Lorem ipsum dolor sit amet, equidem recusabo honestatis eu eos, at ludus tation hendrerit eam!"</p> <p>-Name</p> <img alt='' src='http://placehold.it/100x100'> </div> <div class='quotebox'> <p>"Vel discere saperet, et lorem labitur eam. Id elitr soleat officiis usu!"</p> <p>-Name</p> <img alt='' src='http://placehold.it/100x100'> </div> </div> <h2>Another section!</h2> <img alt='' class='left' src='http://placehold.it/350x150'> <p>Sed te libris audiam, eam ei alia quodsi. Vim an quot dignissim. Vix amet suavitate id, feugiat recusabo ex mei. Ex vis legere democritum, no mazim noluisse assentior nam, iusto accusamus mediocritatem et est. Ad cum harum prodesset, sint suavitate qualisque eos et, tantas indoctum eum ut.</p> <p>Summo dicit fuisset vim at. In vel discere saperet, et lorem labitur eam. Id elitr soleat officiis usu. Utinam aperiam est in, in natum feugait sed. Mucius lobortis eam no, ne eum esse tempor. Cibo electram temporibus nam eu, ad sit veniam dolorem.</p> <p>Justo euismod in vim. Atqui electram maluisset ius id, veritus probatus tacimates vim eu. Usu deleniti copiosae mediocrem ut, integre inimicus torquatos cum te, nam duis albucius at. Pro iudico tollit ignota ut, delenit volumus democritum et vim.</p> </div> </div> <div class='footer'> <div class='wrapper'> <p>Copyright 2016 GG</p> </div> </div>
</div>
</body>
</html>

Custom Bulleted List Template Skeleton - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Montserrat:700|Work+Sans:400,700';
body{ background: #aaa; padding: 0px; margin: 0px; font-family: 'Work Sans', sans-serif;
}
.main{ width: 100%; max-width: 1400px; margin: auto; background:#fff; overflow: hidden;
}
.wrapper{ overflow: hidden; padding: 0px 3%; max-width: 1000px; margin: auto;
}
p, li, input{ font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 16px;
}
p{ line-height: 24px;
}
h1, h2, h4{ font-family: 'Montserrat', sans-serif;
}
h3{ font-family: 'Work Sans', sans-serif; font-weight: 700;
}
.button,
a.button,
input.button{ background: #444; border: none; display: block; box-shadow: 1px 2px 20px rgba(0,0,0,0.1); color: #fff; padding: 15px 30px;
}
.left{ float:left;
}
.right{ float: right;
}
img.left{ padding: 0px 20px 10px 0px;
}
img.right{ padding: 0px 0px 10px 20px;
}
.header{ width: 100%; padding: 20px; background:#fff;
}
.header img{ width: 120px; height: auto; margin: auto; display: block;
}
.hero{ background: url(http://placehold.it/350x150);
}
.hero .wrapper{ display: flex; justify-content: space-between; flex-wrap: wrap;
}
.hero .first { background: rgba(0,0,0,0.6); width: 100%; max-width: 500px; float:left; padding: 10px 20px; box-sizing: border-box; flex: 0 1 500px; color: #fff;
}
.hero .first ol li{ list-style-type: none; counter-increment: step-counter;
}
.hero .first ol li::before{ content: counter(step-counter); margin-right: 15px; margin-left: -20px; font-size: 180%; background-color: #eee; color: #212A38; font-weight: bold; line-height: 30px; width: 30px; padding: 10px 10px; border-radius: 3px; text-align: center; float: left;
}
.hero .second{ background: #fafafa; border-left: 1px solid #eee; border-right: 1px solid #eee; width: 100%; max-width: 400px; float: right; padding: 10px 20px; box-sizing: border-box; flex: 1 0 400px;
}
input{ display: block; width: 100%; max-width: 400px; padding: 5px 7px; margin: 10px auto; box-sizing: border-box; background: #fff; border: 1px solid #ddd;
}
.lower{ background: #fff; padding-bottom: 40px;
}
.lower h2{ text-align: center; padding: 40px 0px 0px 0px; font-size: 32px; color: #555;
}
.quoteboxes{ text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;
}
.quotebox{ background: #eee; width: 450px; max-width: 100%; margin: 0px auto; display: inline-block; flex: 0 1 450px; padding: 10px 10px 110px 10px; box-sizing: border-box; text-align: left; position: relative;
}
.quotebox > p{ margin-top: 0px;
}
.quotebox img{ width: auto; height: 100px; position: absolute; bottom: 10px; right: 10px;
}
.footer{ background: #eee;
}
Custom Bulleted List Template Skeleton - Script Codes
Custom Bulleted List Template Skeleton - Script Codes
Home Page Home
Developer Gunnar Guddal
Username thegunnar
Uploaded January 06, 2023
Rating 3
Size 4,617 Kb
Views 2,024
Do you need developer help for Custom Bulleted List Template Skeleton?

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!

Gunnar Guddal (thegunnar) Script Codes
Name
Classic Soup Landing Page
A Pen by Gunnar Guddal
Product Slider
Flex Image Grid with Titles
Landing Page 1.1
Green and Healthy Rebranding
Neon Signs
Generic Landing Page Skeleton
Simple Landing Page 1.1
Pure CSS Sailboat and Clouds
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!