Fixed Curtains

Developer
GRAY GHOST
Size
4,912 Kb
Views
72,864
  1. Fixed Curtains Previews
  2. Fixed Curtains HTML Codes
  3. Fixed Curtains CSS Codes

How do I make an fixed curtains?

A template for authors to get started quickly with this particular layout pattern. Media queries and fallbacks for IE8 not included. Read more about the pattern . What is a fixed curtains? How do you make a fixed curtains? This script and codes were developed by GRAY GHOST on 23 June 2022, Thursday.

Fixed Curtains Previews
IQ Test

Fixed Curtains - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed Curtains</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <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 role="banner"> <h1 class="fcurtain-identity">Fixed Curtains</h1> <nav role="navigation"> <a href="">link 1</a> <a href="">link 2</a> <a href="">link 3</a> </nav>
</header>
<main role="main"> <section class="fcurtain--cover fcurtain--callout"> <h2>A Sassy Layout Pattern for Authors</h2> <p>Scroll down to learn more about this HTML template</p> </section> <section class="fcurtain"> <header> <h1>Getting Started</h1> </header> <p>This template uses <abbr title="cascading stylesheets">CSS</abbr> properties for layout such as <a href="//caniuse.com/#search=flexbox"><code>flexbox</code></a> and <a href="//caniuse.com/#search=calc"><code>calc()</code></a> as well as the <code>fixed</code> value for <code>background-attachment</code>. I've also used the <a href="//caniuse.com/#search=nth-of-type"><code>nth-of-type()</code></a> selector to style each curtain's background image individually.</p> <p><b>Does it work on IE8?</b> You'll need to consider your own fallbacks for a minimum of IE8, but make sure to double check 9-11 as well. I didn't write IE fallbacks for you which is why you're getting this for free yo.</p> <p><b>What about that sweet <abbr title="responsive web design">RWD?</abbr></b> I'll let you take care of that business since it's a unique thing based on your unique needs. Once again it's free, but keep an eye our for a paid version in the future with better features like <abbr title="responsive web design">RWD</abbr>, Performance Optimizing, Additional Functionality and Support.</p> <p><b>What else is going on?</b> ARIA roles are baked in plus I made this template super clean for you to get started by ensuring removeable items are super easy to remove. Authors can also declare the height of the fixed panels using a Sass variable and passing either <code>fixed</code> or <code>full</code>. You're also on your own for a grid system should you choose to use one. Now all that's left to do is copy this Markup and Sass and get to work.</p> </section> <section class="fcurtain--cover fcurtain--callout"> <h2>Go to 11</h2> </section> <section class="fcurtain"> <header> <h1>Turn that volume up</h1> </header> <p>Wanna make this template really awesome? Why not add some media queries or even a fancy ass JavaScript thingy. You could also use something like the <code>picture</code> element or <code>srcset</code> to help control these massive background images for various screen dimensions. Anyways, here's some more lorem ipsum that I know you love so much.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio culpa, praesentium eius veniam odio recusandae sed deserunt fuga assumenda explicabo. Nobis omnis nulla illo enim, temporibus maxime qui repellat atque!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio culpa, praesentium eius veniam odio recusandae sed deserunt fuga assumenda explicabo. Nobis omnis nulla illo enim, temporibus maxime qui repellat atque!</p> </section> <section class="fcurtain--cover fcurtain--callout"> <h2>Section Intro</h2> </section> <section class="fcurtain"> <header> <h1>Section Title</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio culpa, praesentium eius veniam odio recusandae sed deserunt fuga assumenda explicabo. Nobis omnis nulla illo enim, temporibus maxime qui repellat atque!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio culpa, praesentium eius veniam odio recusandae sed deserunt fuga assumenda explicabo. Nobis omnis nulla illo enim, temporibus maxime qui repellat atque!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio culpa, praesentium eius veniam odio recusandae sed deserunt fuga assumenda explicabo. Nobis omnis nulla illo enim, temporibus maxime qui repellat atque!</p> </section> <footer role="contentinfo"> <small>Fixed Curtains ©2014 all rights reserved</small> </footer>
</main> <script src='js/a08e0d79c150ff5030f9b6afa.js'></script>
</body>
</html>

Fixed Curtains - Script Codes CSS Codes

*:before, *:after { box-sizing: inherit;
}
html { box-sizing: border-box; font-family: 'Droid Serif',serif; font-size: 100%; line-height: 1.5;
}
header[role="banner"] { padding: 20px;
}
footer[role="contentinfo"] { background: #253537; color: white;
}
h2 { margin-bottom: 0;
}
nav a { color: #071A24; padding: 0 5px; text-decoration: none;
}
html,
body,
main { height: 100%;
}
header[role="banner"] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; width: auto; z-index: 1;
}
.fc-identity { -webkit-box-flex: 5; -ms-flex: 5; flex: 5;
}
nav[role="navigation"] { -webkit-box-flex: 5; -ms-flex: 5; flex: 5; text-align: right;
}
main[role="main"] > * { max-width: 640px; padding: 1.65em calc(50% - 320px);
}
.fcurtain--cover { min-height: 100%; position: relative; background-size: cover; background-attachment: fixed; background-positon: center center; background-repeat: no-repeat; background-color: #EFE99D;
}
.fcurtain--cover:nth-of-type(1) { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/mountain-peaks.jpg);
}
.fcurtain--cover:nth-of-type(3) { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/geometric-mountains.jpg);
}
.fcurtain--cover:nth-of-type(5) { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/mountain-gaze.jpg);
}
.fcurtain--callout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
Fixed Curtains - Script Codes
Fixed Curtains - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded June 23, 2022
Rating 4.5
Size 4,912 Kb
Views 72,864
Do you need developer help for Fixed Curtains?

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!

GRAY GHOST (grayghostvisuals) Script Codes
Name
Polybird
Filter Animation
Rotating Cube
Blur Filter
Grayscale Filter
ScrollTop Demo
Accessible Dropdown Menu
Mocean PlayfulModals
Polyon Lion Enhanced
Custom ChartJS Gradient
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!