CSS Grid Area demo - the start

Developer
Kevin
Size
2,847 Kb
Views
22,264
  1. CSS Grid Area demo - the start Previews
  2. CSS Grid Area demo - the start HTML Codes
  3. CSS Grid Area demo - the start CSS Codes

How do I make an css grid area demo - the start?

Further my dive into CSS Grid, I look at how to use grid-template-areas to build a nice looking layout for my latest video tutorial on YouTube. What is a css grid area demo - the start? How do you make a css grid area demo - the start? This script and codes were developed by Kevin on 04 December 2022, Sunday.

CSS Grid Area demo - the start Previews
IQ Test

CSS Grid Area demo - the start - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Grid Area demo - the start</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1 class="header-title">CSS Grid - grid-template-areas</h1>
</header>
<div class="hero"> <h1 class="hero-title">Grid areas</h1> <p class="hero-subtitle">Making life easier</p>
</div>
<main> <h1>From the blog</h1> <div class="card"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-card-img-01.jpg" alt="" class="card-img"> <h2 class="card-title">Blog post title</h2> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat.</p> <a href="">Read more</a> </div> </div> <div class="card"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-card-img-01.jpg" alt="" class="card-img"> <h2 class="card-title">Blog post title</h2> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat.</p> <a href="">Read more</a> </div> </div> <div class="card"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-card-img-01.jpg" alt="" class="card-img"> <h2 class="card-title">Blog post title</h2> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat.</p> <a href="">Read more</a> </div> </div>
</main>
<aside> <h1>Sidebar stuff</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat. In tempor pharetra felis at fermentum. Maecenas iaculis neque orci, sit amet sodales quam venenatis sit amet. Praesent eu enim nec velit bibendum accumsan a sed tellus. Aenean sed justo a tortor hendrerit imperdiet efficitur nec risus. Morbi gravida mi quis ultrices elementum. Pellentesque fermentum sodales sagittis. Sed vel efficitur nisl. Ut congue sodales sapien. Duis ultricies felis nunc, eu semper est tincidunt eu. Curabitur faucibus luctus eros, eget semper mauris dictum vel.</p>
</aside>
<footer> <h1 class="footer-title">the end</h1>
</footer>
</body>
</html>

CSS Grid Area demo - the start - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps");
body { font-family: "Merriweather", serif; font-size: 1rem; font-weight: 300; color: #252525; line-height: 1.6;
}
CSS Grid Area demo - the start - Script Codes
CSS Grid Area demo - the start - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded December 04, 2022
Rating 3
Size 2,847 Kb
Views 22,264
Do you need developer help for CSS Grid Area demo - the start?

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!

Kevin (kevinpowell) Script Codes
Name
Margin vs Padding
Simple Jumbotron with BG image
Non-rectangular sections
A look at some CSS units
Background position test
Setting label widths
Collapsing divs with floats
Anchors with smooth scrolling
Explicit and Implicit grid
Mobile nav v2
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!