Simple personal profile

Developer
Miro Karilahti
Size
2,856 Kb
Views
44,506
  1. Simple personal profile Previews
  2. Simple personal profile HTML Codes
  3. Simple personal profile CSS Codes

How do I make an simple personal profile?

I guess this doesn't need an explanation?. What is a simple personal profile? How do you make a simple personal profile? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.

Simple personal profile Previews
IQ Test

Simple personal profile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple personal profile</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="profile"> <img class="profile-pic" src="http://lorempixel.com/g/280/280/people/1/" /> <div class="text-container"> <h1> Julie Daniels </h1> <div class="title"> Software Developer </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Simple personal profile - Script Codes CSS Codes

@import url("//fonts.googleapis.com/css?family=Muli:300");
html, body, div, img, h1 { margin: 0; padding: 0; outline: 0;
}
body { background: #00838f;
}
.profile { width: 600px; height: 240px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-family: "Muli", sans-serif; color: #e0f7fa;
}
.profile .profile-pic { width: 240px; height: 240px; float: left; border-radius: 50% 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.profile .text-container { width: 360px; margin-left: 256px; padding-top: 68.57143px; text-align: center; text-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.profile h1 { margin-bottom: 34.28571px; font-weight: 400; font-size: 2.8em; line-height: 1em; letter-spacing: -1px; text-transform: uppercase;
}
.profile .title { font-size: 1.4em; letter-spacing: 1px;
}
Simple personal profile - Script Codes
Simple personal profile - Script Codes
Home Page Home
Developer Miro Karilahti
Username miroot
Uploaded July 07, 2022
Rating 3
Size 2,856 Kb
Views 44,506
Do you need developer help for Simple personal profile?

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!

Miro Karilahti (miroot) Script Codes
Name
Background change in pure CSS
Expanding Photo Stack
Social Icons
Flat Text Editor
Navigation
Corner Ribbons
Flat sidebar
Long Shadow Calendar Icon
Long Shadow Camera Icon
Button with sliding information
Create amazing blog posts 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!