Pure CSS Landing Page Layout
The Landing Page Layout in Pure CSS facilitates to create the responsive landing page for the website or any web app by implementing the available classes. It helps to make the overall attractive web app that enhances the user experience along with interactivity to the site or the app. It also provides a mobile-first design approach that ensures the responsiveness of the specific web app or site to any screen size or device width, along with support for older browsers, as well.
Pure CSS Landing Page Layout classes:
- pure-g: It helps to create a grid container.
- pure-u: It is used to create a grid unit within a pure-g container.
- pure-form: It helps to create a form element.
- pure-menu: It helps to create a menu.
- pure-menu-item: It helps to create a menu item within a pure-menu element.
- pure-menu-link: It helps to create a link within a pure-menu-item element.
- pure-table: It helps to create the table element.
- pure-button: It helps to create a button element.
- pure-input: It helps to add an input element.
Syntax:
<div class="pure-g"> <div class="pure-form"> ... </div> </div>
Example 1: This example describes the basic implementation of the Pure CSS Landing Page Layout.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.4/build/pure-min.css" > </ head > < body > < h1 style = "color:green" > w3wiki </ h1 > < h3 > Pure CSS Landing Page Layout </ h3 > < header class = "pure-menu pure-menu-horizontal" > < a href = "#" class = "pure-menu-heading" > Logo </ a > < ul class = "pure-menu-list" > < li class = "pure-menu-item" > < a href = "#" class = "pure-menu-link" > Menu Item 1 </ a > </ li > < li class = "pure-menu-item" > < a href = "#" class = "pure-menu-link" > Menu Item 2 </ a > </ li > < li class = "pure-menu-item" > < a href = "#" class = "pure-menu-link" > Menu Item 3 </ a > </ li > </ ul > </ header > < main class = "pure-g" > < div class = "pure-u-1 pure-u-md-1-2" > < h1 >Welcome to My Landing Page</ h1 > < p > w3wiki is a popular website for programmers and computer science students. It provides a wide range of resources such as articles, tutorials, and practice problems to help users improve their programming skills. One of the key functionalities of the website is its wide range of topics covered. The website offers a variety of articles and tutorials on different programming languages, data structures, and algorithms, making it a great resource for anyone looking to improve their coding skills. The website also provides a platform for users to test their skills by solving practice problems, which are accompanied by detailed solutions and explanations. Additionally, w3wiki has a large and active community of users who can share their knowledge and help others with their coding problems. </ p > </ div > < div class = "pure-u-1 pure-u-md-1-2" > < form class = "pure-form" > < fieldset > < legend > Sign Up for Our Newsletter </ legend > < label for = "email" > Email </ label > < input type = "email" id = "email" required> < button type = "submit" class = "pure-button pure-button-primary" > Sign Up </ button > </ fieldset > </ form > </ div > </ main > < footer > < p > Copyright © 2021 My Company </ p > </ footer > </ body > </ html > |
Output:
Example 2: This is another basic example that describes the use of the Landing Page Layout in Pure CSS.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.4/build/pure-min.css" > < style > .hero { background-color: #333; color: white; height: 400px; display: flex; align-items: center; justify-content: center; } .hero h1 { font-size: 48px; } .hero p { font-size: 24px; } .feature { background-color: #f4f4f4; padding: 50px; text-align: center; } .feature h2 { font-size: 36px; margin-bottom: 20px; } .feature p { font-size: 18px; margin-bottom: 40px; } .feature img { max-width: 100%; height: auto; margin-bottom: 20px; } </ style > </ head > < body > < h1 style = "color:green" > w3wiki </ h1 > < h3 > Pure CSS Landing Page Layout </ h3 > < header class = "pure-menu pure-menu-horizontal" > < a href = "#" class = "pure-menu-heading" > Logo </ a > < ul class = "pure-menu-list" > < li class = "pure-menu-item" > < a href = "#" class = "pure-menu-link" > Menu Item 1 </ a > </ li > < li class = "pure-menu-item" > < a href = "#" class = "pure-menu-link" > Menu Item 2 </ a > </ li > < li class = "pure-menu-item" > < a href = "#" class = "pure-menu-link" > Menu Item 3 </ a > </ li > </ ul > </ header > < div class = "hero" > < div class = "pure-g" > < div class = "pure-u-1 pure-u-md-1-2" > < h1 >Welcome to GFG</ h1 > < p > w3wiki is a popular website for programmers and computer science students. It provides a wide range of resources such as articles, tutorials, and practice problems to help users improve their programming skills. One of the key functionalities of the website is its wide range of topics covered. </ p > < a href = "#" class = "pure-button pure-button-primary" > Learn More </ a > </ div > </ div > </ div > < div class = "pure-g" > < div class = "pure-u-1 pure-u-md-1-3" > < div class = "feature" > < img src = "https://media.w3wiki.net/wp-content/uploads/20230124162938/gfg6.png" alt = "Feature 1 image" > < h2 >Feature 1</ h2 > < p > The website offers a variety of articles and tutorials on different programming languages, data structures, and algorithms, making it a great resource for anyone looking to improve their coding skills. The website also provides a platform for users to test their skills by solving practice problems, which are accompanied by detailed solutions and explanations. </ p > </ div > </ div > < div class = "pure-u-1 pure-u-md-1-3" > < div class = "feature" > < img src = "https://media.w3wiki.net/wp-content/uploads/20230124162938/gfg6.png" alt = "Feature 2 image" > < h2 >Feature 2</ h2 > < p > Additionally, w3wiki has a large and active community of users who can share their knowledge and help others with their coding problems.Another great functionality of w3wiki is its user-friendly interface and easy navigation. </ p > </ div > </ div > < div class = "pure-u-1 pure-u-md-1-3" > < div class = "feature" > < img src = "https://media.w3wiki.net/wp-content/uploads/20230124162938/gfg6.png" alt = "Feature 3 image" > < h2 >Feature 3</ h2 > < p > The website is well-organized and easy to navigate, making it easy for users to find the information they need. The articles and tutorials are well-written and easy to understand, making them accessible to users of all skill levels. The website also has a search bar, which allows users to quickly find specific information or topics. </ p > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://purecss.io/layouts/