Tristen-Autobiography
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 - 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"; }
}
Developer | Digital Accessibility |
Username | digitalaccessibility |
Uploaded | December 04, 2022 |
Rating | 3 |
Size | 3,878 Kb |
Views | 14,168 |
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!
Name | Size |
TEB Updated-OLD2 | 4,547 Kb |
Tristen-Main | 4,335 Kb |
ADA widget | 2,525 Kb |
Tristen-Resume | 6,288 Kb |
Tristen-comprehensive project-OLD | 4,558 Kb |
TEB Updated-OLD3 | 4,537 Kb |
TEB Updated-OLD1 | 4,524 Kb |
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!
Name | Username | Size |
CSS Infinite 360 | APinix | 5,564 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!