Personal Webpage Brainstorm

Developer
Chris Wachtman
Size
3,224 Kb
Views
24,288
  1. Personal Webpage Brainstorm Previews
  2. Personal Webpage Brainstorm HTML Codes
  3. Personal Webpage Brainstorm CSS Codes
  4. Personal Webpage Brainstorm JS Codes

How do I make an personal webpage brainstorm?

What is a personal webpage brainstorm? How do you make a personal webpage brainstorm? This script and codes were developed by Chris Wachtman on 17 October 2022, Monday.

Personal Webpage Brainstorm Previews
IQ Test

Personal Webpage Brainstorm - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Webpage Brainstorm</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='name'>Chris Wachtman</div>
<div class='face'> <img src='https://lh6.googleusercontent.com/-l_9oOXFz13g/T-1aPJrcojI/AAAAAAAAPmE/x1s6ERA-dxo/w758-h757-no/Glass.png'>
</div>
<div class='nerd'> <a href='#'>Nerd</a>
</div>
<div class='mover'> <a href='#'>Mover</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal Webpage Brainstorm - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; padding: 0; position: relative;
}
.name { background: #0099cc; text-align: center; font-size: 3em; color: #fff;
}
@-webkit-keyframes myfirst { from { top: 5em; width: 100%; } to { top: 0; width: 3em; }
}
.face { position: absolute; top: 5em; width: 100%; -webkit-transition: all .2s;
}
.face img { border-radius: 50%; border: 1em solid white; width: 50%; max-width: 500px; min-width: 300px; display: block; margin: auto; -webkit-transition: all .2s;
}
.face.left { top: 1px; left: 0; width: 5em;
}
.face.left img { min-width: 0; width: 100%; border-width: 3px;
}
.face.right { top: 1px; left: 100%; margin-left: -5em; width: 5em;
}
.face.right img { min-width: 0; width: 100%; border-width: 3px;
}
.nerd, .mover { height: 800px; width: 50%; float: left; color: white; text-align: center;
}
.nerd a, .mover a { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.25); width: 80%; max-width: 300px; display: block; top: 450px; position: relative; font-size: 2em; line-height: 2em;
}
.nerd { background: #fc5215;
}
.mover { background: #30b71d;
}
.mover a { float: right;
}

Personal Webpage Brainstorm - Script Codes JS Codes

/*
Lets make a single space that acts as a hub for me
Dev work and projects
Parkour & Cycling
FAQ
Timeline
Blog
Social & Contact
Easter Eggs
*/
$('.nerd').click(function(){ $('.face').toggleClass('left'); $('.face').removeClass('right');
});
$('.mover').click(function(){ $('.face').toggleClass('right'); $('.face').removeClass('left');
});
Personal Webpage Brainstorm - Script Codes
Personal Webpage Brainstorm - Script Codes
Home Page Home
Developer Chris Wachtman
Username cwacht
Uploaded October 17, 2022
Rating 3
Size 3,224 Kb
Views 24,288
Do you need developer help for Personal Webpage Brainstorm?

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!

Chris Wachtman (cwacht) Script Codes
Name
Minimal Menu
NASA Concept
What Does the Fox Say Soundboard
A Pen by Chris Wachtman
Music Bookmarklet
Single Element ChromeCast Icon
Angular-HAML
Dragonboat App
CSS Pie Chart
Responsive Grid for Dynamic Layouts
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!