Closed N3RDIUM closed 1 year ago
Hey there! I've been designing my portfolio with parallax.js.
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <title>Portfolio - SubNerd</title> <meta name="description" content="somePythonProgrammer's portfolio website!" /> <link rel="stylesheet" href="./css/main.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> <meta charset="utf-8" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous" ></script> </head> <body> <div class="scene" id="scene"> <!--Content--> <div data-depth="0.1" class="container"> <div class="profile fadeOnScroll"> <img class="profile" src="https://avatars.githubusercontent.com/u/74598401?v=32" alt="Profile Picture" /> </div> <div class="username fadeOnScroll">SubNerd</div> <div class="userdesc fadeOnScroll"> I'm a <span class="userdesc userage"></span> year old programmer and amateur astronomer. </div> <br><br> <p class="fadeOnScroll"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minima fuga debitis quasi eius aliquid sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa, sit illo, eum doloribus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi reprehenderit voluptatum aperiam pariatur numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt dolore nemo veniam maiores vitae deserunt cum ducimus. </p> <p class="fadeOnScroll"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minima fuga debitis quasi eius aliquid sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa, sit illo, eum doloribus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi reprehenderit voluptatum aperiam pariatur numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt dolore nemo veniam maiores vitae deserunt cum ducimus. </p> </div> <!--Background--> <div data-depth="4" class="background"></div> </div> <script src="./js/homepage.js"></script> <script src="./js/fade.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> </body> </html>
body { height: fit-content; margin: 0; padding: 0; font-family: "Open Sans", sans-serif; font-size: 14px; color: #333; background: #fff; } /* Works on Firefox */ * { scrollbar-width: thin; scrollbar-color: #000000dd #00000000; } /* Works on Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 12px; background-color: rgba(0, 0, 0, 0.61); backdrop-filter: blur(5px); border-radius: 64%; } *::-webkit-scrollbar-track { background: #0000; background-color: rgba(0, 0, 0, 0.61); backdrop-filter: blur(5px); } *::-webkit-scrollbar-thumb { background-color: blue; border-radius: 20px; border: 3px solid #0000; background-color: rgba(0, 0, 0, 0.61); backdrop-filter: blur(5px); } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes blur { 0% { filter: blur(0px); } 100% { filter: blur(5px); } } @keyframes unblur { 0% { filter: blur(5px); } 100% { filter: blur(0px); } } @keyframes enlarge { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes shrink { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } .horisontal-spacer { height: 40%; flex: 1; } .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .background { background-color: #ff0000aa; backdrop-filter: blur(5px); border-radius: 10px; width:100%; height: 100%; z-index: 0; } .container { backdrop-filter: blur(5px); background-color: #00000022; border-radius: 10px; width:100%; height: fit-content; z-index: 1; padding: 32px; } .profile { width: 100%; border-radius: 10%; animation: fadeIn 0.5s ease-in-out; } .username { font-size: 64px; font-family: Arial, Helvetica, sans-serif; margin-top: 4%; animation: fadeIn 0.5s ease-in-out; text-align: center; color:turquoise; } .userdesc { font-size: 24px; font-family: Arial, Helvetica, sans-serif; margin-top: 4%; animation: fadeIn 0.5s ease-in-out; text-align: center; color: black; }
When you view the result, the 'container' div is not actually 100% width, and it won't increase its width no matter what. Preview
Whoops! The problem wasn't Parallax. It was Bootstrap! My bad!
Hey there! I've been designing my portfolio with parallax.js.
index.html
main.css
When you view the result, the 'container' div is not actually 100% width, and it won't increase its width no matter what. Preview