Sample page

Developer
Matheus Silva
Size
4,168 Kb
Views
24,288
  1. Sample page Previews
  2. Sample page HTML Codes
  3. Sample page CSS Codes
  4. Sample page JS Codes

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 Previews
IQ Test

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();
Sample page - Script Codes
Sample page - Script Codes
Home Page Home
Developer Matheus Silva
Username matheusxaviersi
Uploaded October 20, 2022
Rating 3
Size 4,168 Kb
Views 24,288
Do you need developer help for Sample page?

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!

Matheus Silva (matheusxaviersi) Script Codes
Name
Markup playground
Off canvas menu
Just some fun with 3d transforms
Rapier script playground
Simple yet functional
Simple syntax higlighter
Server satus indicator
Css3 loaders 4rd revision
Login page
Mug foundation-pre loader
Create amazing marketing copy 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!