Generic Landing Page Skeleton

Developer
Gunnar Guddal
Size
4,733 Kb
Views
8,096
  1. Generic Landing Page Skeleton Previews
  2. Generic Landing Page Skeleton HTML Codes
  3. Generic Landing Page Skeleton CSS Codes

How do I make an generic landing page skeleton?

What is a generic landing page skeleton? How do you make a generic landing page skeleton? This script and codes were developed by Gunnar Guddal on 06 January 2023, Friday.

Generic Landing Page Skeleton Previews
IQ Test

Generic Landing Page Skeleton - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Generic Landing Page Skeleton</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='main'> <div class='topbar'> <div class='wrapper'> <a class='button'>Learn More</a> </div> </div> <div class='hero'> <div class='wrapper'> <div class='content'> <h1>This is a title</h1> <p>Lorem ipsum dolor sit amet, id qui rebum illud ludus, ne voluptua apeirian mea, an vis vivendo sensibus. Per ut graecis efficiantur, lobortis explicari dissentias vix et. Pri nostrud debitis at.</p> <ul> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> </ul> <a class='button'>Learn More</a> </div> </div> </div> <div class='second'> <div class='wrapper'> <div class='iconboxes'> <div class='iconbox'> <i aria-hidden='true' class='fa fa-circle-thin fa-fw fa-3x'></i> <h3>Wut wut</h3> <p>Lorem ipsum dolor sit amet, id qui rebum illud ludus, ne voluptua</p> </div> <div class='iconbox'> <i aria-hidden='true' class='fa fa-circle-thin fa-fw fa-3x'></i> <h3>Wut wut</h3> <p>Lorem ipsum dolor sit amet, id qui rebum illud ludus, ne voluptua</p> </div> <div class='iconbox'> <i aria-hidden='true' class='fa fa-circle-thin fa-fw fa-3x'></i> <h3>Wut wut</h3> <p>Lorem ipsum dolor sit amet, id qui rebum illud ludus, ne voluptua</p> </div> </div> </div> </div> <div class='process'> <div class='wrapper'> <div class='section' id='first'> <div class='image'></div> <h2>Qualifications</h2> <p>Lorem ipsum dolor sit amet, id qui rebum illud ludus, ne voluptua apeirian mea, an vis vivendo sensibus. Per ut graecis efficiantur, lobortis explicari dissentias vix et. Pri nostrud debitis at, his sonet minimum lobortis ne. Ex vis omnis volutpat, mel an modus consulatu. Ornatus dolorem menandri duo no, qui ut delenit iudicabit, per ne qualisque scriptorem.</p> </div> <div class='section' id='second'> <div class='image'></div> <h2>Steps</h2> <p>Lorem ipsum dolor sit amet, id qui rebum illud ludus, ne voluptua apeirian mea, an vis vivendo sensibus. Per ut graecis efficiantur, lobortis explicari dissentias vix et. Pri nostrud debitis at, his sonet minimum lobortis ne. Ex vis omnis volutpat, mel an modus consulatu. Ornatus dolorem menandri duo no, qui ut delenit iudicabit, per ne qualisque scriptorem.</p> </div> </div> </div> <div class='quote'> <div class='wrapper'> <div class='quotebox center'> <img> <p>"Hello, my name is Jane Doe and I have been a..."</p> <p> <span class='emphasis'>Jane Doe</span> <br> 2016 Program of Programming </p> </div> </div> </div> <div class='form'> <div class='wrapper'> <h2>Could I buy a vowel?</h2> <p>**Form section goes here**</p> </div> </div> <div class='footer'> <div class='wrapper'> <p>Privacy Policy</p> <p>Copyright 2016 C GG</p> </div> </div>
</div>
</body>
</html>

Generic Landing Page Skeleton - Script Codes CSS Codes

body { font: 100% Helvetica, sans-serif; color: #333; margin: 0px; padding: 0px; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; background: #eee;
}
.main { max-width: 1500px; margin: auto;
}
a.button,
#button,
.button,
input.button { border: 2px solid #BAD80A; padding: 10px 20px; text-decoration: none; background: none; cursor: pointer; -webkit-appearance: none; border-radius: 0px; margin: 5px 10px; -webkit-transition: 0.3s all ease; transition: 0.3s all ease; display: inline-block;
}
a.button:hover,
.button:hover,
input.button:hover,
#button:hover { margin: 5px 0px; padding: 10px 30px;
}
p { line-height: 1.4em;
}
.left { float: left;
}
.right { float: right;
}
.center { margin: auto; float: none; display: block;
}
.wrapper { width: 95%; margin: auto; overflow: hidden; position: relative; padding: 10px;
}
.topbar { background: #fff url(http://placehold.it/220x110); background-position: 50% 50%; background-repeat: no-repeat; background-size: 110px auto; text-align: right;
}
.topbar .button { margin: 10px 0px 10px auto;
}
.topbar .button:hover { margin: 10px -10px 10px auto;
}
.hero { background: url(http://placehold.it/1000x1200); background-position: 50% 20%; background-repeat: no-repeat; background-size: cover; overflow: hidden;
}
.hero .wrapper { padding: 60px 10px 30px 10px;
}
.hero .content { width: 500px; max-width: 100%; background: #fafafa; padding: 20px;
}
.second { background: #fdfdfd;
}
.iconboxes { text-align: center; padding: 20px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.iconbox > * { padding: 2px; margin: 0px auto;
}
.iconbox { display: inline-block; padding: 20px; -webkit-box-flex: 0; -ms-flex: 0 1 300px; flex: 0 1 300px;
}
.iconbox .fa { display: block; margin: auto; padding: 10px;
}
.process .wrapper { padding: 0px; width: 100%;
}
.process .section { overflow: hidden; padding: 30px 5%; background: url(http://placehold.it/500x600); background-position: 50% 50%; background-repeat: no-repeat; background-size: 40% auto;
}
.process .section:nth-child(even) { background-position: 0% 50%; padding-left: 42%;
}
.process .section:nth-child(odd) { background-position: 100% 50%; padding-right: 42%;
}
.quotebox { background: #ddd; width: 800px; max-width: 90%; padding: 10px 20px; border: 2px solid #fff; border-radius: 5px;
}
.form { background: #fafafa; text-align: center; padding: 1px;
}
.form .wrapper { background: #fff; width: 600px; max-width: 95%; margin: 20px auto -30px auto;
}
.footer { background: #ccc; padding: 30px 10px 10px 10px;
}
Generic Landing Page Skeleton - Script Codes
Generic Landing Page Skeleton - Script Codes
Home Page Home
Developer Gunnar Guddal
Username thegunnar
Uploaded January 06, 2023
Rating 3
Size 4,733 Kb
Views 8,096
Do you need developer help for Generic Landing Page 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
Simple Landing Page 1.1
Marketplace - Products
Video Landing Page Skeleton
Classic Soup Landing Page
Green and Healthy Rebranding
Product Slider
Neon Signs
Pure CSS Clipping Shape
A Pen by Gunnar Guddal
Books
Create amazing blog posts 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!