Skip to content

Instantly share code, notes, and snippets.

@khalidmesbah

khalidmesbah/advanced-user-card.markdown

Created March 19, 2022 19:55
Show Gist options
  • Save khalidmesbah/606e4479280c96e15060b3861fad32aa to your computer and use it in GitHub Desktop.
Save khalidmesbah/606e4479280c96e15060b3861fad32aa to your computer and use it in GitHub Desktop.
Download ZIP
Advanced User Card
Raw
index.html
<main>
<header>
<div class="container">
<div class="person">
<div class="image"><img src="https://st2.depositphotos.com/1104517/11967/v/950/depositphotos_119675554-stock-illustration-male-avatar-profile-picture-vector.jpg" alt="avatar-person"></div>
<div class="name">
<h2>Khalid Mesbah</h2>
<h3>Front-End Developer</h3>
</div>
</div>
<div class="links">
<h3>Follow Me On:</h3>
<div class="social-accounts">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20">
<path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6S15.302.4 10 .4zm2.274 6.634h-1.443c-.171 0-.361.225-.361.524V8.6h1.805l-.273 1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545v-.874c0-1.254.87-2.273 2.064-2.273h1.443v1.581z" />
<rect x="0" y="0" width="20" height="20" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm215.3 337.7c.3 4.7.3 9.6.3 14.4c0 146.8-111.8 315.9-316.1 315.9c-63 0-121.4-18.3-170.6-49.8c9 1 17.6 1.4 26.8 1.4c52 0 99.8-17.6 137.9-47.4c-48.8-1-89.8-33-103.8-77c17.1 2.5 32.5 2.5 50.1-2a111 111 0 0 1-88.9-109v-1.4c14.7 8.3 32 13.4 50.1 14.1a111.13 111.13 0 0 1-49.5-92.4c0-20.7 5.4-39.6 15.1-56a315.28 315.28 0 0 0 229 116.1C492 353.1 548.4 292 616.2 292c32 0 60.8 13.4 81.1 35c25.1-4.7 49.1-14.1 70.5-26.7c-8.3 25.7-25.7 47.4-48.8 61.1c22.4-2.4 44-8.6 64-17.3c-15.1 22.2-34 41.9-55.7 57.6z" />
<rect x="0" y="0" width="1024" height="1024" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20">
<path d="M13 10a3 3 0 1 1-6 0c0-.171.018-.338.049-.5H6v3.997c0 .278.225.503.503.503h6.995a.503.503 0 0 0 .502-.503V9.5h-1.049c.031.162.049.329.049.5zm-3 2a2 2 0 1 0-.001-4.001A2 2 0 0 0 10 12zm2.4-4.1h1.199a.301.301 0 0 0 .301-.3V6.401a.301.301 0 0 0-.301-.301H12.4a.301.301 0 0 0-.301.301V7.6c.001.165.136.3.301.3zM10 .4A9.6 9.6 0 0 0 .4 10a9.6 9.6 0 0 0 9.6 9.6a9.6 9.6 0 0 0 9.6-9.6A9.6 9.6 0 0 0 10 .4zm5 13.489C15 14.5 14.5 15 13.889 15H6.111C5.5 15 5 14.5 5 13.889V6.111C5 5.5 5.5 5 6.111 5h7.778C14.5 5 15 5.5 15 6.111v7.778z" />
<rect x="0" y="0" width="20" height="20" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20">
<path d="M10.26 9.982c.033-.012.068-.021.103-.031a14.738 14.738 0 0 0-.279-.584c-1.88.557-3.68.562-4.001.557c-.003.025-.003.051-.003.076c0 .945.34 1.853.958 2.566c.206-.332 1.298-1.961 3.222-2.584zm-2.637 3.131a3.913 3.913 0 0 0 3.871.512a16.511 16.511 0 0 0-.822-2.922c-2.121.75-2.922 2.162-3.049 2.41zm4.932-6.086a3.92 3.92 0 0 0-3.405-.853a20.08 20.08 0 0 1 1.421 2.223c1.283-.493 1.863-1.204 1.984-1.37zm-2.85 1.637A23.654 23.654 0 0 0 8.29 6.473a3.938 3.938 0 0 0-2.113 2.658h.017c.406 0 1.849-.033 3.511-.467zm1.809 1.832c.465 1.293.679 2.367.74 2.711a3.933 3.933 0 0 0 1.609-2.543a5.81 5.81 0 0 0-1.592-.221c-.258 0-.513.018-.757.053zM10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6S15.302.4 10 .4zm0 14.297A4.703 4.703 0 0 1 5.301 10A4.703 4.703 0 0 1 10 5.301A4.704 4.704 0 0 1 14.698 10A4.702 4.702 0 0 1 10 14.697zm.922-5.623c.087.18.168.357.242.531l.071.17c.277-.033.573-.049.882-.049a9.72 9.72 0 0 1 1.801.172a3.93 3.93 0 0 0-.852-2.34c-.16.206-.818.963-2.144 1.516z" />
<rect x="0" y="0" width="20" height="20" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g>
<path d="M14.76 11.19a1 1 0 0 0-1 1.09h2.06a1 1 0 0 0-1.06-1.09zM9.49 12.3H8.26v1.94h1c1 0 1.44-.33 1.44-1s-.46-.94-1.21-.94zm.87-1.78c0-.53-.35-.85-.95-.85H8.26v1.74h.85c.89 0 1.25-.32 1.25-.89z" />
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zM9.7 15.2H7V8.7h2.7c1.17 0 1.94.61 1.94 1.6a1.4 1.4 0 0 1-1.12 1.43A1.52 1.52 0 0 1 12 13.37c0 1.16-1 1.83-2.3 1.83zm3.55-6h3v.5h-3zM17 13.05h-3.3v.14a1.07 1.07 0 0 0 1.09 1.19a.9.9 0 0 0 1-.63H17a2 2 0 0 1-2.17 1.55a2.15 2.15 0 0 1-2.36-2.3v-.44a2.11 2.11 0 0 1 2.28-2.25A2.12 2.12 0 0 1 17 12.58z" />
</g>
<rect x="0" y="0" width="24" height="24" />
</svg>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div>
<div>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" />
</svg>Home</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z" />
</svg>About</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z" />
</svg>Resume</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z" />
</svg>Services</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z" />
</svg>Portfolio</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M32 192h120c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H32v64h120c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H32v64h120c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H32v64c0 17.6 14.4 32 32 32h256c17.6 0 32-14.4 32-32V128H32v64zM360 0H24C10.8 0 0 10.8 0 24v48c0 13.2 10.8 24 24 24h336c13.2 0 24-10.8 24-24V24c0-13.2-10.8-24-24-24z" />
</svg>Blog</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
</svg>Contact</li>
</ul>
</div>
<div>
<img src="https://i.postimg.cc/Xqzs0603/Screenshot-6.png" alt="man-working">
</div>
</div>
<div>
<h2>Who I Am</h2>
<p>Hello, I'm Khalid Mesbah, Working as Front-End Developer based in Egypt, I have an Amazing Experience in Front-End Development and Website Creation </p>
<p><span>Phone : </span>+ 113-123-9955.</p>
<p><span>Email : </span>me@Website.com</p>
<p><span>Address : </span>Home Number 6,Testing st.</p>
<p><span>Freelancer : </span>Available</p>
<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z" />
</svg>More About Me</button>
</div>
</div>
</section>
</main>
Raw
script.js
//https://elzero.org/frontend-advanced-user-card/
Raw
style.scss
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
:root {
--main-clr: #2eca7f;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
padding: 3em 2em;
background: #1f4037; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#99f2c8,
#1f4037
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#99f2c8,
#1f4037
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
svg {
width: 30px;
fill: #fff;
}
main {
// overflow: hidden;
border-radius: 20px;
}
.container {
padding: 1vw 2.5vw;
margin: 0 auto;
}
/* Small */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
header {
background: var(--main-clr);
border-radius: 20px 20px 0 0;
.container {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
.person {
display: flex;
align-items: center;
gap: 10px;
.image {
width: 80px;
height: 80px;
border-radius: 50%;
display: grid;
place-content: center;
img {
max-width: 100%;
border-radius: 50%;
object-fit: contain;
}
}
.name {
h2 {
font-size: calc(12px + 0.6vw);
}
h3 {
font-size: calc(10px + 0.3vw);
}
}
}
.links {
h3 {
font-size: calc(10px + 0.5vw);
margin-bottom: 5px;
}
.social-accounts {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
svg {
width: clamp(30px, 2vw, 50px);
height: clamp(30px, 2vw, 50px);
fill: #fff;
transition: all 500ms;
display: inline-block;
border-radius: 50%;
rect {
fill: #0000;
}
}
svg:hover {
transform: rotate(0) !important;
box-shadow: 0 0 5px 5px #fff;
}
}
}
}
}
section {
background: #fff;
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
div:first-child {
display: flex;
justify-content: space-between;
align-items: center;
div:first-child {
background: #fff;
ul {
display: flex;
flex-direction: column;
flex-basis: 100%;
list-style: none;
li {
cursor: pointer;
svg {
width: 20px;
height: 20px;
fill: #444;
transition: all 0.5s;
}
margin: 20px 0;
display: flex;
gap: 10px;
align-items: center;
transition: all 0.5s;
position: relative;
&::after {
position: absolute;
content: "";
background: var(--main-clr);
width: 20px;
height: 2px;
border-radius: 50px;
left: -27px;
opacity: 0;
transition: all 0.5s;
}
&:hover {
color: var(--main-clr);
svg {
fill: var(--main-clr);
}
&::after {
opacity: 1;
}
}
}
}
}
div:last-child {
img {
max-width: 100%;
}
}
}
div:last-child {
padding-bottom: 20px;
h2 {
margin: 30px 0;
position: relative;
width: fit-content;
&::after {
position: absolute;
content: "";
background: var(--main-clr);
width: 100%;
height: 1px;
bottom: -5px;
left: 0;
border-radius: 20px;
}
&::before {
position: absolute;
content: "";
background: var(--main-clr);
height: 10px;
width: 40%;
left: 0;
bottom: -10px;
border-radius: 20px;
}
}
p {
margin: 20px 0;
span {
font-weight: bold;
}
}
button {
background: var(--main-clr);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
gap: 7px;
color: #fff;
padding: 10px 20px;
border: 0;
outline: 0;
font-weight: bold;
font-style: 1.2rem;
border-radius: 10px;
transition: all 0.5s;
&:hover {
color: #fffa;
transform: translateY(-3px);
svg {
fill: #fffa;
}
}
svg {
width: 25px;
height: 25px;
transition: all 0.5s;
}
}
}
}
}
@media (max-width: 992px) {
section .container div:first-child {
justify-content: center;
align-items: center;
flex-wrap: wrap;
div:first-child {
flex-basis: 100%;
ul {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
li::after {
display: none;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment