Fixed header & BG with △ indicator, IE8 supported

Developer
Alan Mok | Aki Isamu
Size
3,237 Kb
Views
36,432
  1. Fixed header & BG with △ indicator, IE8 supported Previews
  2. Fixed header & BG with △ indicator, IE8 supported HTML Codes
  3. Fixed header & BG with △ indicator, IE8 supported CSS Codes

How do I make an fixed header & bg with △ indicator, ie8 supported?

Fixed header and background with a triangle indicator... . What is a fixed header & bg with △ indicator, ie8 supported? How do you make a fixed header & bg with △ indicator, ie8 supported? This script and codes were developed by Alan Mok | Aki Isamu on 28 July 2022, Thursday.

Fixed header & BG with △ indicator, IE8 supported Previews
IQ Test

Fixed header & BG with △ indicator, IE8 supported - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed header & BG with △ indicator, IE8 supported</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1, minimal-ui' name='viewport'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="header"> <div class="center"> <div class="middle"> <h1>Blur</h1> <span>Fixed header with a triangle indicator</span> </div> </div>
</div>
<div id="pageHrBorder"> <!-- just simply remove this if not needed --> <i class="s"></i> <i class="a"></i>
</div>
<div id="pageHr"> <i class="s"></i> <i class="a"></i>
</div>
<div id="page"></div>
</body>
</html>

Fixed header & BG with △ indicator, IE8 supported - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Varela+Round);
html, body { height: 100%; padding: 0; margin: 0;
}
body { font-family: "Varela Round"; background: #444444;
}
#header { background: url(http://suplemenbadan.com/wp-content/uploads/2014/05/plants-and-sunlight-background-blur-with-bokeh-f4.jpg) no-repeat center; background-size: cover; position: fixed; bottom: 0; right: 0; left: 0; top: 0;
}
#header .center { background: rgba(0, 0, 0, 0.25); text-align: center; position: absolute; color: #FFFFFF; color: #F5F7FA; bottom: 0; right: 0; left: 0; top: 0;
}
#header .center .middle { position: absolute; margin-top: -6em; right: 0; left: 0; top: 50%;
}
#header .center .middle h1 { font-weight: normal; line-height: 1em; font-size: 11em; margin: 0;
}
#header .center .middle span { line-height: 1em; font-size: 1em;
}
#pageHr, #pageHrBorder { position: absolute; border-bottom: 25px solid #48CFAD; margin-top: -40px; height: 20px; display: block; right: 0px; left: 0px; top: 100%;
}
#pageHr .a:before,
#pageHr .a:after, #pageHrBorder .a:before,
#pageHrBorder .a:after { border-color: #48CFAD transparent; border-style: solid; position: absolute; display: block; content: "";
}
#pageHr .a:before, #pageHrBorder .a:before { border-width: 0 20px 20px 0; margin-left: 10px; right: 50%;
}
#pageHr .a:after, #pageHrBorder .a:after { border-width: 0 0 20px 20px; margin-right: 10px; left: 50%;
}
#pageHr .s:before,
#pageHr .s:after, #pageHrBorder .s:before,
#pageHrBorder .s:after { background: #48CFAD; position: absolute; display: block; content: ""; right: 0; left: 0;
}
#pageHr .s:before, #pageHrBorder .s:before { margin-right: 20px; height: 20px; right: 50%;
}
#pageHr .s:after, #pageHrBorder .s:after { margin-left: 20px; height: 20px; left: 50%;
}
#pageHrBorder { border-bottom-color: #F5F7FA; margin-top: -45px;
}
#pageHrBorder .a:before,
#pageHrBorder .a:after { border-color: #F5F7FA transparent;
}
#pageHrBorder .a:before { margin-right: -2.5px;
}
#pageHrBorder .a:after { margin-left: -2.5px;
}
#pageHrBorder .s:before,
#pageHrBorder .s:after { background: #F5F7FA;
}
#pageHrBorder .s:before { margin-right: 17.36842px;
}
#pageHrBorder .s:after { margin-left: 17.36842px;
}
#page { background: #37BC9B; position: relative; height: 123.45%; top: 100%;
}
Fixed header & BG with △ indicator, IE8 supported - Script Codes
Fixed header & BG with △ indicator, IE8 supported - Script Codes
Home Page Home
Developer Alan Mok | Aki Isamu
Username mok20123
Uploaded July 28, 2022
Rating 4.5
Size 3,237 Kb
Views 36,432
Do you need developer help for Fixed header & BG with △ indicator, IE8 supported?

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!

Alan Mok | Aki Isamu (mok20123) Script Codes
Name
Mok20123 Logo Animation
Swipe as the home screen.
Logo Animation
ContextMenu.js
Div Gallery
Search interface
ParseURLParams js
Timeline, description
Useless - HK Cyberport location
No Game No Life Logo Animation
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!