Personal site

Developer
Jonathan De Jesús
Size
3,915 Kb
Views
14,168
  1. Personal site Previews
  2. Personal site HTML Codes
  3. Personal site CSS Codes
  4. Personal site JS Codes

How do I make an personal site?

What is a personal site? How do you make a personal site? This script and codes were developed by Jonathan De Jesús on 24 November 2022, Thursday.

Personal site Previews
IQ Test

Personal site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal site</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="container"> <nav> <ul class="logoul"> <li><a href="#" target="_blank"></a></li> </ul> <ul class="linksul"> <li><a href="#">about me</a></li> <li><a href="#">lab</a></li> <li><a href="#">freebies</a></li> <li><a href="#">blog</a></li> </ul> </nav> </div>
</header>
<!--
<div class="container"> <div class="banner"> <div class="bannright"> <h2>DESIGN</h2> </div> <h2 class="code">CODE</h2>
</div>
</div>
-->
<section class="banner"> <div class="container text-center"> <h2>code<span>design</span></h2> <div class="banndivider"></div> </div>
</section>
<section class="afbanner"> <div class="container"> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="profile"> <img src="https://mir-s3-cdn-cf.behance.net/user/138/9808ac4323383.56d6029b398b2.jpg" alt="" /> <div class="titleprof"> <h3>Hi, I'm <b>Jonathan</b><br><span>UI Designer / Frontend Dev</span></h3> </div> </div> <div class="clearfix"></div> <p>I live in the sunny city of Brisbane in Australia and am a UX/UI designer. I believe that design is about solving problems, not just creating beautiful interfaces.
I've been designing for just over 12 years now and couldn't consider doing anything else.</p> </div> <div class="col-md-8 col-sm-12 col-xs-12 text-center"> <div class="hirediv"> <a href="#" class=" btn hiremeb">hire me!</a> <div class="social"> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-behance"></i></a></li> <li><a href="#"><i class="fa fa-codepen"></i></a></li> <li><a href="#"><i class="fa fa-medium"></i></a></li> </ul> </div> </div> </div> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal site - Script Codes CSS Codes

/*
https://rm-content.s3.amazonaws.com/514a0a205ffde3000000006d/190838/upload-c8f2fb60-1efb-11e5-83af-3163781ab640.jpg
*/
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700';
*{ margin:0px auto; padding:0px auto;
}
/*GENERAL*/
body{ font-family: 'Open Sans', sans-serif!important; background-color:#fff;
}/*
section{ margin:10rem 10rem;
}*/
/*HEADER*/
header{ padding-top:2.7rem;
}
.logoul{ border:.1rem dashed gray; padding-left:.8rem!important;
}
nav ul li{ list-style-type: none; display: inline-block;
}
nav ul li a{ color:#222!important; font-weight:700; font-size:1.4rem;
}
.logoul{ float:left;
}
.logoul a{ font-size:1.5rem;text-decoration:none;
}
.linksul{ float:right;
}
.linksul li, .logoul li{ padding:12px;
}
.linksul li a{ text-transform:uppercase;
}
.logoul li a:before{ content:"Jonathan De Jesús"!important; }
.linksul a { color: #3ea9be; letter-spacing: 0.02rem; text-decoration: none!important;
}
.linksul a:after { border-radius:5px; border-bottom: 3px solid #1565C0; content: ""; display: block; margin: 0.25em auto 0; transition: width 250ms ease-in-out 0s; width: 0;
}
.linksul a:hover:after { transition: width 100ms ease-in-out 0s; width: 100%;
}
/*QUERIES*/
@media only screen and (max-width: 550px) { .linksul li, .logoul li{ padding:8px; } nav ul li a{ font-size:1.2rem; } .logoul li a:before{ content:"JD"!important; }
}
/*
.banner{ width:100%; height:400px; background:#FFF;
}
.bannright{ border-left:1px solid #ddd; width:50%; position:absolute; height:400px; background:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1)); margin:0px auto; transform:skew(45deg);right:0;
}
.code{ margin-left:31%;font-size:68px;padding-top:2.08em;font-family:"Open Sans", sans-serif; padding-left:.5em;color:#3498db;
}
.bannright h2{ text-transform:capitalize; font-family:"Open Sans", sans-serif; font-size:68px; transform:skew(-45deg); text-align:center; padding-top:12.2rem; padding-right:7.1em; color:#34495e; font-weight:700;
}
*/
/*
.jake { position: relative; background: #ecf1f2; color: #000; padding: 20px 50px; -webkit-clip-path: polygon(0 0, 60% 0%, 40% 100%, 0% 100%); clip-path: polygon(0 0, 60% 0%, 40% 100%, 0% 100%);
}/*
.jake:before { background: #000; color: #ecf1f2; content: attr( data-text); overflow: hidden; position: absolute; top: 0; left: 0; padding: 20px 50px; -webkit-clip-path: polygon(0 0, 60% 0%, 40% 100%, 0% 100%); clip-path: polygon(0 0, 60% 0%, 40% 100%, 0% 100%);
}*/
.banner{ margin-top:12rem; margin-bottom:12em;
}
.banner h2{ text-transform:uppercase; font-size:5.5rem;margin-left:-210px;;
}
.banner h2 span{ margin:0px auto; font-weight:700; padding-left:10px; z-index:5000; position:absolute; padding-left:.3em; color:#1565C0;
}
.banndivider{ width:90px; height:90px; background:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.9)); margin-top:-5.5em; transform:skew(45deg); border-left:1px solid #eee;
}
.col-md-4{ padding:1em;
}
.col-md-8{ padding:3em;
}
.hirediv{ border:1px dashed #ddd; height:300px; padding:1em; border-radius:30px;
}
.profile{ margin-bottom:1.9em; vertical-align:middle;
}
.profile img{ border-radius:50%; width:70px;float:left; vertical-align:middle;
}
.titleprof{ margin-left:1.8rem; display:inline-block; vertical-align:middle; font-family: 'Open Sans', sans-serif!important;
}
.titleprof h3{ margin-top:11px; color:#1565C0;
}
.profile span{ font-size:1.5rem; font-family: 'Open Sans', sans-serif!important;
}
.afbanner p{ font-family: 'Open Sans', sans-serif!important; font-size:18px; text-align:justify; line-height:1.4;
}
.hiremeb{ border-radius:50px; margin-top:75px; text-decoration:none!important; padding:1em 6em; background: #1565C0; color:rgba(255,255,255,1)!important; font-weight:700; font-size:1.4rem; letter-spacing:.02em;; text-transform:capitalize; border:1px solid #1565C0; box-shadow: 0px 10px 30px 0px rgba(27, 20, 64, 0.3);
}
.social{ padding-top:2.8em;
}
.social ul{ padding-left:0px!important;
}
.social ul li{ list-style:none; display:inline-block;
}
.social ul li a{ padding:12px;
}

Personal site - Script Codes JS Codes

//what I know
//what I'm learning
//What I want to learn
//not show portfolio at this time just build the blog for now
//contact & social section //hire me
Personal site - Script Codes
Personal site - Script Codes
Home Page Home
Developer Jonathan De Jesús
Username JonathanDeJesus
Uploaded November 24, 2022
Rating 3
Size 3,915 Kb
Views 14,168
Do you need developer help for Personal site?

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!

Jonathan De Jesús (JonathanDeJesus) Script Codes
Name
Daily UI Sign Up
Css reference
Case Studies
My first pen
Blog design idea
Color
Moises
Enveer
JS
CodeCamp Tribute Page
Create amazing Facebook ads 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!