Beautiful PersonaL Page

Developer
Angelina
Size
3,500 Kb
Views
14,168
  1. Beautiful PersonaL Page Previews
  2. Beautiful PersonaL Page HTML Codes
  3. Beautiful PersonaL Page CSS Codes
  4. Beautiful PersonaL Page JS Codes

How do I make an beautiful personal page?

Here some nice transitions with css and java. What is a beautiful personal page? How do you make a beautiful personal page? This script and codes were developed by Angelina on 24 November 2022, Thursday.

Beautiful PersonaL Page Previews
IQ Test

Beautiful PersonaL Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Beautiful PersonaL Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<!-- HEAD --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <head> <link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700' rel='stylesheet' type='text/css'>	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="style.css" rel="stylesheet" type="text/css"> <title> Angelina Lapteva. Web freelance. </title> </head>
<!-- BODY --> <body> <div class="tools"> <div class="toolbar"><ul> <li><i class="fa fa-compass fa-spin" id="extra"></i></li> </ul> </div> </div> <div class="clickonme"> <div class="clicktext">CLICK ON ME! </div></div> <div class="filters"> <div class="forimage"> </div> <hr/> <div class="texthold"> DigitaLab is a start up company which I registered. I have a passion to bring some ideas about mobile applications to life. I hope it will make other people lives easier. </div> </div> <article class="about"> <div class="firstbox"> <div class="textholder1"> <h1> Angelina Lapteva </h1> <p class="tagline"> New world of web</p> </div> </div> <hr/> <div class="secondbox"> <p>Hello! I am a beginner in web development and UX design. I am really passionate to find a job in this field. Right now I am working as a freelancer. </p> <p> I have my own start up company which will develop mobile applications and websites. I hope I will meet link-minded persons and together we will succed </p> </div> </article> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Beautiful PersonaL Page - Script Codes CSS Codes

body{
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/me-optimized.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
} /div { border: solid red 1px; }
.about {	width: 25%;	float:left;	margin-top:15px;	margin-left:5%;	background-color: rgba(0, 0, 0, .3);
transition: opacity .5s ease-in-out;
}	.firstbox {	width:85%;	height:60%;	margin-top: 5px;	margin-left:20px;	background-color:rgba(162,199,125, .6); -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;	align-content:center;	}	p { }	h1{	font-family: 'Yanone Kaffeesatz', sans-serif;	font-weight: 200;	font-size:300%;	}	.textholder1 {	align-content:center;	font-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	font-size:70%;	color:white;	margin-top:5px;	margin-left:5px;	}	iframe {	width:100%;	}
.tools { margin-left:70px; width:10%; height:35px; color:white; font-size: 1.7em;
}
@-webkit-keyframes mymove { from {left: 0px;} to {left: 200px;}
}
@keyframes mymove { from {left: 0px;} to {left: 200px;}
}
.tools ul li { display: inline; -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite;
}
.toolbar { height:20px; margin-top: 0px; padding-top: 0px;
}
.secondbox { align-content:center;	font-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color:white;	margin-top:5px;	margin-left:5px; margin-right:5px;
}
p { margin-top:10px;	margin-left:10px; margin-right:10px;
}
.clickonme { margin-top:0px;	margin-left:70px; width:15%; height: 25px;
}
.clicktext { font-family: 'Gloria Hallelujah', cursive; color:white;
} .filters{
position:fixed; background-color: rgba(0, 0, 0, .3); width: 270px; height: 120px; z-index: 60; top: 100px; right: -100%; transition: opacity .5s ease-in-out;
}
.forimage { background-image:url('http://angelina-portfolio.com/wordpress_7/wp-content/uploads/digitalab.png');
background-repeat: no-repeat;
width:100%;
height:100%; transition: opacity .5s ease-in-out;
}
.texthold { align-content:center;	font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color:white; background-color: rgba(0, 0, 0, .3); padding-top:20px; padding-left:10px; padding-right:10px; padding-bottom:20px; transition: opacity .5s ease-in-out;
}
hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;
border-color:white;
}

Beautiful PersonaL Page - Script Codes JS Codes

$(function (){ var filtersOpen = false; var ExtraInfoOpen=true; $('#extra').click(function(){ if (ExtraInfoOpen) { //close it //move it off the screen $('.secondbox').css('opacity', '0'); $('.firstbox').css('opacity', '0'); $('.about').css('opacity','0'); $('.filters').css('left','70px'); ExtraInfoOpen=false; } else { $('.secondbox').css('opacity', '1'); $('.firstbox').css('opacity', '1'); $('.filters').css('left', '-100%'); $('.about').css('opacity','1'); ExtraInfoOpen=true; } })
})
Beautiful PersonaL Page - Script Codes
Beautiful PersonaL Page - Script Codes
Home Page Home
Developer Angelina
Username Angelina_Lapteva
Uploaded November 24, 2022
Rating 3
Size 3,500 Kb
Views 14,168
Do you need developer help for Beautiful PersonaL Page?

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!

Angelina (Angelina_Lapteva) Script Codes
Name
Menu Transitions
Icons and Grid
3d looking button
Smooth scroll
A Pen by Angelina
Scalable objects
Week 2 Session
Piechart
Animated
Transition Menu and Video Background
Create amazing web content 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!