Skip to content

Instantly share code, notes, and snippets.

@abdurraufahmad

abdurraufahmad/index.html

Created July 27, 2019 17:04
Show Gist options
  • Save abdurraufahmad/7ce580992ff5ecbe70fb41be81a6c3b6 to your computer and use it in GitHub Desktop.
Save abdurraufahmad/7ce580992ff5ecbe70fb41be81a6c3b6 to your computer and use it in GitHub Desktop.
Download ZIP
Washington State Skills USA 2017
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>DeSight: Home</title>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="index.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="toppane">
<h1 id="home">DeSight Web Design</h1>
<ul id="navigationpane">
<a href="#home" class="bannerlink">
<li>Home </li>
</a>
<a href="#about" class="bannerlink">
<li>About Us </li>
</a>
<a href="#portfolio" class="bannerlink">
<li>Portfolio </li>
</a>
<a href="#contact" class="bannerlink">
<li>Contact </li>
</a>
<a href="#pages" class="bannerlink">
<li>NEW </li>
</a>
</ul>
</div>
<div id="underTopPane">
<div class="section" id="divAbout">
<h2 id="about">About Us</h2>
<p>DeSight Web Design is a web design business enthusiastic about helping <i>you</i> with your web design needs. The skilled founders of DeSight Web Design have been happily working in the web design industry for years! We are able to make aesthetically
pleasing and customizable websites to serve any purpose for our clients, for instance, for business purposes or individual purposes. We have successfully made and have been praised for blogs, online stores, and business websites in the past, and
we look forward to serving you in the near future! To make inquiries, locate the <a href="#contact">CONTACT</a> section of our website and give us a call or send an email.</p>
</div>
<div class="section" id="divPortfolio">
<h2 id="portfolio">Portfolio</h2>
<p>DeSight has created many websites for clients in the years it has been active. Some of these are on display below by access through links and through pictures of the completed sites. Examples of past creations include:</p>
<!--These websites aren't actually mine, I just needed examples. I don't know the legal system well enough to know whether I can be prosecuted for falsely claiming other's websites as my own in name of a fake company I created for a web design competition... BUT LET IT BE SAID here that I, Karanina Zim, DO NOT CLAIM ANY OF THESE WEBSITES AS MY OWN. Please don't sue me.-->
<ol id="portList">
<li>The website of the School District Spokane Public Schools resides here: <a href="http://www.spokaneschools.org/Page/1" target="_blank">Spokane Public School District Website</a></br>
<a href="http://riotfest.org/" target="_blank"><img src="Image1.png" alt="This is a picture of the Spokane Public School District Website." height="200" /></a>
</li>
<li>The website of the renowned band Yellowcard lives here: <a href="http://yellowcardrock.com/" target="_blank">Yellowcard 1997-2017 Website</a></br>
<a href="http://riotfest.org/" target="_blank"><img src="Image2.png" alt="This is a picture of the Yellowcard 1997-2017 Website." height="200" /></a>
</li>
<li>The website of the Chicago Music Festival <i>Riot Fest</i> lives here: <a href="http://riotfest.org/" target="_blank">Riot Fest Website</a></br>
<a href="http://riotfest.org/" target="_blank"><img src="Image3.png" alt="This is a picture of the Riot Fest Website." height="200" /></a>
</li>
</ol>
</div>
<div class="section" id="divContact">
<h2 id="contact">Contact</h2>
<p>To make an inquiry, contact our business using one of the methods below.</p>
<table id="tabContact">
<thead>
<tr>
<th scope="col" colspan="4">DeSight Company Web Design Contact</th>
</tr>
<th scope="col">Company Branch</th>
<th scope="col">Phone Number</th>
<!--I thought of the phone numbers using acronyms such as "1-NO-CALL" and "PLS DONT". Please do not call the phone numbers or contact the email addresses because I have no idea if they are valid or not, and if they are, who they belong to.-->
<th scope="col" colspan="2">Email Address</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Business Websites</th>
<td rowspan="2">(858) 166-2255</td>
<td colspan="2">[email protected]</td>
</tr>
<tr>
<th scope="row">Online Stores</th>
<!--The above phone number also spans here.-->
<td colspan="2">[email protected]</td>
</tr>
<tr>
<th scope="row">Blogs</th>
<td rowspan="2">(858) 757-3668</td>
<td colspan="2">[email protected]</td>
</tr>
<tr>
<th scope="row">Other/Personal</th>
<!--The above phone number will span here.-->
<td colspan="2">[email protected]</td>
</tr>
<tr>
<th scope="row">International</th>
<td>n/a</td>
<td colspan="2">[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Office:</th>
<!--The following address does not exist.-->
<td colspan="2">1342 Web Sigh Street, San Diego, CA 92130</td>
<td> 9AM-6PM Daily</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="section" id="divButton">
<h2 id="pages">NEW Navigation Bar</h2>
<p>Our creative developers are always thinking outside of the box when they create website. One recent idea involves a <i>single-paged</i> website. </br>Who needs multiple paged websites when you have the new <i><em>ALTERNATIVE FORMAT</i></em> website?
A website with this alternative format consists of only one page (like so!) and takes on a new type of navigation bar that uses JQuery and JavaScript to show you only what you want to see! Try the demo of the Navigation Bar here.</p>
<button id="showHome">Home</button>
<button id="showAbout">About Us</button>
<button id="showPortfolio">Portfolio</button>
<button id="showContact">Contact</button>
</div>
<p>Brought to you by the Ferris High School Web Design Team consisting of Karanina Zim. 2017</p>
</body>
</html>
Raw
script.js
$(document).ready(function() {
$("#showHome").click(function() {
$("#toppane").show();
$(".section").show();
});
});
$(document).ready(function() {
$("#showAbout").click(function() {
$(".section").hide();
$("#toppane").hide();
$("#divButton").show();
$("#divAbout").show();
});
});
$(document).ready(function() {
$("#showPortfolio").click(function() {
$(".section").hide();
$("#toppane").hide();
$("#divButton").show();
$("#divPortfolio").show();
});
});
$(document).ready(function() {
$("#showContact").click(function() {
$(".section").hide();
$("#toppane").hide();
$("#divButton").show();
$("#divContact").show();
});
});
Raw
style.css
* {
text-align: center;
box-sixing: border-box;
}
body {
background-image: -webkit-linear-gradient(#FFF, #9cf);
}
p,
ul,
ol,
table {
font-family: 'Slabo 27px', serif;
color: #90C;
font-weight: bold;
}
h1,
h2 {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
color: #090;
}
#aroundTopPane {
width: 100%;
}
#toppane {
text-align: center;
font-family: 'Ubuntu', sans-serif;
color: #090;
background-color: #c6f;
background-color: rgba(204, 102, 255, 0.6);
border: 4px dotted #090;
border-radius: 35%;
width: 75%;
margin: auto;
}
#navigationpane {
list-style-type: none;
}
#portList {
line-height: 2em;
}
table,
tabContact,
td,
th,
tr {
border: 5px solid #ff9;
border-radius: 5%;
text-align: center;
margin: auto;
color: #f66;
background-color: #fff;
}
td {
font-style: italic;
}
.bannerlink {
font-size: 20px;
color: #fff;
background-color: #6cf;
display: inline-block;
margin: 10px;
border: 2px dashed #FFF;
padding: 3px 15px;
}
bannerlink:hover {
background color: #6f6;
}
a:link {
color: #FFF;
}
a:visited {
color: #90C;
}
.section {
max-width: 100%;
overflow: scroll;
padding: 25px;
margin: 25px;
border: 4px dotted #FFF;
border-radius: 20%;
}
#divAbout,
#divContact {
background-color: #9f6;
background-color: rgba(153, 255, 102, 0.6);
}
#divPortfolio,
#divButton {
background-color: #f9c;
background-color: rgba(255, 153, 204, 0.6);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment