The HTML version of my website

Developer
Mike Otis
Size
7,126 Kb
Views
2,024
  1. The HTML version of my website Previews
  2. The HTML version of my website HTML Codes
  3. The HTML version of my website CSS Codes

How do I make an the html version of my website?

What is a the html version of my website? How do you make a the html version of my website? This script and codes were developed by Mike Otis on 01 February 2023, Wednesday.

The HTML version of my website Previews
IQ Test

The HTML version of my website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The HTML version of my website</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Cyber Farms</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cabin|Cormorant" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Cyber Farms</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">Home</a> </li> <li data-target="#myCarousel" data-slide-to="1"> <a href="#">About</a> </li> <li data-target="#myCarousel" data-slide-to="2"> <a href="#">Services</a> </li> <li data-target="#myCarousel" data-slide-to="3"> <a href="#">Contact</a> </li> <li data-target="#myCarousel" data-slide-to="4"> <a href="#">Portfolio</a> </li> </ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill Home-section"> <div class="overlay-home"> <div class="container"> <div class="row"> <div class="jumbotron my-jumbotron"> <!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ... </div> </div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> </div> </div>
</div> <h1 class="intro">Hi, I’m Mike Otis a free lance web developer.</h1> <h3 id="main"> I build webpages in many ways. If you are looking to get a new web site or redesign a current website , or have some questions. You have come to the rite place. Check out the services I offer in the menu tab above or click on the Learn more button to see what I can do for you. No job is too small, no job is too big. 100% custom websites.</h3> </div> </div> </div> </div> </div>
</div>
<div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill About-section"> <div class="about-overlay"> <div class="container about"> <div class="row about-row"> <div class="col-md-10 col-sm-12 col-xs-12"> <h1>Mike Otis Web debonair</h1> <img src="profile.jpg" style="height: 250px; width: 250px;" class="img-responsive profile"> <h3>My name is mike otis and I build websites. I love building things on the web. Things move fast in this industry and I love the ever avolving technologys and how they develop. My passion is learning all things web development. I always make time to learn new things and perfect the skills that I have attained over the years. I mainly work with html css ruby on rails Jquery and content manegment systems like Wordpress joomla and drupal. I am available for hire now. If you need a website or have a project, send me a detailed message and I will get back to you shortly so we can get you the help you need. </h3> </div> </div> </div> </div> </div>
</div>
<div class="item"> <!-- Set the third background image using inline CSS below. --> <div class="fill Services-section"> <div class="overlay-home"> <div class="container services-container"> <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <i class="fa fa-mobile fa-5x color icon"></i> <h2 class="services-header">Mobile Friendly Websites</h2> <p class="service-paragraph">Nowadays most people view websites from there phones or tablets. If your site needs to be seen on mobile devices you will want to make sure your site is mobile friendly. The websites I build can be seen across all devices. Do not miss out on oppurtunitys becasue your site is hard to navigate on a mobile device.</p> </div> <!-- /.col-lg-4 --> <div class="col-md-4 col-sm-6 col-xs-12"> <i class="fa fa-code fa-5x color icon"></i> <h2 class="services-header">E-Commerce</h2> <p class="service-paragraph">An e-commerce site can take your business to the next level. Wether you have a small buiness or large buisness. It will open doors for you all over the world. Of course you are going to have some questions along the way and I will be there to walk you through the process and answer all of your questions. I have solutions that will give your customers the secure and intuitive shopping experience they deserve</p> </div> <!-- /.col-lg-4 --> <div class="col-md-4 col-sm-6 col-xs-12"> <i class="fa fa-code fa-5x color icon"></i> <h2 class="services-header">Content Management Systems</h2> <p class="service-paragraph">Keep your website management in-house using a content management system customized for the needs of your business. Here are a few options for you. Each one is different in its own way. Follow the links to see what each one can do for you and your buiness. If you still have lingering questions after reading up on some of the content managment systems, feel free to contact me so we can get your buiness started on the rite path.</p> <a href="#">WordPress</a> <a href="#">Drupal</a> <a href="#">Joomla</a> <a href="#">Ruby On Rails</a> </div> <!-- /.col-lg-4 --> <div class="col-md-4 col-sm-6 col-xs-12"> <i class="fa fa-support fa-5x color icon"></i> <h2 class="services-header">Web Site Maintenence</h2> <p class="service-paragraph">Do you need upadates to an existing website or changes made to a preexisting site. Do you want to move your site to another platform. I can help.</p> </div> <!-- /.col-lg-4 --> <div class="col-md-4 col-sm-6 col-xs-12"> <i class="fa fa-html5 fa-5x color icon"></i> <h2 class="services-header">SEO </h2> <p class="service-paragraph">Ever wander how some pages pop up on the front page of your search engine? That's where the SEO thing comes into play. SEO (search engine optimisation) Make sure your website will be found when potential customers or clients search for your products and services via major search engines such as Google and Yahoo or Bing.</p> </div> <!-- /.col-lg-4 --> </div> <!-- /.row --> </div> </div> </div> </div>
<div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill Contact-section"> <div class="contact-overlay"> <div class="container contact-container"> <div class="row"> <div class="col-md-12"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Send me a message.</legend> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Name</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="Your name" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Your E-mail</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="Your email" class="form-control"> </div> </div> <!-- Message body --> <div class="form-group"> <label class="col-md-3 control-label" for="message">Your message</label> <div class="col-md-9"> <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Submit</button> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div>
</div>
</div>
</div>
<!-- Footer -->
<footer> <div class="copyright"> <p>Copyright &copy; Mike Otis Web Debonair 2017</p> </div> <div class="social-links"> <ul> <li><a href="mailto:[email protected]"><i class="fa fa-send"></i></a> </li> <li><a href="https://www.linkedin.com/in/mike-otis-4bb082118/"><i class="fa fa-linkedin"></i></a> </li> <li><a href="https://twitter.com/mike_otis1"><i class="fa fa-twitter"></i></a> </li> <li><a href="https://github.com/mikeotis123"><i class="fa fa-github-square"></i></a> </li> <li><a href="https://plus.google.com/u/0/106404153135552282482"><i class="fa fa-google-plus"></i></a> </li> </ul> </div>
</footer>
<!--End of Footer -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script> $('.carousel').carousel({ pause: true, interval: false //changes the speed });
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

The HTML version of my website - Script Codes CSS Codes

/* * Start Bootstrap - Full Slider (http://startbootstrap.com/) * Copyright 2013-2016 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) */
/***************************************************************NAV-BAR STYLES************************************************************************/
/***************************************************************CAROUSEL************************************************************************/
html,
body { width: 100%; height: 100%; margin: 0px; padding: 0px;
}
html { height: 100%; margin: 0; padding: 0;
}
body { margin: 0; padding: 0;
}
.carousel,
.item,
.active { height: 100%; width: 100%;
}
.carousel-inner { height: 100%; width: 100%;
}
/***************************************************************INDEX STYLES************************************************************************/
h3 {} .intro { width: 70%; margin-left: 5%; text-align: left;
}
h3#main { color: white; font-size: 2.5em; text-align: left; min-width: 200px; margin-left: 5%; font-weight: 500; line-height: 120%;
}
/***************************************************************JUMBOTRON STYLES************************************************************************/
.jumbotron h1 { text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.jumbotron { text-align: center; margin-right: 0 auto; margin-top: 160px; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-weight: bold; text-shadow: 0px 2px 3px #555; background-color: inherit;
}
.first { background-color: cadetblue; color: white; border-radius: 0; font-size: 1.5em; font-weight: bold;
}
.second { background-color: darkgoldenrod; color: #fefefe; border-radius: 0; font-size: 1.5em; font-weight: bold;
}
/***************************************************************END OF THE INDEX STYLES************************************************************************/
/***************************************************************STYLES FOR THE ABOUT SECTION************************************************************************/
.service-section { height: 100%;
}
.services { margin-left: auto; margin-right: auto; color: white; padding-top: 100px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black line-height: 24px; font-size: 2.0rem; width: 90%; height: 100%;
}
.services p { font-size: 1.1em; font-weight: 500px; text-align: left; color: white;
}
h2.services-header { text-align: left;
}
p { padding: 0; margin: 0;
}
/***************************************************************STYLES FOR EVERY SECTION************************************************************************/
.container { width: 100%; padding: 0px; margin: 0px;
}
.navbar-inverse { background-color: transparent; border-color: transparent;
}
/*========
========================================================= Contact
==================================================================*/
.fa { color: #e9ebec;
}
.btn-primary { background-color: cadetblue;
}
.social { font-size: 1.5em;
}
.input-field { margin-bottom: 10px;
}
.form-control { border: 1px solid #ececec; border-radius: 0; box-shadow: none; color: #818181; font-size: 16px; height: 50px;
}
textarea { color: white;
}
textarea.form-control { width: 100%; height: 165px; color: white;
}
#submit:hover { color: #fff;
}
#submit:before { background-color: #0A85BB;
}
#submit.btn-effect:after { background: #2E2E2E;
}
.contact-details h3 { font-weight: 700; margin-bottom: 15px; padding-bottom: 15px; text-transform: uppercase;
}
.contact-details p { line-height: 30px;
}
.contact-details p i { margin-right: 10px;
}
.contact-details span { display: block; margin-left: 24px; width: 100%;
}
.address-info { display: inline;
}
.address { display: inline; float: left;
}
.contact { padding-right: 30%; padding-left: 5%;
}
#contact { width: 100%; padding-top: 10%; color: white; font-size: 2.0em;
}
.form-control { background-color: transparent; color: white;
}
.input-field { color: white;
}
input .form-control { color: white; background-color: white;
}
textarea::-webkit-input-placeholder { color: white !important;
}
input::-webkit-input-placeholder { color: white !important;
}
input:-moz-placeholder { /* Firefox 18- */ color: white !important;
}
input::-moz-placeholder { /* Firefox 19+ */ color: white !important;
}
input:-ms-input-placeholder { color: white !important;
}
#message { width: 100%; padding-right: 100px;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill1 { background: linear-gradient( rgba(20, 20, 20, .3), rgba(20, 20, 25, .25)); width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; overflow-x: hidden;
}
.fill1{ background: url("http://res.cloudinary.com/mikeotis/image/upload/v1500499586/bg_da1tdx.jpg") no repeat;
}
.fill3 { background: linear-gradient( rgba(20, 20, 20, .3), rgba(20, 20, 25, .25)), url('../contact.jpg'); width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; overflow-x: hidden;
}
.fill2 { background: linear-gradient( rgba(20, 20, 20, .3), rgba(20, 20, 25, .9)); background:url("http://res.cloudinary.com/mikeotis/image/upload/v1500499586/bg_da1tdx.jpg"); width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; overflow-x: hidden;
}
header { width: 100%; height: 100%;
}
/***************************************************************FOOTER************************************************************************/
footer { background-color: #131331;
}
footer .social li a { color: #999; font-size: 1.75em; display: inline;
}
footer ul { list-style: none; margin: 0; padding-right: 120px;
}
footer li { float: right; text-align: center; padding: 14px; padding-right: 20px;
}
.copyright p { display: inline; padding-left: 120px; font-size: 2.5em; color: white; font-family: 'Amatica SC', cursive; background-color: transparent;
}
.social-link-row { background-color: transparent; padding: 0px;
}
/***************************************************************FONTS************************************************************************/
/*================================================== Media Queries
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) { h3#main { width: 80%; text-align: center; margin-left: 0 auto; margin-right: 0 auto; } .jumbotron { width: 100%; text-align: center; } h1.intro { width: 80%; text-align: center; } .fa { font-size: 30px; } p.author { text-align: left; display: block; font-weight: bold; } .icon { padding-top: 30px; font-size: 90px; } .services-header { text-align: center; } .service-paragraph { text-align: center; }
}
/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) { h3#main { width: 80%; text-align: center; }
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) { h3#main { width: 80%; text-align: center; padding-right: 200px; } h1.intro { padding-right: 100px; }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) { footer li { padding: 0; } .copyright p { padding-left: 10%; } .row { margin: 0; padding: 0; } .social-links li a { padding-right: 2px; padding-left: 4px; } .social-links { width: 100%; padding: 0; } .social-link-row { width: 100%; padding: 0; } .social-links li {} .social { padding-right: 30%; } .services { width: 100%; }
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) { footer li { padding: 0; } .author { display: inline; width: 100%; } .row { margin: 0; padding: 0; } .social-links li a { padding-right: 2px; padding-left: 4px; } .social-links { width: 100%; padding: 0; margin-left: auto; margin-right: auto; } .social-link-row { width: 100%; padding: 0; } .social-links li {} .social {} .services { width: 100%; } footer ul {}
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) { footer li { padding: 0; } .copyright p { padding-left: 10%; } .row { margin: 0; padding: 0; } .social-links li a { padding-right: 2px; padding-left: 4px; } .social-links { width: 100%; padding: 0; } .social-link-row { width: 100%; padding: 0; } .social-links li {} .social { padding-right: 30%; } .services { width: 100%; } h1 {} h1 { font-size: 2.5rem; }
The HTML version of my website - Script Codes
The HTML version of my website - Script Codes
Home Page Home
Developer Mike Otis
Username mikeotis
Uploaded February 01, 2023
Rating 3
Size 7,126 Kb
Views 2,024
Do you need developer help for The HTML version of my website?

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!

Mike Otis (mikeotis) Script Codes
Name
Star-wars slider
3 pages in One Website
A share button
A copy of the Trent-Walton website. Practicing responsive webdesign. Its kinda responsive. I bet if I would of spent more time on this it would of
Codeconquest fake website.
The Google Home page
Pro hack advertisement
A replica of the good work website
Fake-book
A simple button using hover.
Create amazing video scripts 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!