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.
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ 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 >
GeeksforGeeks 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, GeeksforGeeks 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.
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
< 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" >
GeeksforGeeks
</ 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 >
GeeksforGeeks 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 =
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 =
alt = "Feature 2 image" >
< h2 >Feature 2</ h2 >
< p >
Additionally, GeeksforGeeks has a large and active
community of users who can share their knowledge
and help others with their coding problems.Another
great functionality of GeeksforGeeks 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 =
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/