A Pen by Kenny Mark

Developer
Kenny Mark
Size
5,574 Kb
Views
24,288
  1. A Pen by Kenny Mark Previews
  2. A Pen by Kenny Mark HTML Codes
  3. A Pen by Kenny Mark CSS Codes

How do I make an a pen by kenny mark?

What is a a pen by kenny mark? How do you make a a pen by kenny mark? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

A Pen by Kenny Mark Previews
IQ Test

A Pen by Kenny Mark - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kenny Mark</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>	<meta charset="UTF-8">	<title>Welcome | It's KENNY</title>	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="stylesheet" href="css/main.css" >	<link rel="stylesheet" href="js/main.js">	<link rel="stylesheet" href="css/simplegrid.css">	<link rel="icon" type="image/png" href="favicon.ico">
</head>
<body>	<nav>	<div class="links">	<i class="zmdi zmdi-menu"></i>	<a href="#about" >about</a>	<a href="#skills">Skills</a>	<a href="#portfolio" >porfolio</a>	<a href="#contact">Contact</a>	</div>	</nav>	<div class="headersection">	<h1 class="intro firstext">I AM KENNY MARK</h1>	<h1 class="intro1">&lt; Web Artist <span>||</span> Front End Developer/&gt;</h1>	<a href="#about">	<i class="zmdi zmdi-chevron-down" style="font-size:38px; padding-top:20px; position: absolute;"></i>	</a>	</div>	<a name="about">	<div class="aboutsection">	<h2 style="padding-top:80px;">About Me</h2>	<div class="profilepic">	</div>	<div class="description">	<p>	Currently a student in college studying Computing and Systems Development at Liverpool College, Liverpool. I'm a freelance junior web developer by night and student by day. Websign is my main focus even though I love everything about user interaction design and user experience on the web. I have worked on several personal projects including my this website which I designed and developed in less than 20 hours of work combined. I am minimalist when it comes to the web, and and like the cliche goes, sometimes "Less is More".	</p>	</div>	</div>	</a>	<a name="skills">	<div class="skillssection">	<h2>Skills + Details</h2>	<div class="grid grid-pad">	<div class="col-1-2">	<ul class="skill">	<li>Git</li>	<li>Html5</li>	<li>Javascript</li>	<li>Project Design</li>	<li>Yeoman Workflow (Yeoman, Bower & Gulp)</li>	</ul>	</div>	<div class="col-1-2">	<ul class="skill">	<li>Jquery</li>	<li>CSS3</li>	<li>Photoshop</li>	<li>Responsive Design</li>	<li>Frameworks (Bootstrap,Foundation etc)</li>	</ul>	</div>	</div>	</div>	</a>	<div class="explain">	<p class="skilldescription">	I am currently a junior developer working my way up to be a mid-level developer sooner than later. I actively spend many hours per day writing web code to perfect my skills. Web development is what I'm really passionate about hence the effort I put in. Skill wise, I can practically build any type of website with a good modern and responsive design that doesn't complex interactions between the browser and a server.	</p>	</div>	<a name="portfolio">	<div class="porfoliosection">	<h2 style="color:white";>Portfolio</h2>	<div class="grid">	<div class="col-1-2 project">	<img src="img/davon.png" style="height:400px; width:100%;">	<center><a href="http://www.dacrew.tk" style="color:white; padding-top:15px; font-family:raleway;" target="_blank">	Davon's Website</a></center>	</div>	<div class="col-1-2 project"><img src="img/oz.JPG" style="height:400px; width:100%;">	<center><a href="http://www.dacrew.tk" style="color:white; padding-top:15px; font-family:raleway;" target="_blank">	Oz Studios Website</a></center>	</div>	</div>	</div>	</a>	<a name="contact">	<div class="contactsection">	<h2 >Contact Me</h2>	<div class="grid gridpad">	<div class="col-1-2">	<form action="https://formspree.io/[email protected]" method="POST">	<label for="">Subject</label>	<input type="hidden name="_subject" placeholder="Hi" " value="" />	<label for="">Name</label>	<input type="text" name="name" placeholder="Your Name" value="">	<label for="">Email</label>	<input type="email" name="_replyto" placeholder="[email protected]">	<input type="hidden" name="_next" value="thanks.html"/>	</form>	</div>	<div class="col-1-2">	<form action="https://formspree.io/[email protected]" method="POST">	<label class="msg">Message</label>	<textarea name="message" rows="7" placeholder="Your message"></textarea>	</form>	</div>	</div>	<form action="https://formspree.io/[email protected]" method="POST">	<input type="submit" value="Send" id="send()">	</form>	</div>	</a>	<div class="footer">	<div class="social">	<a href="https://twitter.com/sleekykenny" target="_blank"><i class="zmdi zmdi-twitter"></i></a>	<a href="https://github.com/kennymark" target="_blank"><i class="zmdi zmdi-github"></i></a>	<a href="https://www.linkedin.com/pub/kenneth-mark-coffie/103/596/831" target="_blank"><i class="zmdi zmdi-linkedin-box"></i></a>	<a href="mailto:[email protected]"><i class="zmdi zmdi-email-open"></i></a>	<p>Made with <i class="zmdi zmdi-favorite"></i> in Liverpool</p>	</div>	</div>	<div class="subfooter">	<p><span>all content copyright</span> &copy Kenneth Mark coffie <span>2015</span></p> </div>	<script>	$(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 }, 750); return false; } } });	});	</script>	</script>
</body>	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

