Expanding Fixed Width Content

Developer
DJ Sumanik
Size
4,496 Kb
Views
14,168
  1. Expanding Fixed Width Content Previews
  2. Expanding Fixed Width Content HTML Codes
  3. Expanding Fixed Width Content CSS Codes

How do I make an expanding fixed width content?

A technique to make content sections and headers expand to fill the entire page when inside a fixed width container.. What is a expanding fixed width content? How do you make a expanding fixed width content? This script and codes were developed by DJ Sumanik on 11 November 2022, Friday.

Expanding Fixed Width Content Previews
IQ Test

Expanding Fixed Width Content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Fixed Width Content</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <!-- Expand Both Ways --> <section> <h1 class='expand'>Expanding Fixed Width Content</h1> <p> Push your boundaries! <br> <br> A small demo showing how you can expand fixed width content to fill the entire screen without any added HTML and minimal CSS. I also sprinkled in some header design inspiration for fun! Note the use of SASS extend constructors to save on compiled CSS size. It's usually a good idea to use extends for declarations when working with a common set of root properties. </p> </section> <!-- Expand To Right Edge --> <section> <h3 class='expand-right-header'>Expand Right</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section><h3 class='expand-right-accent'>Expand Right Accent</h3> <p class='expand-right'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-right-border'>Expand Right Border</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-right-inset'>Expand Right Inset</h3> <p class='expand-right'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-right-arc'>Expand Right Arc</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-right-arrow'>Expand Right Arrow</h3> <p class='expand-right'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-right-banner'>Expand Right Banner</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <!-- Expand To Left Edge --> <section> <h3 class='expand-left-header'>Expand Left</h3> <p class='expand-left'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-left-accent'>Expand Left Accent</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-left-border'>Expand Left Border</h3> <p class='expand-left'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-left-inset'>Expand Left Inset</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-left-arc'>Expand Left Arc</h3> <p class='expand-left'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-left-arrow'>Expand Left Arrow</h3> <p> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section> <section> <h3 class='expand-left-banner'>Expand Left Banner</h3> <p class='expand-left'> Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> </section>
</div>
</body>
</html>

