Naelekya Bledsoe's Resume Page<title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="resumeProfile.css" media="all"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function)() { $("#logo").addClass("animated"); )}; </script> </head> <body id="wrapper"> <div id="lead"> <section id="leadBox"> <div class="textBox"> <p class="leadText">"Thank you, for taking the time to view my resume "</p> <p class="note">PLEASE NOTE: Links on this page will react on hover.</p> </div> </section> </body> </html> <!-- /* #072629 21034f 333333*/ /* COLOR PROFILE acacac grey rgb(39, 170, 225 aqua dark #27AAE1 rgb(33, 3, 79) dark purple*/ /*FONTS onyx */ /* COLOR PROFILE grey- html acacac- grey rgb(39, 170, 225 aqua dark rgba(0, 0, 51, .8) dark purple*/ /*FONTS onyx */ /*********************LEAD************************ #lead { width:100%; height:15%; position:fixed; background-color:rgb(39, 170, 225); z-index:30; left:0; } #leadBox{ width:100%; height:15%; position:absolute; top:-1em; } .leadText{ font-family: Arial Narrow, Myraid Pro, san-serif; font-size: 1.5em; display:block; position:relative; letter-spacing:.05em; text-align:center; } .note { font-family: Arial Narrow, Myraid Pro, san-serif; font-size: 1em; display:block; position:relative; top:-.5em; transition:all .2s ease-in-out; text-align:center; } .note:hover { transform:scale(1.1); text-shadow:.5em .5em 1em rgb(0, 0, 51); } /*********************HEADER******************************//* header { display: block; top:5.5em; width:67em; height: 14em; background-color:#fff; position:relative; margin:0 auto; box-shadow:1em 1em 2em black; } .name { font-family: Times Header; font-size:4em; display: block; position: relative; top:-7.15em; z-index:28; font-variant: small-caps; left:2.75em; } .address { position:relative; display:block; font-family:Myriad Pro; font-size:1em; color:rgb(0, 0, 51); top:-32.5em; left:15.25em; } /*********************LOGO ASIDE******************************//* #logo { display:block; width:13em; height: 13em; float:left; position:relative; top:1em; left:0; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; transition: all 2s cubic-bezier(0.950, .50, 0.795, 0.035); transition-delay: -.75s; } #logo:hover{ transform:rotateY(360deg); } .animated{ transform: rotateY(-720deg) } .header_b { position: relative; display: block; width:65em; height: 12em; top:-12.5em; z-index: 6; left:2em; } /*********************SOCIAL MEDIA******************************//* #social { display:block; position:absolute; right:0; top:1em; width:279px; height:230px; z-index:12; } .socialMedia{ display:block; position:relative; top:5px; left:.25em; width:2.15em; height:12em; } .socialText { display:block; position:relative; top:-10em; left:2.75em; width:5.75em; height:12em; } a { text-decoration:none; transition:all .2s ease-in-out; } a:hover { transform:scale(1.1); text-shadow:.5em .5em 1em rgb(0, 0, 51); } .text1 { display:block; position:relative; top:-20px; width:100px; height:20px; font-family:Myriad Pro; text-decoration:none; } .text2 { display:block; position:relative; top:-10px; width:100px; height:20px; font-family:Myriad Pro; } .text3 { display:block; position:relative; top:5px; width:100px; height:20px; font-family:Myriad Pro; } .text4 { display:block; position:relative; top:22px; width:100px; height:20px; font-family:Myriad Pro; } .text5 { display:block; position:relative; top:34px; width:100px; height:20px; font-family:Myriad Pro; } /*********************MAIN******************************//* main{ position: relative; top:23em; width:64em; height: 40%; margin:0 auto; background-color:#fff; z-index: 1; } /*SECTION PROFILE*//* #profile{ width:63em; height: 5%; position:absolute; border:1em solid green; } .profile{ display: block; width:45em; position: relative; height: 4%; top: 2em; left:3em; z-index: 21; font-family: myriad Pro, san-sarif; font-variant: small-caps; font-size:1.5em; } .profileboarder{ display: block; position: relative; top:-15.5em; left:4em; z-index: 20; } /*SECTION SKILL*//* #skillsCore{ width:63em; height: 9%; top:20em; position:absolute; border:1em solid green; */ /* @font-face { font-family: 'onyx'; src: url('_fonts/onyx-Regular-webfont.eot'); src: url('_fonts/onyx-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('_fonts/onyx-Regular-webfont.woff') format('woff'), url('_fonts/onyx-Regular-webfont.ttf') format('truetype'), url('_fonts/onyx-Regular-webfont.svg#webfont9UOzsjXz') format('svg'); font-weight:normal; font-style:normal; } #wrapper { background-color:grey; width:100%; margin-right:0; margin-left:0; } #lead { background-color:rgb(0, 0, 30); width:1060px; height:1250px; margin: 1em 25em 4em; } #leadBox { width:100%; display:block; height:7em; position:fixed; top:0; left:0; background-color:rgb(39, 170, 225); box-shadow:1em 1em 2em black; border-top:1em solid black; } .textBox { width:inherit; height:100px; position:absolute; } .leadText { font-family:Myraid Pro, san-serif; font-size:3em; color:#21034F; text-align:center; margin-top:0.5em; position:relative; } .note { display:block; font-family: blakel Myriad Pro, san-serif; font-size:12px; color:#21034F; text-align:center; letter-spacing:.10em; font-weight:bold; position:relative; top:-2em; } /* header{ position:fixed; top:9.20em; width:1360px; height:27%; background-color:#fff; z-index:29; } div { position:absolute; } /********2ND TRY MOVING PAGE ELEMENTS**************LEAD**************************************/ /* .leadText { position:relative; display:block; font-size:3em; font-weight:bold; top:-.5em; left:5.35em; z-index:30; text-shadow: -0.02em -.05em .10em #fff; } #lead .note { display:block; position:relative; width:45em; top:-1.5em; font-weight:bolder; letter-spacing:.10em; left:17.5em; z-index:31; font-size:1.5em; } #leadspan { display:block; font-size:1.15em; } /**********************HEADING**************************************/ /* * #header .logoBox { width:15em; position:absolute; height:15em; z-index:34; top:-5em; float:left; } #header .name { position:relative; top:-6.70em; left:4em; font-size:3.5em; font-family:onyx, Ariel Narrow, san-serif; letter-spacing:0.070em; width:30em; font-variant:small-caps; } #logo { z-index:36; position:relative; width:15em; height:15em; top:6em; } .header_b { display:block; position:relative; top:-9em; width:75em; height:75%; z-index:37; left:10em; } .address{ display:block; position:relative; top:-19.5em; left:17.5em; width:30em; font-size:1.25em; font-family: Myriad Pro, Ariel Narrow, san-serif; z-index:42; } /*********WRAPPER***********/ /* #wrapper { position:absolute; width:85em; height:175%; left:17.50em; top:25.35em; background-color:#f45; text-align:center; z-index:10; } */ /* TEXT */ /***********PARAGRAPGH STYLE*********************************** NAME-onyx 1.5em #21034F ADDRESS-Myriad Pro semibold fill:#21034F outline:#27AAE1 BODY TEXT-Myriad Pro regular black TITLE- Myriad Pro *************************************************/ /* body { display:block; top:1em; width:65em; height:1000em; left:3.75em; position:relative; background-color:rgba(0, 0, 51, .8); left:10%; } #lead { width:65em; height: 15%; position: fixed; background-color:rgb(39, 170, 225); z-index: 29; text-align: center; } header { display: block; position:absolute; top:10.70em; width:65em; height: 14em; background-color:#fff; position:fixed; z-index: 30; } .logoBox{ z-index: 12; } #logo{ width:13em; height: 13em; float:left; position:relative; top:31em; left:0; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; transition: all 2s cubic-bezier(0.950, .50, 0.795, 0.035); transition-delay: -.75s; } #logo:hover{ -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -o-transform:rotateY(360deg); transform:rotateY(360deg); } .animated{ -webkit-transform: rotateY(-720deg); -o-transform: rotateY(-720deg); -moz-transform: rotateY(-720deg); transform: rotateY(-720deg) } .name{ font-family: onyx; font-size:3.5em; display: block; position: relative; top:-4.15em; padding-left:3.5em; z-index:8; font-variant: small-caps; letter-spacing:.05em; } .boarder { position: relative; display: block; width:54em; height: 9em; top:2em; left:11em; z-index: 6; padding-top:-9em; position: absolute; margin:0; } main{ position: relative; top:23em; width:64em; height: 40%; margin:0 auto; background-color:#fff; z-index: 10; } /*SECTION PROFILE*/ /*#profile{ width:63em; height: 5%; position:absolute; } .profile{ display: block; width:45em; position: relative; height: 4%; left:3em; z-index: 21; font-family: myriad Pro, san-sarif; font-variant: small-caps; font-size:1.5em; } .profileboarder{ display: block; position: relative; top:-15.5em; left:4em; z-index: 20; } /*SECTION SKILLS*/ /* #skills{ position: absolute; display: block; width:55em; top:13em; left:4em; } .skillsText{ font-family: myriad Pro, san-sarif; font-variant: small-caps; font-size:1.5em; position:relative; top:1em; left:-2em; } .skillsBoarder { position:relative; width:62em; left:-5.5%; top:.10em; } */ </style> <!docTYPE html> <html> <head> <title>Naelekya Bledsoe Resume