A Pen by Kenny Mark - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);
*{	margin:0;	padding: 0;
}
.body{	font-family: 'Ubuntu', sans-serif;	-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 300;
}
nav{	height: 60px; background-color: #1B242B; top: 0; position: fixed; width: 100%;
}
.links{	width: 90%;	clear: both;	margin: auto;	text-align: center;
}
.links a{ text-transform: uppercase; text-decoration: none; display: inline-block; color: #ECECEC; margin-right: 15px; font-family: 'Raleway'; padding: 20px 0 2px 0 ; font-weight: 300; font-size: 1.2em; float: left;
}
.links a:hover{	color: #2C3A46;	transition:all 0.5s ease;	font-weight: 400;
}
.links a:active{	border-bottom: 1px solid #727272;
}
.headersection{	height: 90vh;	background-color: #2C3A46;	background-attachment: fixed;	background-position: center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction:column; align-items:center; justify-content: center; background-image: url(../img/artist1.jpg); width: 100%;
}
.headersection h1{	text-align: center;	color: white;	letter-spacing: 1px;
}
.intro{	font-family: 'Ubuntu';	font-size: 80px;
}
.intro1{ font-family: 'Raleway', cursive; padding-bottom: 20px; font-weight: 300;
}
.intro1 span{	color: grey;	transform:rotate(40deg);
}
.aboutsection{	border-bottom: 1px solid rgba(128, 128, 128, 0.41);
}
.aboutsection h2 ,.skillssection h2{	padding-bottom: 3px;	border-bottom: 3px solid;
}
h2{	text-align: center;	padding-top: 40px;	font-size: 30px;	font-family: 'Montserrat', sans-serif;	padding-bottom: 3px;	border-bottom: 3px solid;	width: 220px;	margin: auto;	color: #1B242B;
}
.profilepic{	background-image: url(../img/profilepic.jpg);	height: 200px;	width: 195px;	margin: 50px auto;	background-size: cover;	background-position: center;	border-radius: 50%;	text-align: center;
}
.description{	padding-bottom: 70px;	font-family: 'Raleway', sans-serif;	font-weight: 300;	color: #727272;	margin: auto;	width: 60%;	line-height: 34px; font-size: 20px; letter-spacing: 0.1px;
}
.skillssection{	background-color:rgba(239, 239, 239, 1);
}
.explain {	color: #DEDDDD;	background-size: cover;	background-position: center;	background:#2C3A46;
}
.porfoliosection{	background:#1B242B;	margin: auto;	position: relative;
}
.project{	height: 450px;	text-align: center;	margin: auto;	padding:50px 0;	margin-bottom: 80px;
}
.skill{	color: #2a2a2a;	font-family: 'Raleway',sans-serif;	padding: 50px 150px;	font-size: 20px;	font-weight:300;	line-height: 32px;	;
}
.contactsection{	margin: auto; display: flex; flex-direction: column; justify-content:center;
}
.skilldescription{	width: 60%;	margin: auto;	padding: 80px 0;	font-family: 'Raleway',sans-serif;	line-height: 32px;	font-size: 20px;	font-weight: 300;
}
li{	line-height: 40px;	display: block; color: #727272;
}
form{	margin: 70px auto;	align-items:center;
}
label{	font-size: 20px;	font-family: 'Raleway',sans-serif;	display: block;	margin-top: 50px;	text-align: inherit;	color: #6A6A6A;	padding-left: -150px
}
input{	border:0px;	border-bottom: 2px solid #222;	padding-top: 20px;	width: 350px;	font-size: 18px;	font-family: 'Raleway',sans-serif;	font-weight: 300;
}
textarea{	border-left:2px solid #333;	width: 450px;	height: 300px;	border-bottom: 0;	border-top: 0;	border-right: 0;	font-family: 'Raleway', sans-serif;	padding:40;	font-size: 18px;
}
.msg{	margin:auto;	text-align: center;
}
input[type="submit"]{ color: white; background-color: #060606; margin: 20px auto 80px auto; width: 90px; height: 40px; padding: 1px 0px; cursor: pointer; border-radius: 3px; font-size: 20px;
}
input:focus, textarea:focus{	outline: none; box-shadow: none;
}
input::selection{	color:white;
}
.footer{	background-color: #273138;	height: 120px;	clear: both;
}
::-moz-placeholder { /* Firefox 19+ */ padding-left: 5px;
}
::-webkit-input-placeholder { padding-left: 5px;
}
ms-input-placeholder{	padding-left: 5px;
}
.social{	text-align: center;	color: #DBDBDB;	font-size: 25px;	padding-top: 30px;
}
.social p{	text-align: center;	color: #CBCBCB;	font-size: 15px;	padding-top: 10px;	letter-spacing: 1px;	font-family: 'Lora';
}
.subfooter{	height: 50px;	background-color: #222A30;	color: #A3A3A3;	text-align: center;	clear: both;
}
.subfooter p{	padding-top: 17px;	text-transform: capitalize; font-family: 'Lora'; font-weight: 400; font-size: 11px; letter-spacing: 2px;
}
/*==========ICONS=======================*/
.zmdi-twitter,.zmdi-github,.zmdi-linkedin-box,
.zmdi-email-open,.zmdi-chevron-down
{	margin-right: 20px;	cursor: pointer;
}
.zmdi-menu{	padding: 20px 0 ; font-weight: 300; font-size: 1.5em; float: right; color: grey; visibility: hidden; cursor: pointer; transition:all .4s ease;
}
.zmdi-menu:hover{	color: white;
}
.zmdi-chevron-down{	color: white;	animation:pulse 1s cubic-bezier(0.23, 0.9, 1, 1); ;	-webkit-animation-iteration-count: 16; /* Chrome, Safari, Opera */	animation-iteration-count: 16;
}
@keyframes pulse{	0%{	margin-bottom: 0px;	}	100%{	margin-top: 10px;	}
}
.zmdi-favorite{	color: #AB3939;	font-size: 23px;	padding-top: 5px;
}
.social a{	text-decoration: none;	color: #DBDBDB;
}
.social a:hover{	transform:rotate(360deg);
}
/*====================================*/
::selection {	background-color: rgba(6, 6, 6, 0.58);	color:white;
}
::-moz-selection{	background-color: rgba(6, 6, 6, 0.58);	color:white;
}
@media (max-width: 650px){	.headersection h1{	font-size: 45px;	border: 0;	padding: 10px 0;	}	.headersection .intro1{	font-size: 28px;	font-weight: 300;	}	.links a{	float: right;	display: flex;	flex-direction:row;	display: none;	}	.headersection{	height: 500px;	}	.description{	width: 80%; font-size: 18px;	}	.skill{	font-style: 18px;	padding: 40px 0;	}	.skilldescription{	width: 85%;	font-size: 18px;	text-align: left;	}	input,textarea{	width: 98%;	}	.subfooter p span{	display: none;	}	.zmdi-menu{	visibility: visible;	color: white;	}
}
A Pen by Kenny Mark - Script Codes
A Pen by Kenny Mark - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 5,574 Kb
Views 24,288
Do you need developer help for A Pen by Kenny Mark?

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!

Kenny Mark (kennymark) Script Codes
Name
Flexbox grid
Word Editor
Blog Post M
Get Movie Cast App
Contact page 2.0
About Fse
Invitation Card
FSE Homepage
Login FSe
Davon
Create amazing video scripts 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!