Sample page
How do I make an sample page?
What is a sample page? How do you make a sample page? This script and codes were developed by Matheus Silva on 20 October 2022, Thursday.
Sample page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sample page</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='css/https___codepen_io_chrisd.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { width: 100%; height: 100%;
}
html body { width: 100%; height: 100%;
}
.bg-vid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; transition: 1s all;
}
.content-over { border-radius: 5px; padding-top: 2%; padding-bottom: 2%; margin-top: 5%; margin-bottom: 2%; background-color: #fff; width: 80%; min-height: 100%;
}
.ghost { border-width: 4px; background: none; transition: .5s all;
}
.ghost:hover { background: none; boder: none;
}
.btn-primary.ghost { color: #337ab7;
}
.btn-primary.ghost:hover { color: #337ab7;
}
.btn-success.ghost { color: #5cb85c;
}
.btn-success.ghost:hover { color: #5cb85c;
}
.btn-info.ghost { color: #5bc0de;
}
.btn-info.ghost:hover { color: #5bc0de;
}
.btn-warning.ghost { color: #f0ad4e;
}
.btn-warning.ghost:hover { color: #f0ad4e;
}
.btn-danger.ghost { color: #d9534f;
}
.btn-danger.ghost:hover { color: #d9534f;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container content-over"> <nav class="navbar navbar-default navbar-fixed-top collapse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Test</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam ornare luctus. Aliquam suscipit id libero venenatis pellentesque. </p> <p><a href="#" class="btn btn-lg btn-primary ghost">Test!</a></p> </div> <div class="row"> <div class="col-md-6"> <p> Video on background is polina recorded by Alexander Wagner in 2011 </p> </div> <div class="col-md-6"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam ornare luctus. Aliquam suscipit id libero venenatis pellentesque. Nunc semper euismod nisi, at sodales eros ullamcorper ac. Duis eu eros non ante pretium iaculis. Vivamus risus erat, bibendum ac congue sed, placerat et sapien. Curabitur ullamcorper, lorem et facilisis elementum, urna ante pellentesque neque, vitae tincidunt libero nunc eleifend nunc. </p> </div> </div>
</div>
<video autoplay muted poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" loop class="bg-vid"> <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/> <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
</video>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sample page - Script Codes CSS Codes
html { width: 100%; height: 100%;
}
html body { width: 100%; height: 100%;
}
.bg-vid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; transition: 1s all;
}
.content-over { border-radius: 5px; padding-top: 2%; padding-bottom: 2%; margin-top: 5%; margin-bottom: 2%; background-color: #fff; width: 80%; min-height: 100%;
}
.ghost { border-width: 4px; background: none; transition: .5s all;
}
.ghost:hover { background: none; boder: none;
}
.btn-primary.ghost { color: #337ab7;
}
.btn-primary.ghost:hover { color: #337ab7;
}
.btn-success.ghost { color: #5cb85c;
}
.btn-success.ghost:hover { color: #5cb85c;
}
.btn-info.ghost { color: #5bc0de;
}
.btn-info.ghost:hover { color: #5bc0de;
}
.btn-warning.ghost { color: #f0ad4e;
}
.btn-warning.ghost:hover { color: #f0ad4e;
}
.btn-danger.ghost { color: #d9534f;
}
.btn-danger.ghost:hover { color: #d9534f;
}
Sample page - Script Codes JS Codes
$('.collapse').collapse();
Developer | Matheus Silva |
Username | matheusxaviersi |
Uploaded | October 20, 2022 |
Rating | 3 |
Size | 4,168 Kb |
Views | 24,288 |
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!
Name | Size |
Color switching button | 2,764 Kb |
Sample page | 4,168 Kb |
A Pen by Matheus Silva | 1,675 Kb |
Simple yet functional | 2,025 Kb |
Server satus indicator | 2,289 Kb |
Menu concept | 3,451 Kb |
Mug foundation-pre loader | 3,330 Kb |
Login page | 3,547 Kb |
Just some fun with 3d transforms | 2,140 Kb |
Rapier script playground | 2,937 Kb |
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!
Name | Username | Size |
Hovers with popups | Zacharyolson | 2,380 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Button Option Group | Honchoman | 1,859 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Reading Grid | Tappily | 4,306 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!