Feature article layout

Developer
John Riordan
Size
4,316 Kb
Views
36,432
  1. Feature article layout Previews
  2. Feature article layout HTML Codes
  3. Feature article layout CSS Codes

How do I make an feature article layout?

A test article layout for a nice-looking featured-article layout. What is a feature article layout? How do you make a feature article layout? This script and codes were developed by John Riordan on 22 August 2022, Monday.

Feature article layout Previews
IQ Test

Feature article layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Feature article layout</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> <script type="text/javascript" src="//use.typekit.net/xsa3cbo.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<article class="article"> <header style="background-image: url(https://s3.amazonaws.com/ooomf-com-files/dMQHVOrkSGiAQe516cFD_sylwiabartyzel_unsplash_tatry_02.jpg);"> <div class="title"> <h1>Lorem ipsum dolor sit amet nemo culpa</h1> <span class="sub-head">Voluptas tenetur dolorum</span> </div> <figure> <img src="https://s3.amazonaws.com/ooomf-com-files/kVEPcWcfSA2tgOpRz9Za__DSC0765.jpg" alt="" /> </figure> </header> <div class="article-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quis praesentium eos excepturi in pariatur mollitia eaque ratione fuga laborum eveniet reprehenderit iusto doloribus molestias velit nemo culpa. Doloremque possimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ad laborum ipsum incidunt earum alias ea voluptatem consequuntur cum quia dolor esse. Sunt quod error incidunt quisquam tempore corporis animi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia dolores quam pariatur veritatis beatae sequi consequuntur dolore quibusdam itaque quisquam a sapiente soluta deleniti mollitia assumenda vitae quas reiciendis?</p> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Feature article layout - Script Codes CSS Codes

* { box-sizing: border-box;
}
img,
figure { margin: 0; padding: 0; max-width: 100%;
}
body { color: #e3e6ec; background-color: #292c2f; -webkit-font-smoothing: antialiased; font-family: "garamond-premier-pro-display",serif; font-style: normal; font-weight: 400; font-size: 1.6em; line-height: 1.4; padding: 15px;
}
@media screen and (max-width: 1000px) { body { font-size: 1.4em; }
}
.article { border: 1px solid rgba(255, 255, 255, 0.5);
}
.article figure img { visibility: hidden;
}
.article header { position: relative; background-size: cover; background-position: center; max-height: 800px; width: calc(100% + 30px); margin-left: -15px; z-index: -1; margin-top: -15px;
}
.article header:before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: #292c2f; opacity: 0.35;
}
.article header:after { content: ''; position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; height: 80%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5MmMyZiIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMjkyYzJmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjkyYzJmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #292c2f), color-stop(20%, #292c2f), color-stop(100%, rgba(41, 44, 47, 0))); background-image: -moz-linear-gradient(bottom, #292c2f 0%, #292c2f 20%, rgba(41, 44, 47, 0) 100%); background-image: -webkit-linear-gradient(bottom, #292c2f 0%, #292c2f 20%, rgba(41, 44, 47, 0) 100%); background-image: linear-gradient(to top, #292c2f 0%, #292c2f 20%, rgba(41, 44, 47, 0) 100%);
}
.article .title { color: white; position: absolute; z-index: 2; margin: 0; width: 100%; top: 40%; text-align: center;
}
@media screen and (max-width: 650px) { .article .title { top: 25%; }
}
.article h1 { font-family: "chaparral-pro",sans-serif; font-style: normal; font-weight: 400; font-size: 2.4em; font-variant: small-caps; letter-spacing: 1px; margin: 0 0 0.2em 0; padding: 0 1em; line-height: 1;
}
@media screen and (min-width: 651px) and (max-width: 850px) { .article h1 { font-size: 2em; }
}
@media screen and (max-width: 650px) { .article h1 { font-size: 1.8em; }
}
.article .sub-head { font-family: "chaparral-pro",sans-serif; font-style: italic; font-weight: 300; color: white; padding-top: 0.3em; position: relative; opacity: 0.7;
}
.article .sub-head:before { content: ''; position: absolute; top: 0; left: 50%; width: 60px; height: 1px; background: white; margin-left: -30px;
}
.article-content { position: relative; z-index: 2; max-width: 650px; width: 65%; margin: -5em auto 5em auto;
}
@media screen and (max-width: 650px) { .article-content { width: 80%; max-width: auto; margin-top: -3em; }
}
Feature article layout - Script Codes
Feature article layout - Script Codes
Home Page Home
Developer John Riordan
Username JohnRiordan
Uploaded August 22, 2022
Rating 3
Size 4,316 Kb
Views 36,432
Do you need developer help for Feature article layout?

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!

John Riordan (JohnRiordan) Script Codes
Name
Draw svg animation
A Pen by John Riordan
Progressive form
Compress panels
Border image
Little Calendar listing
Location marker - Pulse
Thermostat Thinger
Square Wallet UI - WIP
Montoro branding
Create amazing love letters 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!