Koku KUSIAKU profile page 2

Developer
Koku
Size
7,323 Kb
Views
14,168
  1. Koku KUSIAKU profile page 2 Previews
  2. Koku KUSIAKU profile page 2 HTML Codes
  3. Koku KUSIAKU profile page 2 CSS Codes
  4. Koku KUSIAKU profile page 2 JS Codes

How do I make an koku kusiaku profile page 2?

What is a koku kusiaku profile page 2? How do you make a koku kusiaku profile page 2? This script and codes were developed by Koku on 19 October 2022, Wednesday.

Koku KUSIAKU profile page 2 Previews
IQ Test

Koku KUSIAKU profile page 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Koku KUSIAKU profile page 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <meta charset="utf-8"> <title> Portofolio Page </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> <link href="https://fonts.googleapis.com/css?family=Acme|Arima+Madurai|Roboto|Lobster|dosisregular" rel="stylesheet">
<!-- Use the following CSS rules to specify these families: font-family: 'Acme', sans-serif; font-family: 'Libre Franklin', sans-serif; font-family: 'Arima Madurai', cursive;
--> <!-- Insertion of jquery library --> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> </head> <body> <div class ="container"> <nav class="navbar navbar-fixed-top "> <div id = "header"> <div id="gmt_time"> <h3> GMT-TIME </h3> <div id="date"> </div> <div id = "time_wrapper"> <div id=time> </div> </div> </div> <div id="authorandquote"> <i class="fa fa-quote-left" aria-hidden="true"></i> <div id="quote" > </div> <div id="author"> </div> </div> </div> <div id="name" class="navbar-brand"> Koku KUSIAKU </div> <ul class="nav navbar-nav"> <li> <a href="#about_me"> <div class="menuitem"> ABOUT </div> </a> </li> <li> <a href="#portofolio"> <div class="menuitem"> PROJECTS </div> </a> </li> <li> <a href="#skills"> <div class="menuitem"> SKILLS </div> </a> </li> <li> <a href="#contacts"> <div class="menuitem"> CONTACTS </div> </a> </li> </ul> </nav> <!-- Page Head --> <div id ="page_head"> <div id="page_head_color"> <div id="announce"> Hello I am Koku KUSIAKU and I am a <br> <span> Javascript & Front End Developer</span> <br> Currently expanding and sharping my programming skills <br>throught different ressources among which <a src="www.freecodecamp.com">FreeCodeCamp </a>, <a src="www.codewars.com">Codewars </a> to name a few. </div> </div> </div> <!-- End of Page Head --> <!-- Start of About me section --> <div id="about_me"> <!-- Presentation section --> <div id="about_me_wrapper"> <!-- Need to check this div, height doesn't work properly --> <div id ="presentation" class="about_me_item"> <i class="fa fa-user" aria-hidden="true"> </i> <p> Engineer in materials science with some years of professional experience, programming consisted an important part of my roles mainly for simulations or data analysis. I decided to expand my self-access skills through MOOCs and programming meetups </p>
</div> <div id="interest" class="about_me_item "> <i class="fa fa-cogs " aria-hidden="true"></i> <p> My interest in programming is wide and I am aspiring a full stack development certification. I just completed the frond end curriculum and the back end certification and new frameworks/programming languages are coming soon. Further down, you can see skills that I possess and I can offer you as junior developer. </p> </div> </div> <!-- <warpper end --> </div> <!-- End of About me section --> <!-- Portofolio section --> <div id="portofolio"> <h1> PROJECTS </h1> <div id="portofolio_text"> Following are some projects I completed as part of <a href="https://www.freecodecamp.com/"> Free Code Camp</a> curriculum. </div> <div id="project_line_one"> <div class=" project_calculator projects effect"> <h2> JS Numeric Calculator </h2> </div> <div class="project_Tic_Tac_Toe projects effect "> <h2> Tic_Tac_Toe </h2> </div> </div> <div id="project_line_two"> <div class=" project_simongame projects"> <h2> Simon Game</h2> </div> <div class="project_pomodoroclock projects "> <h2> Pomodoro Clock </h2> </div> </div> </div> <!-- End of portofolio --> <!-- End Portofolio section --> <!-- Skills section --> <div id="skills" > <h1> My SKILLS </h1> <div id="skills_intro"> Here some programming and web development skills I possess. Many others will come soon:<br> <i> Java</i> (for the passion of programming), <i>Back End</i> (to be able to work on large project)... </div> <div id="skills_wrapper"> <div class="programming "> <h2> Programming skills </h2> <span > <button disabled> JavaScript </button> <button disabled> Python </button> <button disabled> C++ </button> </span> <span > <button disabled> Matlab </button> <button disabled> Scilab</button> <button disabled id ="java"> Java </button> </span> </div> <div class="webdevelopment"> <h2> Web Development </h2> <span > <button disabled> JavaScript </button> <button disabled> HTML </button> <button disabled> CSS </button> </span> <span > <button disabled> JQuery</button> <button disabled id = "react"> React </button> <button disabled id = "node"> NodeJS </button> </span> </div> </div> </div> <!-- End skills section --> <!-- Contacts section --> <div id="contacts"> <h2> Get in touch </h2> <div id="dev_profiles" > <a href ="https://codepen.io/KKOKU/" target ="_blank"> <button> <i id ="codepen" class="fa fa-codepen"> </i></button> </a> <a href ="https://github.com/KKOL" target ="_blank"> <button> <i id ="github" class="fa fa-github"> </i></button></a> <!-- A problem with free code camp icon, use replace icon here --> <a href ="https://www.freecodecamp.com/fccf1a9db41" target ="_blank"> <button> <i id="freecodecamp" class="fa fa-1x fa-fire" aria-hidden="true"></i> </button></a> <a href ="https://www.linkedin.com/in/koku-kusiaku-5904815a/" target ="_blank"> <button> <i id ="linkedin" class="fa fa-linkedin"> </i></button></a> </div> <div id ="address"> <button > <i id ="mobile" class="fa fa-mobile" ></i> <p> +44 743 6304 971</p> </button> <button> <i id ="email" class="fa fa-at"> </i> <p>[email protected]</p> </button> </div> </div> <!-- End contacts section --> <footer> <i class="fa fa-copyright" aria-hidden="true"> 2017, Koku KUSIAKU </i>
</footer> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Koku KUSIAKU profile page 2 - Script Codes CSS Codes

/* ********************************************** Nav bar style ************************************************/
#name{ font-family:Lobster, sans-serif; font-size:20px; color:rgb(255,255,255); clear:both; }
nav.navbar.navbar-fixed-top{ background-color:navy; padding:inherit; width:inherit; margin:inherit;
}
.navbar a{ color:rgb(255,255,255);
}
.navbar ul{ float:right; font-family:Roboto, sans-serif; font-size:20px;
}
@media screen and (max-width:750px){ .navbar ul{ display:none; }
}
/***********************end of navbar**************************/
/* ********************************************** Page_head section style ************************************************/ #announce{ font-size:2vw; color:rgb(255,255,255); text-align:center; padding:30px 0 30px 20px; clear:right; font-family:Roboto, sans-serif; } #announce a{ color:rgb(255,255,255); text-decoration:underline; } #announce span{ font-family:dosisregular,sans-cherif; font-size:3.5vw; color:rgb(0,0,0); font-weight:bold; } @media screen and (max-width:500px){
#announce{ font-size:16px;
}
#announce span{ font-size:25px; font-weight:bold; color:black; } } #page_head{ background-image:url("http://i1259.photobucket.com/albums/ii560/kusiakukOL/apple-laptop-notebook-notes_zpscfzfjimo.jpg"); /* it is like photobucket sends a cat photo when the url is wrong,*/ background-repeat:no-repeat; background-size:100% auto; margin:0 -15px 0 -15px; position:relative; /*top:140px;*/ } #page_head_color{ /*background-color:rgba(0,25,0,0.95);*/ background-color:rgba(0,128,128,0.95); padding:18vw 0; } @media screen and (max-width:750px){ #page_head{ background-image:none; background-size:inherit; } #page_head_color{ padding-top:100px; } } /***********************end of page_head section**************************/
/* ********************************************** About me section style ************************************************/
#about_me{ padding:100px 0 50px 0; margin:0 -15px 0x -15px; color:green;
}
.about_me_item{ width:40vw; text-align:center; margin-bottom:25px; color:rgb(0,128,128); background-color:rgb(255,255,255);
}
.about_me_item i{ font-size:10vw;
}
.about_me_item p{ text-align:center; color:black; padding:20px 20px 5px 20px ; font-family:Roboto, sans-serif; font-size:1.8vw; background-color:rgb(255,255,255);
}
.about_me_item p:hover{ background-color:rgb(100,149,237);
}
#about_separator{ height:600px;
}
#about_me_wrapper { width:85vw; margin: 0 auto;
}
#header{ overflow:auto; margin:0 -15px; background-color:rgb(255, 248, 220);
}
#image{ height:600px; padding:100px 0 0 100px ; font-size:50px; /* it is like photobucket sends a cat photo when the url is wrong, I am not a cat of course :)*/
}
#image img{ width:200px; height:auto; border:solid; border-radius:50%;
}
#interest{ float:left; margin-left:2vw; }
/*
#list{ margin-left:50px;
}*/
#presentation{ float:left; /*margin-right:2vw;*/
}
@media screen and (max-width:750px){ .about_me_item{ width:80vw; text-align:center; margin-bottom:25px; color:rgb(0,128,128); background-color:rgb(255,255,255); } .about_me_item i{ font-size:20vw; } .about_me_item p{ font-size:3vw; }
}
@media screen and (max-width:350px){ .about_me_item p{ font-size:16px; text-align:left; }
}
/***********************end of about_me section**************************/
/* ********************************************** portofolio section style
************************************************/
#portofolio{ clear:left; background-color:rgb(249,249,249); margin:-5px -15px 0 -15px; /* padding:50px 100px 50px 100px;*/ font-size:50px; color:white;
}
#portofolio h1{ padding:10px 0 20px; border-bottom:5px rgb(0,128,128) solid; color:rgb(0,0,0); font-size:40px; text-align:center; font-family: 'Acme', sans-serif;
}
#portofolio_text{ color:rgb(0,0,0); font-size:20px; text-align:center; font-family: 'Acme', sans-serif;
}
#portofolio_text a{ color:rgb(0,128,128);
}
.projects{ height:30vw; width:30vw; border:inherit; border:3px solid rgb(0,128,128); border-radius:5px; box-shadow:0 0 15px black; margin:15px 15px 15px;
}
.projects:hover{ box-shadow:none;
}
.projects h2{ padding-top:10px; margin:0; height:50px; text-align:center; background-color:rgba(0,128,128,1); color:rgb(255, 255, 255); font-family: 'Acme', sans-serif; }
#project_line_one, #project_line_two{ margin:50px auto; width:74vw; border:2px solid; overflow:auto;
}
.project_calculator{ background-image:url("http://i1259.photobucket.com/albums/ii560/kusiakukOL/JS_Calculator_zpsjewsczth.png"); background-size:auto 100%; background-repeat:no-repeat; background-position:center center; /* margin-right:7vw;*/ float:left;
}
.project_Tic_Tac_Toe{ background-image:url("http://i1259.photobucket.com/albums/ii560/kusiakukOL/Tic_Tac_Toe_zpsxysljwes.png"); background-size:auto 100%; background-repeat:no-repeat; background-position:center center; /* margin-left:7w;*/ float:right;
}
.project_simongame{ background-image:url("http://i1259.photobucket.com/albums/ii560/kusiakukOL/Simon_game_white_zps6rbsgsar.png"); background-size:auto 100%; background-repeat:no-repeat; background-position:center center; /*margin-right:7vw;*/ float:left;
}
.project_pomodoroclock{ background-image:url("http://i1259.photobucket.com/albums/ii560/kusiakukOL/pomodoro_clock_logo_zpsytzic0af.png"); background-size:auto 100%; background-repeat:no-repeat; background-position:center center; /*margin-left:7vw;*/ float:right;
}
#project_title{ font-size:20px; font-family:Arima Madurai, cursive;
}
@media screen and (max-width:750px){ #portofolio h2{ font-size:30px; } .projects{ width:70vw; height:70vw; display:block; float:none; } .project_calculator, .project_Tic_Tac_Toe, .project_simongame, .project_pomodoroclock{ background-size:70vw auto; margin-bottom:20px; }
}
/***********************end of portofolio section**************************/
/* ********************************************** skills section style
************************************************/
#java, #react, #node{ color:inherit; color:rgb(0;0,0); opacity:0.5;
}
.programming{ float:left; width:30vw; /*margin-right:6vw;*/
}
#skills{ margin:-15px -15px 0 -15px; padding:100px 50px 100px 50px;
}
#skills button{ background:rgb(45, 97, 140); padding:0 15px 0 15px; border-radius:2px; border:inherit; color:white; font-size:1.5vw; font-family:Arima Madurai, cursive; text-align:center; width:9vw; height:8vw; margin:0 10px 10px 0;
}
#skills h1{ padding:10px 0 20px; border-bottom:5px rgb(0,128,128) solid; color:rgb(0,0,0); font-size:40px; text-align:center; font-family: 'Acme', sans-serif;
}
#skills h2{ background-color:rgb(0,128,128); border-radius:2px; padding:5px; width:29vw; font-size:2vw; text-align:center; font-family:dosisregular,sans-cherif;
}
#skills_intro{ text-align:justify; font-size:25px; font-family:Arima Madurai, cursive; line-height:50px; margin:0 auto 100px auto;
}
#skills .row{ border:2px solid blue; position:relative;
}
#skills_wrapper{ overflow:auto;
}
.webdevelopment{ width:30vw; float:right; /* margin-left:6vw;*/
}
@media screen and (max-width:750px){ .programming{ width:80vw; float:none; margin:0 auto; } #skills button{ padding:0; font-size:16px; width:30vw; } #skills h2{ font-size:18px; } #skills_intro{ font-size:16px; line-height:normal; } .webdevelopment{ width:80vw; float:none; margin:0 auto; } #skills_wrapper{ margin:0; }
}
@media screen and (max-width:500px){
/* #skills{ padding:0; }*/ #skills{ margin:0; padding-bottom:15px; overflow:auto; } #skills h2{ font-size:18px; width:80vw; }
}
/***********************end of skills section**************************/
/* ********************************************** contacts section style
************************************************/
#address{ margin-top:25px; text-align:center;
}
#address button{
background:none;
border:inherit;
}
button p{ margin:10px 0 0 10px; font-size:16px; color:rgb(255,255,255); float:left;
}
#contacts{ font-size:50px; margin:0 -15px -15px -15px; padding-top:50px; background:rgb(15, 23, 33);/*rgb(0,128,128);*/ font-family: 'Acme', sans-serif; color:white;
}
#contacts h2{ text-align:center; margin-top:0;
}
#contacts ul{ width:300px;
}
#dev_profiles{ text-align:center;
}
#dev_profiles a{ color:inherit;
}
#dev_profiles button{ background:none; border:inherit; margin: 0 15px 0 15px; font-size:30px;
}
#email.fa.fa-at{ margin:10px 0 10px; float:left; font-size:30px;
}
#mobile.fa.fa-mobile{ padding:0; color:white; font-size:50px; float:left;
}
@media screen and (max-width:500px){ #contacts h2{ font-size:16px; }
}
@media screen and (max-width:450px){ #dev_profiles button{ /* display:block; margin:0 auto;*/ width:75%; margin:0 auto; }
}
/***********************end of contacts section**************************/
/* ********************************************** footer style
************************************************/
footer{ margin:-15px; padding:10px; text-align:center; color:rgb(255,255,255); background-color:rgb(47, 79, 79);
}
/***********************end of footer **************************/
/************************************************** date and time component style;
***************************************************/
#date{ heigth:100px; background-color:rgb(15, 23, 33); color:white; font-size:20px; font-family:Arima Madurai, cursive; text-align:right; padding:10px 20px; width:300px; height:50px; float:left;
}
#gmt_time{ color:white; font-size:20px; /*width:400px;*/ float:left; display:inline-block; margin:0 15px 0 -15px;
}
@media screen and (max-width:750px){ #gmt_time{ display:none; }
}
#gmt_time h3{ background-color:rgb(204, 0, 0); font-size:10px; text-align:center; margin:0;
}
#time{ font-family:Arima Madurai, cursive; text-align:right; padding-right:20px; color:rgb(255,255,255);
}
#time_wrapper{ width:100px; padding:10px 10px 11px; float:right; background-color:rgb(75, 0, 130);
}
/***********************date and time component style**************************/
/************************************************** Quote component style;
***************************************************/
#authorandquote{ display:inline-block; float:right; margin:10px 15px 0 25px;
}
#quote{ display:inline-block; font-family:Arima Madurai, cursive;
}
/************** End of quote component style ***************/

