Portfolio Trial 1

Developer
Jimmy Lin
Size
3,730 Kb
Views
12,138

How do I make an portfolio trial 1?

What is a portfolio trial 1? How do you make a portfolio trial 1? This script and codes were developed by Jimmy Lin on 10 December 2022, Saturday.

Portfolio Trial 1 Previews
IQ Test

Portfolio Trial 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Trial 1</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</header>
<!-- Navbar -->
<div class="text-center navbar-inverse navbar-fixed-top" > <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="scrollTo navbar-brand name" data-scrollTo="Top" href="#" > Jimmy Lin </a> <nav class="collapse navbar-collapse navbar-inverse navbar-right navHeaderCollapse" role="navigation"> <ul class="nav navbar-nav navbar-right" id="menu" role="navigation"> <li><a class="scrollTo" data-scrollTo="Top" href="#">Home</a></li> <li><a class="scrollTo" data-scrollTo="About" href="#">About</a></li> <li><a class="scrollTo" data-scrollTo="Portfolio" href="#">Portfolio</a></li> <li><a class="scrollTo" data-scrollTo="Contact" href="#">Contact</a></li> <li><a class="scrollTo" data-scrollTo="Sign-Up" href="#">Sign Up</a></li> </ul>
</nav>
</div> <!-- Page Starts-->
<div class="pageOne text-center" id="Top"> <br> <br> <h1>Lorem Ipsum</h1> <div class = "row"> <div class = "col-xs-2"> </div> <div class= "col-xs-8"> <h2 class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute</h2> </div> <div class= "col-xs-2"> </div> </div>
</div>
<div class="bg-3 pageTwo text-center" id="About"> <br> <br> <h1>About</h1> <div class = "row"> <div class = "col-xs-2"> </div> <div class= "col-xs-8"> <h2 class="">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2> </div> <div class= "col-xs-2"> </div> </div>
</div>
<div class="pageThree text-center responsive" id="Portfolio"> <br> <br> <h1>Portfolio</h1> <div class="row"> <div class="col-xs-1"> </div> <div class="col-xs-5"> <div class="thumbnail"> <a href="#"> <h4>Lorem Ipsum</h4> <img class="img-responsive img-rounded img-thumbnail" src="http://lorempixel.com/400/200/food"> <div class="caption"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </a> </div> </div> <div class="col-xs-5"> <div class="thumbnail"> <a href="#"> <h4>Lorem Ipsum</h4> <img class="img-responsive img-rounded img-thumbnail" src="http://lorempixel.com/400/200/city"> <div class="caption"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </a> </div> </div> <div class="col-xs-1"> </div> <div class="row"> <div class="col-xs-1"> </div> <div class="col-xs-5"> <div class="thumbnail"> <a href="#"> <h4>Lorem Ipsum</h4> <img class="img-responsive img-rounded img-thumbnail" src="http://lorempixel.com/400/200/fashion"> <div class="caption"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </a> </div> </div> <div class="col-xs-5"> <div class="thumbnail"> <a href="#"> <h4>Lorem Ipsum</h4> <img class="img-responsive img-rounded img-thumbnail" src="http://lorempixel.com/400/200/nightlife"> <div class="caption"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </a> </div> </div> <div class="col-xs-1"> </div> </div> </div>
<div class="pageFour text-center" id="Contact"> <br> <br> <h1>Contact</h1> <br> <h2>Lorem ipsum</h2> <h2>Lorem [email protected]</h2> <h2>Lorem ipsum.twitter</h2> <h2>Lorem ipsum.facebook</h2> <h2>Lorem ipsum.github</h2> <h2>555-555-5555</h2>
</div>
<!-- Mail --> <div class="sign-up row"> <div id="Sign-Up"> <form action="#" method="POST" name="mailingList" style="background:#212121;"> <div class= "row"> <div class = "col-xs-12"> <h1>Sign up for a complimentary 30 minute session</h1> </div> </div> <div class="row"> <div class= "col-xs-12 col-sm-4"> <span> <label for = "name">Name</label> <input class="basic-slide" id="name" name="name" type="text" placeholder="Your preferred name" required> </span> </div> <div class="col-xs-12 col-sm-4"> <span> <label for="email">Email</label> <input class="basic-slide" id="email" name="email" type="email" placeholder="Your favorite email" required> </span> </div> <div class="col-xs-12 col-sm-4"> <div class="btn"> <input type="submit" name="submit" value="Submit" class="submit-button"> </div> </div> </div> </form> </div> </div>
<div id="footer"> <div class="navbar-inverse"> <p class="text-muted">Loreum Ipsum<a href"#"></a></p> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Trial 1 - Script Codes CSS Codes

body { color: white; font-family:lobster;
}
.navbar-brand { padding: 10px 0; border: none; margin-bottom:0;
}
.navbar-inverse { padding: 10px 0; border: none; margin-bottom:0;
}
.name { font-family:lobster; font-size: 40px; margin-left:20px; margin-top:10px;
}
.navbar-nav{ font-family:lobster; font-size: 25px; color: white; margin-right:20px;
}
.pageOne { background:url(https://wallpaperscraft.com/image/laptop_black_yellow_light_32932_2560x1440.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #212121; background-size: cover; height:650px; margin-top: -300px;
}
.pageTwo { background:url(http://wallpapercave.com/wp/tHxS8my.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #212121; background-size: cover; height:650px;
}
.pageThree { background:url(http://www.officialpsds.com/images/stocks/Dark-night-stock4938.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #212121; background-size: cover; height:800px;
}
.pageFour { background:url(http://www.changewallpaper.com/cache/Technology/Technology-technologyHD-wallpaper-15_1920.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #212121; background-size: cover; height:600px; margin-top: -4px;
}
.pageOne { margin-top:80px;
}
h1{ padding:0; margin-top:0px;
}
.row{ padding:20px;
}
.text-muted { margin-left:20px;
}
.bg-3 {	background: url('http://www.bootply.com/assets/example/bg_6.jpg') no-repeat center center fixed; -webkit-background-size: cover;	-moz-background-size: cover;	-o-background-size: cover;	background-size: cover;
}
.sign-up { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #212121; background-size: cover; height:400px;
}
.basic-slide { height: 50px;
}
.submit-button { height: 50px; width: 90px;
}

Portfolio Trial 1 - Script Codes JS Codes

$('a.scrollTo').on('click', function(){ var scrollTo = $(this).attr('data-scrollTo'); $('body, html').animate({ "scrollTop": $('#'+scrollTo).offset().top-80}, 400); return false;
});
$(document).ready(function() { $('body').addClass('js'); var $menu = $('#menu'), $menulink = $('.menu-link');
$menulink.click(function() { $menulink.toggleClass('active'); $menu.toggleClass('active'); return false;
});});
$('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide');
});
Portfolio Trial 1 - Script Codes
Portfolio Trial 1 - Script Codes
Home Page Home
Developer Jimmy Lin
Username odylic
Uploaded December 10, 2022
Rating 3
Size 3,730 Kb
Views 12,138
Do you need developer help for Portfolio Trial 1?

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!

Jimmy Lin (odylic) Script Codes
Name
Tic Tac Toe Game
Twitch JSON API
Wikipedia Viewer
Portfolio Template
Mark Down Previewer
TwitchTV JSON API 2
Random Quote Generator
Simon Game
Calculator
Firefly tribute
Create amazing captions 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!