Day 1 - Portfolio

Developer
Christian
Size
3,532 Kb
Views
18,216
  1. Day 1 - Portfolio Previews
  2. Day 1 - Portfolio HTML Codes
  3. Day 1 - Portfolio CSS Codes
  4. Day 1 - Portfolio JS Codes

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 Previews
IQ Test

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); });
});
Day 1 - Portfolio - Script Codes
Day 1 - Portfolio - Script Codes
Home Page Home
Developer Christian
Username chpecson
Uploaded October 15, 2022
Rating 3
Size 3,532 Kb
Views 18,216
Do you need developer help for Day 1 - Portfolio?

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!

Christian (chpecson) Script Codes
Name
Day 16 - Charitable Organization
Layout and transition experiment
Day 18 - Cruise ship
Day 11 - Events
Tribute Page v1
Day 4 - Product site
Day 12 - Club
Day 5 - Restaurant menu
Day 13 - Beverage
Day 10 -Photography
Create amazing sales emails 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!