Koku KUSIAKU profile page 2 - Script Codes JS Codes

// date update section
var week = { 1:"Monday", 2:"Tuesday", 3:"Wednesday", 4:"Thursday", 5:"Friday", 6:"Saturday", 0:"Sunday"
};
var months={ 0:"January", 1:"Feburary", 2:"March", 3:"April", 4:"May", 5:"June", 6:"July", 7:"August", 8:"September", 9:"October", 10:"November", 11:"December",
};
var gmtDate = document.getElementById("date");
function completeDay(){ var currentDate = new Date(); var date = week[currentDate.getUTCDay()]+', '+currentDate.getUTCDate()+' '+months[currentDate.getUTCMonth()]+' '+currentDate.getUTCFullYear(); gmtDate.innerHTML = date; /*$("#date").html(date);// a problem using react have to check later*/
}
setInterval(completeDay, 1000);
var gmtTime = document.getElementById("time");
function timeClock() { var time = new Date().toLocaleTimeString(); time = time.match(/(\d{1,2})(:)\d{2}(:)\d{2}/)[0];// this line to clear AM and PM from browser like chrome when using toLocaleTimeString() if (time.match(/\d{2}/)=="00"){ time = time.replace(/\d{2}/,"23")// for 23h }else { time = time.replace(/(\d{2})/, $1=>$1-1); } gmtTime.innerHTML = time;
//$('#time').html(time);
}
setInterval(timeClock, 1000);
/*******************************************
QUOTE SECTION SCRIPT
**********************************************/
function getQuote(){ $.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", function(response) { if(response.quoteText.length>100){ getQuote();// limit the nomber of character in the quote to be render to the page to avoid overflow issue } $("#quote").html(response.quoteText); $("#author").html(response.quoteAuthor); $("#quote").css("font-weight", "bold"); });
}
$(document).ready(function() { // Immediate call to the API for first quote ! getQuote(); setInterval(getQuote, 60000); }); // End of document ready
/********************** JQUERY ON Projects
**********************/
$("#project_calculator,#project_tic_tac_toe").hover(function(){ $(".description").css('visibility','visible');
},
function(){ $(".description").css('visibility','hidden');
});
Koku KUSIAKU profile page 2 - Script Codes
Koku KUSIAKU profile page 2 - Script Codes
Home Page Home
Developer Koku
Username KKOKU
Uploaded October 19, 2022
Rating 3
Size 7,323 Kb
Views 14,168
Do you need developer help for Koku KUSIAKU profile page 2?

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!

Koku (KKOKU) Script Codes
Name
Smooth scrool of component
Recipe Porject Site
Local weather show
Popup with visibility attribute
SetState will callback
Twitch.tv channels React static
Slider for stackoverflow
A Pen by Koku
Campers LeaderBoard
Rando quote machine
Create amazing art & images 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!