Day 1 - Portfolio
How do I make an day 1 - portfolio?
Day 1: 30days 30 sites. What is a day 1 - portfolio? How do you make a day 1 - portfolio? This script and codes were developed by Christian on 15 October 2022, Saturday.
Day 1 - Portfolio - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 1 - Portfolio</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navbar navbar-toggleable-md navbar-light bg-inverse" id="main-nav"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" id="brand-logo" href="#about"> CP </a> <div class="collapse navbar-collapse float-md-right" id="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link text-white" href="#projects-title">Projects</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#contact">Contact</a> </li> </ul> </div> </nav> <main> <section class="jumbotron" id="about"> <h1>Christian Pecson</h1> <p class="lead"> I am a web developer that builds websites with purpose as a hobby. </p> </section> <section id="projects" class="container mb-2"> <h2 id="projects-title">Projects</h2> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="http://lorempixel.com/250/250/abstract" alt="Project 1"> <div class="card-block"> <h4 class="card-title">Project title</h4> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus blanditiis minima omnis eos, deleniti nostrum suscipit reprehenderit incidunt aliquid est iste doloribus facilis ullam qui, atque quae autem porro, quaerat! </p> </div> </div> <div class="card"> <img class="card-img-top" src="http://lorempixel.com/250/250/abstract" alt="Project 2"> <div class="card-block"> <h4 class="card-title">Project title</h4> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea natus quam cum debitis magni enim laborum animi, eaque, quis totam nulla perspiciatis veniam molestias dolore consequatur rerum, ut adipisci dicta. </p> </div> </div> <div class="card"> <img class="card-img-top" src="http://lorempixel.com/250/250/abstract" alt="Project 3"> <div class="card-block"> <h4 class="card-title">Project title</h4> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum vitae dolores aperiam magni necessitatibus esse obcaecati doloremque cupiditate tempora, nostrum et eligendi, optio molestias ipsum, nam deserunt eveniet accusamus ullam! </p> </div> </div> </div> </section> <section id="contact" class="container mb-2"> <h2>Contact</h2> <form> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="message">Message</label> <textarea class="form-control" id="message" rows="3" placeholder="Say hello to me ..."></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </section> </main> <footer id="contact"> <section class="card card-inverse bg-inverse text-white text-center pt-3"> <div class="row"> <div class="col-md-4"> <p class="d-inline-block"> Copyright 2017 © Christian Pecson </p> </div> <div class="col-md-8"> <a class="pr-3 text-white" target="_blank" href="https://www.facebook.com/chpecson"> <i class="fa fa-facebook fa-2x"></i> </a> <a class="pr-3 text-white" target="_blank" href="https://www.freecodecamp.com/chpecson"> <i class="fa fa-fire fa-2x"></i> </a> <a class="pr-3 text-white" target="_blank" href="https://codepen.io/chpecson/"> <i class="fa fa-codepen fa-2x"></i> </a> </div> </div> </section> </footer> <script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Day 1 - Portfolio - Script Codes CSS Codes
/* * Make the navbar brand circle and set the background-color to blue. */
#brand-logo { background-color: #08f; color: #fafafa; border-radius: 50%; padding: 0 .2rem; width: 2rem;
}
/* * Remove all the margin in class row. */
footer .row { margin: 0 !important;
}
@media (min-width: 1200px) { footer .row { margin: 0 !important; }
}
@media (min-width: 992px) { footer .row { margin: 0 !important; }
}
@media (min-width: 768px) { footer .row { margin: 0 !important; }
}
@media (min-width: 576px) { footer .row { margin: 0 !important; }
}
footer a:hover { text-decoration: none;
}
Day 1 - Portfolio - Script Codes JS Codes
$(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); $('.scrollToTop').hover(function() { $(this).animate({ width: "10vw" }, { duration: 100, }, "easeIn"); $(this).html('Scroll to top'); }); $('.scrollToTop').on('mouseleave', function() { $(this).html('<i class="fa fa-arrow-up" aria-hidden="true"></i>').animate({ width: "4vw" }, 200); });
});
Developer | Christian |
Username | chpecson |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 3,532 Kb |
Views | 18,216 |
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 |
Day 8 - Fan Page | 5,652 Kb |
Day 10 -Photography | 3,550 Kb |
Tribute Page V2 | 6,248 Kb |
Day 12 - Club | 3,497 Kb |
Day 17 - Fashion website | 2,912 Kb |
Day 4 - Product site | 2,883 Kb |
Day 7 -Movie Trailer | 3,155 Kb |
Portfolio | 5,958 Kb |
Day 11 - Events | 4,638 Kb |
Layout and transition experiment | 2,201 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 |
SVG Animation | Thepheer | 4,793 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Shopping List | Markmurray | 6,015 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
STIKHOI | Denmch | 7,122 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 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!