Testing Portfolio Page

Developer
Xiaozhou Li
Size
3,395 Kb
Views
133,584
  1. Testing Portfolio Page Previews
  2. Testing Portfolio Page HTML Codes
  3. Testing Portfolio Page CSS Codes
  4. Testing Portfolio Page JS Codes

How do I make an testing portfolio page?

What is a testing portfolio page? How do you make a testing portfolio page? This script and codes were developed by Xiaozhou Li on 26 November 2022, Saturday.

Testing Portfolio Page Previews
IQ Test

Testing Portfolio Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Testing Portfolio Page</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navbar bg-faded navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">A PORTFOLIO TESTING</a> </div> <ul class="nav navbar-nav navbar-right"> <li class="active menuitem"><a href="#intro">INTRO</a></li> <li class="menuitem"><a href="#portfolio">PORTFOLIO</a></li> <li class="menuitem"><a href="#contact">CONTACT</a></li> </ul> </div>
</nav>
<div class="container title" id="intro"> <div class="row"> <div class="col-sm-8"> <h1 class="display-3">Sylvanas Windrunner</h1> <p class="lead">Sylvanas Windrunner is a fictional character who appears in the Warcraft series of video games by Blizzard Entertainment. Originally introduced in Warcraft III: Reign of Chaos, the character received a redesign in World of Warcraft: Legion to her current appearance. Once a high elf ranger, Sylvanas was murdered by Arthas Menethil who ripped her soul out and transformed it into a banshee; an agent of the Lich King empowered by hate. She was later able to regain her free will and body and founded the Forsaken faction of undead; vowing to avenge her death, they set out to wage war against the Scourge, undead forces under the control of the Lich King. As of Patch 7.0.3, Sylvanas Windrunner is the Warchief of the Horde. Also styled and known as the "Dark Lady" and the "Banshee Queen", the character has become one of the most iconic and noted characters in Warcraft lore, and has received generally positive critical reception from gamers. Sylvanas has been voiced by Patty Mattson since World of Warcraft patch 3.2. Prior to that, she was voiced by Piera Coppola.</p> <p class="lead"> <a class="btn btn-primary btn-lg" target="_blank" href="http://us.battle.net/heroes/en/heroes/sylvanas/" role="button">Learn more</a> </p> </div> <div class="col-sm-4"> <img src="http://www.yookomika.fr/wp-content/uploads/2015/08/moarSylvanas.jpg" id="img1"> </div> </div>
</div>
<div class="container title" id="portfolio"> <div class="row"> <div class="col-sm-8"> <h1 class="display-3">Portfolio</h1> </div> </div> <div> <img src="http://wallpapercave.com/wp/ZKR9aKt.jpg" class="showpic"> <img src="http://wallpapercave.com/wp/9sNknw3.jpg" class="showpic"> <img src="http://www.wallpaperup.com/uploads/wallpapers/2013/04/05/70894/cca50a16b7e9734bc8db1213e4f5719d.jpg" class="showpic"> </div> <div> <img src="http://www.wallpapersxl.com/get/6107223" class="showpic"> <img src="http://orig02.deviantart.net/9ab1/f/2013/022/3/4/sylvanas_wallpaper_2_by_smirnoff67-d5sbhot.jpg" class="showpic"> <img src="http://www.artsfon.com/pic/201411/1920x1080/artsfon.com-34459.jpg" class="showpic"> </div> <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-360382.jpg" class="showpic"> <img src="https://s-media-cache-ak0.pinimg.com/originals/d2/73/95/d2739502d5f808f632b382f7a3eeb348.jpg" class="showpic"> <picture> <img src="http://wallpaperstyle.com/wallpapers/wow-sylvanas-windrunner/download/1920x1080.jpg" class="showpic"> </picture>
</div>
<div class="container title" id="contact"> <div class="row"> <div class="col-sm-8"> <h3 class="display-3">Contact</h3> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Testing Portfolio Page - Script Codes CSS Codes

.navbar-header{ font-family: 'Aref Ruqaa', serif;
}
#img1{ height: 380px; border-radius: 40px; position: relative; top: 80px;
}
.title{ border-left: 5px solid black; border-right: 5px solid black; font-family: "Playfair Display";
}
#intro{ padding-top: 80px;
}
#portfolio{ padding-top: 40px;
}
#contact{ padding-top: 40px;
}
.showpic{ padding: 0; width:33%; margin: 0 0 3px 0; border-radius: 20px;
}

Testing Portfolio Page - Script Codes JS Codes

$(".menuitem").click(function(){ if(!$(this).hasClass("active")){ $(this).addClass("active"); $(this).siblings().removeClass("active"); }
});
$(".showpic").click(function(){ if($(this).css("width")=='33%'){ $(this).css("width", "100%"); } if($(this).css("width")=="100%"){ $(this).css("width", "33%"); }
});
Testing Portfolio Page - Script Codes
Testing Portfolio Page - Script Codes
Home Page Home
Developer Xiaozhou Li
Username sideshowli
Uploaded November 26, 2022
Rating 3
Size 3,395 Kb
Views 133,584
Do you need developer help for Testing Portfolio Page?

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!

Xiaozhou Li (sideshowli) Script Codes
Name
Testing Tribute Page
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!