<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="css, bootstrap, html, tags, elements, animations">
<meta name="description" content="This is an example site for releasing to the public">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Derek Brazil">
<link rel="stylesheet" href="css/layout.css">
<title> Example site </title>
</head>
<body>
<style type="text/css">body, a:hover {cursor: url(https://cur.cursors-4u.net/cursors/cur-4/cur337.ani), url(https://cur.cursors-4u.net/cursors/cur-4/cur337.png), progress !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/05/04/mac-os-x-radioactive-busy.html" target="_blank" title="Mac OS X Radioactive Busy"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Mac OS X Radioactive Busy" style="position:absolute; top: 0px; right: 0px;" /></a>
<header> WELCOME TO OUR EXAMPLE SITE! </header>
<nav>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h2 id="date"> Click the button below to display the Date</h2>
<ol>
<marquee direction="across"> Just an example site </marquee>
<br>
<style>
img{
margin-left: 200px;
margin-right: 200px;
}
button{
padding: 15px;
position: relative;
overflow: hidden;
background-color: transparent;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
}
button:hover{
padding: 15px;
position: relative;
overflow: hidden;
background-color: #100;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
font-size: 25px;
}
#b1{
width: 125px;
padding: 15px;
position: relative;
overflow: hidden;
background-color: transparent;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
}
#b1:hover{
width: 125px;
padding: 15px;
position: relative;
overflow: hidden;
background-color: #100;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
font-size: 25px;
}
</style>
<img id="anonSwitcher" alt="Anonymous" width="auto" height="auto" src="img/anon1.jpg"></img>
<br>
<button onclick="document.getElementById('date'.innerHTML = Date()"> Display Date </button>
<button onclick="imgSwitch()"> Anonymous </button>
<button onclick="imgSwitch2()"> Anonymous 2</button>
<button id="b1" onclick="alert1()"> Alert </button>
<br>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li>
<h5>For more information on our Services <a href="service.html">Click here.</a></h5>
</li>
<br>
</ol>
<footer id="footer" class="top-space">
<div class="footer1">
<div class="container">
<div class="row">
<div class="col-md-3 widget">
<h3 class="widget-title">Contact</h3>
<div class="widget-body">
<p>+353 085 222sexy4u<br>
<a href="mailto:#">[email protected]</a><br>
<br>
This address tho <br> 123 example lane
</p>
</div>
</div>
<div class="col-md-6-widget">
<h3 class="widget-title1">Information</h3>
<div class="widget-body2">
<h6>Contact us by email [email protected]</h6>
<h6>This is an example of an email & you can put your phone# here aswell</h6>
</div>
</div>
</div>
<!-- /row of widgets -->
</div>
</div>
<div class="footer2">
<div class="container">
<div class="row">
<div class="col-md-6 widget">
<div class="widget-body">
<p class="simplenav">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Services</a> |
<a href="#">Contact</a>
</p>
</div>
</div>
<div class="col-md-6 widget">
<div class="widget-body">
<p class="text-right">
Copyright © 2016, Developed by Someone
</p>
</div>
</div>
</div>
<!-- /row of widgets -->
</div>
</div>
</footer>
<script type='text/javascript' src="js/script.js"></script>
</body>
</html>
.footer1 .widget-body2 {
color: #aaa;
margin: 0 0 20px;
text-align: center;
width: 0 200px;
}
.footer1 {
background: transparent;
padding: 30px 0 0 0;
font-size: 12px;
color: #aaa;
box-shadow: 5px 5px 15px 10px red;
}
hr{
box-shadow: 5px 5px 10px 5px red;
}
.footer1 a {
color: #aaa;
}
.footer1 a:hover {
color: #000;
}
.footer1 .widget {
margin-bottom:30px;
}
.footer1 .widget-title {
font-size: 17px;
font-weight: bold;
color: #eee;
margin: 15px 0 20px;
text-align: center;
}
.footer1 .widget-title1{
font-size: 17px;
font-weight: bold;
color: #eee;
margin: 15px 0 20px;
text-align: center;
}
.footer1 .entry-meta {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 0 35px 0;
padding: 2px 0;
color: #888888;
font-size: 12px;
font-size: 0.75rem;
}
.footer1 .entry-meta a {
color: #333333;
}
.footer1 .entry-meta .meta-in {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.footer2 {
background: transparent;
padding: 15px 0;
color: #aaa;
font-size: 12px;
box-shadow: 10px red;
}
.footer2 a {
color: #aaa;
}
.footer2 a:hover {
color: #fff;
}
.footer2 p {
margin: 0;
}
.widget-simplenav {
margin-left:-5px;
}
.widget-simplenav a{
margin:0 5px;
}
nav{
background-color: black;
border-bottom: solid 5px #565656;
border-radius: 10px;
box-shadow: 5px 5px 10px 5px red;
position: relative;
}
body{
background-color: #000;
border: solid 5px black;
box-shadow: 5px 5px 10px 5px red;
border-radius: 5px;
}
nav li a{
margin: 0;
display: block;
color: red;
text-align: center;
margin-top: 10px;
padding: 10px;
text-decoration: none;
}
nav ul li {
list-style-type: none;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
background-color: black;
width: 200px;
}
nav li {
margin: 0 auto;
}
header
{
font-size: 25px;
color: #ddd;
text-align: center;
}
nav ul li a:hover{
font-size: 25px;
background-color: #111;
color: red;
}
hr{
margin: 0;
}
li h5 a:hover
{
list-style-type: none;
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: #FFF;
text-decoration: none;
}
li h5 a
{
list-style-type: none;
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: red;
text-decoration: none;
}
li h5
{
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: #aaa;
}
li p{
list-style-type: none;
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: #aaa;
}
ol h5{
color: #aaa;
}
ol h5 a{
color: #284aba;
}
h1 {
color: #eee;
text-align: center;
}
h2{
color: #bbb;
text-align:center;
}
h4{
color: #aaa;
text-align: center;
}
p{
color: #aaa;
text-align: center;
}
h4 a{
color: #284aba;
}
p{
color: #aaa;
text-align: center;
}
p{
color: #aaa;
text-align: center;
}
function imgSwitch()
{
document.getElementById("anonSwitcher").src="img/anon1.jpg";
document.getElementById("date").innerHTML = "Anonymous picture 1";
}
function imgSwitch2()
{
document.getElementById("anonSwitcher").src="img/anon2.jpg";
document.getElementById("date").innerHTML = "Anonymous picture 2";
}
function alert1()
{
alert("Hello there how are you ?");
}
Copyright © 2024, NextGenUpdate.
All Rights Reserved.