diff --git a/about1.css b/about1.css new file mode 100644 index 0000000..ac9e827 --- /dev/null +++ b/about1.css @@ -0,0 +1,188 @@ +/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro'); +*{ + margin:0; + padding: 0; + font-family: poppins; + color: #fff; +} +.body { + display: flex; + justify-content: center; + align-content: center; + min-height: 100vh; + background: black; + } + + .container{ + height: 470px; + width: 250px; + border: 2px solid; + border-left-color: #0cf; + border-right-color: #0cf; + border-top-color: #ec45f2; + border-bottom-color: #ec45f2; + border: 25px; + display: flex; + justify-content: space-around; + align-content: center; + + } + .container .img-section{ + height: 100%; + width: 100%; + background: linear-gradient(#0cf,#ec45f2,#0cf,#ec45f2); + display: flex; + justify-content: center; + align-content: center; + border-radius: 50%; + overflow: hidden; + position:absolute; + top: 20%; + left: 50%; + transform: translate(-50%, -50%); + transition: .6s ease; + } + .container:hover .img-section{ + top: 20%; + height: 200px; + width: 200px; + } + .img{ + height: 25%; + width: 25%; + border-radius: 50%; + background:black; + } + + .text-content{ + text-align: center; + color:#fff; + font-weight: 500; + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + top: 40%; + } + + .text-content span:nth-child(1){ + letter-spacing: 1px; + font-size: 32px; + } + + .text-content span:nth-child(2){ + letter-spacing: 1px; + font-size: 18px; + } + + .text-content p{ + font-size: 13px; + max-width: 300px; + margin-bottom: 10px; + } + + .btn{ + height: 35px; + width: 100px; + font-size: 15px; + background:#222; + color: #0cf; + border: 2px solid #0cf; + cursor: pointer; + margin-bottom: 20px; + border-radius: 5px; + transition: 0.5s; + } + + .btn:hover{ + background: #0cf; + color:#222; + box-shadow:0 0 10px #0cf; + } + + .social-media{ + cursor:pointer; + height:40px; + width: 40px; + border: 2px solid #0cf; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 30px; + color: #0cf; + margin-left: 20px; + transition:0.4s; + } + + .social-media i:hover{ + box-shadow: 0 0 10px #0cf; + color: #222; + background: #0cf; + } */ + + body { + background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + font-family: Arial, sans-serif; + } + .profile-card { + background: #fff; + border-radius: 16px; + box-shadow: 0 8px 24px rgba(0,0,0,0.15); + padding: 2rem 1.5rem; + text-align: center; + width: 320px; + transition: transform 0.3s; + } + .profile-card:hover { + transform: translateY(-10px) scale(1.03); + box-shadow: 0 16px 32px rgba(0,0,0,0.18); + } + .profile-image img { + width: 100px; + height: 100px; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0,0,0,0.10); + margin-bottom: 1rem; + } + .profile-card h2 { + margin: 0.5rem 0 0.25rem; + } + .profile-card .title { + color: #888; + font-size: 1rem; + margin-bottom: 0.5rem; + } + .profile-card p { + margin: 0.25rem 0; + } + .social-links { + margin: 1rem 0; + } + .social-links a { + color: #555; + margin: 0 0.5rem; + font-size: 1.2rem; + transition: color 0.2s; + } + .social-links a:hover { + color: #0077b5; + } + .profile-card button { + background: #0077b5; + color: #fff; + border: none; + padding: 0.6rem 1.5rem; + border-radius: 24px; + cursor: pointer; + font-size: 1rem; + transition: background 0.2s; + } + .profile-card button:hover { + background: #005983; + } \ No newline at end of file