Portfolio Trial 1
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 - 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');
});
Developer | Jimmy Lin |
Username | odylic |
Uploaded | December 10, 2022 |
Rating | 3 |
Size | 3,730 Kb |
Views | 12,144 |
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 |
Random Quote Generator | 2,674 Kb |
Wikipedia Viewer | 2,333 Kb |
TwitchTV JSON API 2 | 2,691 Kb |
Simon Game | 3,485 Kb |
Calculator | 2,544 Kb |
Twitch JSON API | 2,556 Kb |
Pomodoro Clock | 2,384 Kb |
Portfolio Template | 2,581 Kb |
Firefly tribute | 2,476 Kb |
Mark Down Previewer | 3,062 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 |
Funny menu | AxeLVaisper | 4,671 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
DNA Double Helix | Hugo | 5,112 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!