Expanding Fixed Width Content - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato);
body, html { font-size: 62.5%; overflow-x: hidden !important;
}
.expand, .expand-left-header, .expand-left-accent, .expand-left-border, .expand-left-inset, .expand-left-arc, .expand-left-arrow, .expand-left-banner, .expand-left, .expand-right-header, .expand-right-accent, .expand-right-border, .expand-right-arc, .expand-right-arrow, .expand-right-banner, .expand-right, .expand-right-inset { position: relative; padding: 2.4rem !important; margin: 0 !important;
}
.expand:before, .expand-left-header:before, .expand-left-accent:before, .expand-left-border:before, .expand-left-inset:before, .expand-left-arc:before, .expand-left-arrow:before, .expand-left-banner:before, .expand-left:before, .expand-right-header:before, .expand-right-accent:before, .expand-right-border:before, .expand-right-arc:before, .expand-right-arrow:before, .expand-right-banner:before, .expand-right:before, .expand-right-inset:before, .expand-left-header:after, .expand-left-accent:after, .expand-left-border:after, .expand-left-inset:after, .expand-left-arc:after, .expand-left-arrow:after, .expand-left-banner:after, .expand-right-header:after, .expand-right-accent:after, .expand-right-border:after, .expand-right-arc:after, .expand-right-arrow:after, .expand-right-banner:after { position: absolute; top: 0; bottom: 0; content: ""; background: inherit; border: inherit; box-shadow: inherit; display: block; z-index: -1;
}
.expand:before { left: -1000%; right: -1000%;
}
.expand-left-header:before, .expand-left-accent:before, .expand-left-border:before, .expand-left-inset:before, .expand-left-arc:before, .expand-left-arrow:before, .expand-left-banner:before, .expand-left:before { left: -1000%; right: 0;
}
.expand-right-header:before, .expand-right-accent:before, .expand-right-border:before, .expand-right-arc:before, .expand-right-arrow:before, .expand-right-banner:before, .expand-right:before, .expand-right-inset:before { left: 0; right: -1000%;
}
.expand-left-header, .expand-left-accent, .expand-left-border, .expand-left-inset, .expand-left-arc, .expand-left-arrow, .expand-left-banner { direction: rtl;
}
.expand-left-header:after, .expand-left-accent:after, .expand-left-border:after, .expand-left-inset:after, .expand-left-arc:after, .expand-left-arrow:after, .expand-left-banner:after { border: 4.2rem solid; border-width: 4.2rem; border-color: #217dbb; background: transparent;
}
.expand-right-header:after, .expand-right-accent:after, .expand-right-border:after, .expand-right-arc:after, .expand-right-arrow:after, .expand-right-banner:after { border: 4.2rem solid; border-width: 4.2rem; border-color: #217dbb; background: transparent;
}
.expand-left-accent { text-indent: -10px; border-right: 10px solid #db7734;
}
.expand-left-border { text-indent: -10px; border: solid #3498db; border-width: 10px 10px 10px 0;
}
.expand-left-border:before { top: -10px; bottom: -10px;
}
.expand-left-inset { text-indent: -10px; border: solid #3498db; border-width: 10px 10px 10px 0; box-shadow: inset 0 15px 15px -15px #16527a, inset 0 -15px 15px -15px #16527a, inset -15px 0 15px -15px #16527a;
}
.expand-left-inset:before { top: -10px; bottom: -10px;
}
.expand-left-arc { text-indent: -10px;
}
.expand-left-arc:after { right: -4.2rem; border-radius: 50%;
}
.expand-left-arrow:after { border-color: transparent transparent transparent #217dbb; right: -8.4rem;
}
.expand-left-banner { margin-right: -4.2rem !important; text-indent: 4.2rem;
}
.expand-left-banner:after { right: 0; top: 100%; border-width: 1.05rem 2.1rem; border-color: #16527a transparent transparent #16527a;
}
.expand-right-accent { text-indent: -10px; border-left: 10px solid #db7734;
}
.expand-right-border { text-indent: -10px; border: solid #3498db; border-width: 10px 0 10px 10px;
}
.expand-right-border:before { top: -10px; bottom: -10px;
}
.expand-right-inset { text-indent: -10px; border: solid #3498db; border-width: 10px 0 10px 10px; box-shadow: inset 0 15px 15px -15px #16527a, inset 0 -15px 15px -15px #16527a, inset 15px 0 15px -15px #16527a;
}
.expand-right-inset:before { top: -10px; bottom: -10px;
}
.expand-right-arc:after { left: -4.2rem; border-radius: 50%;
}
.expand-right-arrow:after { border-color: transparent #217dbb transparent transparent; left: -8.4rem;
}
.expand-right-banner { margin-left: -4.2rem !important; text-indent: 4.2rem;
}
.expand-right-banner:after { left: 0; top: 100%; border-width: 1.05rem 2.1rem; border-color: #16527a #16527a transparent transparent;
}
.container { font: 2rem/3.2rem lato; margin: 0; background: #cce5f6; max-width: 800px; margin: auto; color: #196090;
}
h1 { font: 3.6rem/4.8rem lato;
}
h1[class*='expand'] { background: #217dbb; color: #fff;
}
h3 { font: 2.4rem/3.6rem lato;
}
h3[class*='expand'] { background: #217dbb; color: #fff;
}
p { margin: 2.4rem;
}
p[class*='expand'] { background: #a0cfee;
}
Expanding Fixed Width Content - Script Codes
Expanding Fixed Width Content - Script Codes
Home Page Home
Developer DJ Sumanik
Username TundraTech
Uploaded November 11, 2022
Rating 4.5
Size 4,496 Kb
Views 14,168
Do you need developer help for Expanding Fixed Width Content?

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!

DJ Sumanik (TundraTech) Script Codes
Name
Isolating CSS Box Shadows
A Pen by DJ Sumanik
True Yukon Aurora
Create amazing SEO content 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!