Tristen-Autobiography

Size
3,878 Kb
Views
14,168

How do I make an tristen-autobiography?

What is a tristen-autobiography? How do you make a tristen-autobiography? This script and codes were developed by Digital Accessibility on 04 December 2022, Sunday.

Tristen-Autobiography Previews

Tristen-Autobiography - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tristen-Autobiography</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles.css" rel="stylesheet" type="text/css"/>
<script src="tabs.js"></script>
<title>
My Autobiography
</title>
</head>
<body>
<header>
<h1>Tristen E. Breitenfeldt</h1>
<nav aria-label="tab bar">
<div id="tabs">
<ul id="tabs" > <li class="tab" id="tab1"><a href="index.html" tabindex="0" role="link" accesskey="i" aria-selected="false">
Main
</a></li> <li class="tab" id="tab2" aria-selected="true">
Autobiography
</a></li> <li class="tab" id="tab3"><a href="guidingprinciples.html" tabindex="0" role="link" accesskey="g" aria-selected="false">
My Guiding Principles
</a></li> <li class="tab" id="tab4"><a href="learningoutcomes.html" tabindex="0" role="link" accesskey="l" aria-selected="false">
Learning Outcomes
</a></li> <li class="tab" id="tab5"><a href="comprehensiveproject.html" tabindex="0" role="link" accesskey="p" aria-selected="false">
Comprehensive Project
</a></li> <li class="tab" id="tab6"><a href="resume.html" tabindex="0" role="link" accesskey="r" aria-selected="false">
Resume
</a></li> <li class="tab" id="tab7"><a href="worksamples.html" tabindex="0" role="link" accesskey="w" aria-selected="false">
Work Samples
</a></li>
</ul>
</div>
</nav>
</header>
<main>
<h2>Autobiography</h2>
<p>Since Tristen has been visually impaired since birth, there has always been a silent expectation that she would someday teach blind children. However, after floundering through one year of a special education teacher prep program,
she realized that her true calling was not teaching children with visual impairments, but rather ensuring access to college students of all abilities. Shortly after transferring into PACE, Tristen was offered a student job as an eLearning accessibility tester in the Office of Academic Innovation. Secure
with meaningful employment and learning about adult education, Tristen began noticing linkages between theories discussed in class and her work. After a couple of months of contemplation, Tristen realized that she had found her true calling—accessible eLearning design for everybody.
</p>
</main>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Tristen-Autobiography - Script Codes CSS Codes

body {
max-width: 2000px; /* It's always a good idea to set a maximum value for where your design will break, in case someone is looking on a really large display, like a projector. */ background-color: #F8F7F7 ; color: #000000;	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	font-size: 1.2em; margin: 2em;
}
nav { text-align: center; background-color: #DFE9F0; color: #000001; border-radius: 20px;	border: 1px solid #B5C0C7;	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); display: block;	margin: 0em 0em 3em 0em; list-style: none; padding: .5em; font-weight: 600;
}
nav li { display: inline; list-style-type: none;
}
nav a { text-decoration: none; display:inline-block;
/* line-height: 1em; padding: 1em; */
}
h1, h2, h3 {
text-align: center;
}
h3 {
text-align: left; border-bottom: 1px dotted grey; padding-top: 1em; font-variant: small-caps; color: #000060;
}
h4, h5, h6 {
text-align: left; padding-top: .5em;
}
#nav2 li {
margin: 0;
padding: 0;
list-style-type: none;
}
a:link {
color: #0066CC;
}
a:visited { color: #800080; /* purple */
}
nav a:focus, nav a:hover {
/* text-decoration: none; border: 2px solid #000080; border-radius: 10px; padding: .5em; font-weight: 600;*/ background-color: #DFE9F0; color: #000080; outline: 2px solid #000080; outline-offset: .5em;
}
a:hover { text-decoration: none; color: white; background-color: navy;
}
nav li~li { border-left: 1px solid #000080; padding: 0em .5em 0em .5em;
}
.credentials { float: right; background-color: #E2E4E6;	border: 1px solid #AAABAD; border-radius: 8px; padding: .5em; margin: 2em 1em 1em 1em; font-size: 1.05em; width: 30%;
}
img { float: left; border: 1px solid #AAABAD; margin: 1em; width: 40%; height: auto;
}
blockquote { margin: .5em;
}
.contact { padding: 1em 0em 1em 0em; margin-bottom: 2em; text-align: center; border-top: 1px solid #B7B7B7; border-bottom: 1px solid #B7B7B7; background-color: #F4F4F4;
}
/* For printing: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/ */
@media print { nav {
display: none;
}
}

Tristen-Autobiography - Script Codes JS Codes

window.onload=function() { // get tab container var container = document.getElementById("tabContainer"); // set current tab var navitem = container.querySelector(".tabs ul li"); //store which tab we are on var ident = navitem.id.split("_")[1]; navitem.parentNode.setAttribute("data-current",ident); //set current tab with class of activetabheader navitem.setAttribute("class","tabActiveHeader"); //hide two tab contents we don't need var pages = container.querySelectorAll(".tabpage"); for (var i = 1; i < pages.length; i++) { pages[i].style.display="none"; } //this adds click event to tabs var tabs = container.querySelectorAll(".tabs ul li"); for (var i = 0; i < tabs.length; i++) { tabs[i].onclick=displayPage; }
}
// on click of one of tabs
function displayPage() { var current = this.parentNode.getAttribute("data-current"); //remove class of activetabheader and hide old contents document.getElementById("tabHeader_" + current).removeAttribute("class"); document.getElementById("tabpage_" + current).style.display="none";
var ident = this.id.split("_")[1]; //add class of activetabheader to new active tab and show contents this.setAttribute("class","tabActiveHeader"); document.getElementById("tabpage_" + ident).style.display="block"; this.parentNode.setAttribute("data-current",ident);
} //Show and hide divs
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display="none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
Tristen-Autobiography - Script Codes
Tristen-Autobiography - Script Codes
Home Page Home
Developer Digital Accessibility
Username digitalaccessibility
Uploaded December 04, 2022
Rating 3
Size 3,878 Kb
Views 14,168
Do you need developer help for Tristen-Autobiography?

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!

Digital Accessibility (digitalaccessibility) Script Codes
Create amazing blog posts 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!