Features - Lists in areas

Developer
Dean Leigh
Size
2,361 Kb
Views
4,048
  1. Features - Lists in areas Previews
  2. Features - Lists in areas HTML Codes
  3. Features - Lists in areas CSS Codes

How do I make an features - lists in areas?

What is a features - lists in areas? How do you make a features - lists in areas? This script and codes were developed by Dean Leigh on 25 January 2023, Wednesday.

Features - Lists in areas Previews
IQ Test

Features - Lists in areas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Features - Lists in areas</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="layout"> <main class="main"> <div class="feature"> <div class="feature__title"> <h2>Feature</h2> </div> <div class="feature__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lectus eget turpis faucibus porttitor ultrices sed eros. Vestibulum auctor vitae felis vitae rhoncus.</p> </div> </div> <div class="feature feature--internal"> <div class="feature__title"> <h2>Internal Links</h2> </div> <div class="feature__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lectus eget turpis faucibus porttitor ultrices sed eros. Vestibulum auctor vitae felis vitae rhoncus.</p> </div> </div> <div class="feature feature--external"> <div class="feature__title"> <h2>External Links</h2> </div> <div class="feature__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lectus eget turpis faucibus porttitor ultrices sed eros. Vestibulum auctor vitae felis vitae rhoncus.</p> </div> </div> </main> <aside class="aside"> <div class="feature"> <div class="feature__title"> <h2>Feature</h2> </div> <div class="feature__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lectus eget turpis faucibus porttitor ultrices sed eros. Vestibulum auctor vitae felis vitae rhoncus.</p> </div> </div> <div class="feature feature--internal layout--list"> <div class="feature__title"> <h2>Internal Links</h2> </div> <div class="feature__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lectus eget turpis faucibus porttitor ultrices sed eros. Vestibulum auctor vitae felis vitae rhoncus.</p> </div> </div> <div class="feature feature--external"> <div class="feature__title"> <h2>External Links</h2> </div> <div class="feature__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lectus eget turpis faucibus porttitor ultrices sed eros. Vestibulum auctor vitae felis vitae rhoncus.</p> </div> </div> </aside>
</div>
</body>
</html>

Features - Lists in areas - Script Codes CSS Codes

.layout { float: left; width: 800px; background: #fcc;
}
.main { float: left; width: 66.7%; background: #fcc;
}
.aside { float: left; width: 33.3%; background: #ccf;
}
.feature { float: left; width: 100%; background: #cff;
}
.main .feature { float: left; width: 100%; background: #fcf;
}
.aside .feature { background: #fff; border: 1px solid #000; float: left; width: 100%;
}
.aside .feature .feature__title { background: #999; border-bottom: 1px solid #000; float: left; width: 100%;
}
.aside .feature .feature__title h2 { float: left; margin: 0; padding: 0.5rem;
}
.aside .feature .feature__content { background: #ccc; float: left; width: 100%;
}
.aside .feature .feature__content p { float: left; margin: 0; padding: 0.5rem;
}
.aside .feature.feature--internal.layout--list .feature__title { background: #900;
}
.aside .feature.feature--internal.layout--list .feature__title h2 { color: #ff9999;
}
.aside .feature.feature--internal.layout--list .feature__content { background: #ff9999;
}
.aside .feature.feature--internal.layout--list .feature__content p { color: #900;
}
.aside .feature--external .feature__title { background: #009;
}
.aside .feature--external .feature__title h2 { color: #9999ff;
}
.aside .feature--external .feature__content { background: #9999ff;
}
.aside .feature--external .feature__content p { color: #009;
}
Features - Lists in areas - Script Codes
Features - Lists in areas - Script Codes
Home Page Home
Developer Dean Leigh
Username deanleigh
Uploaded January 25, 2023
Rating 3
Size 2,361 Kb
Views 4,048
Do you need developer help for Features - Lists in areas?

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!

Dean Leigh (deanleigh) Script Codes
Name
Data Attribute - Combining
Background Image Transitions
Review of Feature Naming
New Menu Bar Data Attribute mark up
Border-image
Menu Test - 02
CSS Transition - Background Colour
BEM Features
List animation 01
Border Gradients Basic
Create amazing captions 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!