Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodeAtNow | React Profile Card</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Hind+Guntur:300,400,500,600,700&display=swap'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div id="root"></div> <a target="_blank" title="instagram/web__addict" href="https://www.instagram.com/codeatnow/"><i class="fab fa-instagram"></i></a> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react-router/5.0.1/react-router.min.js'></script><script src="./script.js"></script> </body> </html>
CSS
body{ font-family: 'Hind Guntur', sans-serif; color: #054231; display: flex; justify-content: center; background: #11131e; } .card{ width: 310px; height: 627px; padding: 15px; margin-top: 40px; border-radius: 25px; display: flex; justify-content: center; box-shadow: 15px 10px 25px 0px #000000; background: #fff; background-image: url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf2.png?raw=true'), url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf.png?raw=true'); background-repeat: no-repeat, no-repeat; background-position: 120% -5%, 200% -40%; background-size: 40%, 80%; -webkit-animation: open .5s; animation: open .5s; } @-webkit-keyframes open { 0% {background-position: 166% -25%, 220% -69%;} 100%{background-position: 120% -5%, 200% -40%;} } @keyframes open { 0% {background-position: 166% -25%, 220% -69%;} 100%{background-position: 120% -5%, 200% -40%;} } form{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .field{ margin: 5px; display: flex; flex-direction: column; } input[type="file"] { display: none; } .custom-file-upload { border-radius: 50%; display: inline-block; position: relative; padding: 6px; cursor: pointer; background: linear-gradient(270deg, #000000, #11131e); margin-bottom: 25px; } .img-wrap{ position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .img-upload:before{ content: "\f093"; font-size: 90px; position: absolute; padding-top: 80px; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #11131e; width: 200px; height: 200px; border-radius: 50%; opacity: 0; transition: .5s ease; background-color: #fff; } .img-upload:hover:before{ opacity: 1; } img { width: auto; height: 100%; } label{ text-transform: uppercase; font-weight: 700; color: #676767; } input{ border-radius: 15px; border: 1px solid #b7b7b7; padding: 5px 5px 5px 10px; font-size: 18px; transition: 0.2s; } input:focus{ outline: none; border: 1px solid #11131e; } input::-moz-placeholder{ color: #bebebe; } input:-ms-input-placeholder{ color: #bebebe; } input::placeholder{ color: #bebebe; } .name{ text-align: center; text-transform: uppercase; font-weight: 700; color: #676767; max-width: 220px; overflow-wrap: break-word; } .status{ text-align: center; max-width: 220px; overflow-wrap: break-word; } button{ position: relative; color: #054231; letter-spacing: 1px; margin: 20px; font-size: 18px; padding: 10px; text-align: center; transition: 0.5s; border-radius: 10px; cursor: pointer; border-radius: 25px; border: none; background: #64d488; } .save{ font-weight: 600; left: -20px; text-transform: uppercase; letter-spacing: 1px; width: 20px; box-shadow: 20px 0px 40px 0px #63d3a6; } .edit{ color: #fff; width: 180px; } button:hover{ left: 0; color: #fff; width: 180px; box-shadow: 0px 0px 20px 0px #63d3a6; } button:focus{ outline: none; } .lds-ripple { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-ripple div { position: absolute; border: 4px solid #fff; opacity: 1; border-radius: 50%; -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .lds-ripple div:nth-child(2) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .fa-instagram{ position: absolute; color: #fff; top: 3%; right: 2%; font-size: 38px; } .fa-instagram:hover{ /* font-size: 42px; */ color: #79f1a4; transition: all .1s linear; cursor: pointer; }
JS
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const ImgUpload = ({ onChange, src }) => /*#__PURE__*/ React.createElement("label", { htmlFor: "photo-upload", className: "custom-file-upload fas" }, /*#__PURE__*/ React.createElement("div", { className: "img-wrap img-upload" }, /*#__PURE__*/ React.createElement("img", { for: "photo-upload", src: src })), /*#__PURE__*/ React.createElement("input", { id: "photo-upload", type: "file", onChange: onChange })); const Name = ({ onChange, value }) => /*#__PURE__*/ React.createElement("div", { className: "field" }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name" }, "name:"), /*#__PURE__*/ React.createElement("input", { id: "name", type: "text", onChange: onChange, maxlength: "25", value: value, placeholder: "Alexa", required: true })); const Status = ({ onChange, value }) => /*#__PURE__*/ React.createElement("div", { className: "field" }, /*#__PURE__*/ React.createElement("label", { htmlFor: "status" }, "status:"), /*#__PURE__*/ React.createElement("input", { id: "status", type: "text", onChange: onChange, maxLength: "35", value: value, placeholder: "It's a nice day!", required: true })); const Profile = ({ onSubmit, src, name, status }) => /*#__PURE__*/ React.createElement("div", { className: "card" }, /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit }, /*#__PURE__*/ React.createElement("h1", null, "Profile Card"), /*#__PURE__*/ React.createElement("label", { className: "custom-file-upload fas" }, /*#__PURE__*/ React.createElement("div", { className: "img-wrap" }, /*#__PURE__*/ React.createElement("img", { for: "photo-upload", src: src }))), /*#__PURE__*/ React.createElement("div", { className: "name" }, name), /*#__PURE__*/ React.createElement("div", { className: "status" }, status), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "edit" }, "Edit Profile "))); const Edit = ({ onSubmit, children }) => /*#__PURE__*/ React.createElement("div", { className: "card" }, /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit }, /*#__PURE__*/ React.createElement("h1", null, "Profile Card"), children, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "save" }, "Save "))); class CardProfile extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state", { file: '', imagePreviewUrl: 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true', name: '', status: '', active: 'edit' });_defineProperty(this, "photoUpload", e => { e.preventDefault(); const reader = new FileReader(); const file = e.target.files[0]; reader.onloadend = () => { this.setState({ file: file, imagePreviewUrl: reader.result }); }; reader.readAsDataURL(file); });_defineProperty(this, "editName", e => { const name = e.target.value; this.setState({ name }); });_defineProperty(this, "editStatus", e => { const status = e.target.value; this.setState({ status }); });_defineProperty(this, "handleSubmit", e => { e.preventDefault(); let activeP = this.state.active === 'edit' ? 'profile' : 'edit'; this.setState({ active: activeP }); });} render() { const { imagePreviewUrl, name, status, active } = this.state; return /*#__PURE__*/( React.createElement("div", null, active === 'edit' ? /*#__PURE__*/ React.createElement(Edit, { onSubmit: this.handleSubmit }, /*#__PURE__*/ React.createElement(ImgUpload, { onChange: this.photoUpload, src: imagePreviewUrl }), /*#__PURE__*/ React.createElement(Name, { onChange: this.editName, value: name }), /*#__PURE__*/ React.createElement(Status, { onChange: this.editStatus, value: status })) : /*#__PURE__*/ React.createElement(Profile, { onSubmit: this.handleSubmit, src: imagePreviewUrl, name: name, status: status }))); }} ReactDOM.render( /*#__PURE__*/ React.createElement(CardProfile, null), document.getElementById('root'));
0 Comments