swiper实现三维翻转个人简历作品集网站代码
代码语言:html
所属分类:其他
代码描述:swiper实现三维翻转个人简历作品集网站代码
代码标签: swiper 三维 翻转 个人 简历 作品集 网站 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.11.0.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bonbon&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; } main { display: flex; height: 100%; width: 100%; font-family: Poppins; } aside { width: 280px; display: flex; flex-direction: column; height: 100%; font-size: 1.1rem; background-color: #212529; backdrop-filter: blur(20px); } .Links { display: flex; flex-direction: column; margin: auto; } aside li { list-style-type: none; display: flex; padding: 20px; gap: 10px; color: white; align-items: center; cursor: pointer; position: relative; transition-duration: 0.2s; } aside li:hover { color: #80ed99; } aside li::after { position: absolute; width: 100%; left: 0px; height: 1px; background: linear-gradient(to left, transparent, #ffffff24, transparent); content: ''; bottom: 0px; } aside li i { font-size: 1.3rem; } .activeLink{ color:#80ed99 } .mySwiper { flex: 1; height: 100%; } .home-slide { color: white; display: flex; background-color: #343a40; } .HomeContent { margin: auto 0px; flex: 1; height: auto; padding: 100px; user-select: none; } .SideImg { width: 30%; margin: auto 10px; margin-right: 100px; position: relative; } .SideImg img { width: 100%; border-radius: 10px; } .SideImg .top-right-corner, .bottom-left-corner { position: absolute; } .bottom-left-corner { left: -50px; bottom: -50px; rotate: -90deg; } .top-right-corner { right: -50px; top: -50px; rotate: 90deg; } .hr1 { width: 150px; height: 10px; border: none; background: #80ed99; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .hr2 { width: 10px; height: 120px; border-bottom-left-radius: 3px; background: #80ed99; border: none; border-bottom-right-radius: 3px; } .HomeContent h1 { font-size: 3em; font-weight: 700; margin-bottom: 10px; } .HomeContent h2 { font-size: 2.3em; margin-bottom: 10px; font-weight: 600; } .HomeContent h1 .stylized-name { font-weight: 700; color: #80ed99; } .proffesions { color: #85f69f; } .HomeContent .heroline { font-size: 1.5rem; font-weight: 300; padding-right:50px; } .buttonGroup { display: flex; padding: 10px 0px; margin-top: 10px; } .buttonGroup button ,.primary{ padding: 10px 20px; border: none; outline: none; font-size: 1.2rem; font-weight: 500; margin: 5px; cursor: pointer; background-color: #1d8637; color: white; border-radius: 5px; } .slide-help { position: absolute; bottom: 10px; width: 100%; text-align: center; font-weight: 400; z-index: 100; left: 0%; width: 100%; box-sizing: border-box; font-size: 1.2rem; } .mySwiper { width: 80vw; height: 100vh; overflow: hidden; background-color: #343a40; } .swiper-slide { width: 100%; background-color: #343a40; height: 100%; } .about-us { width:100%; height:100%; padding: 100px; color: white; } .heading { padding: 20px 10px; font-size: 2.5rem; color: #80ed99; } .about-us h3 { padding: 10px; } .aboutme-deatils { padding: 20px; font-weight: 300; } .about-me-divison { display: flex; } .about-me-table { width: 60%; display: grid; grid-template-columns: repeat(2, 50%); } .about-me-table li { padding: 20px; position: relative; } .about-me-table li::after { position: absolute; width: 100%; left: 0px; height: 1px; background: linear-gradient(to left, transparent, #ffffff77, transparent); content: ''; bottom: 0px; } .about-me-table span { color: #80ed99; font-weight: bold; margin-right: 5px; } .about-me-table .buttonGroup { grid-column: 1/span 2; justify-content: center; padding: 50px; flex: 1; } .skill-bar { width: calc(40% - 20px); } .skill-bar li { width: 100%; padding: 10px; } .skill-bar p { color: #80ed99; font-weight: bold; margin: 10px; } .skill-bar .bar { width: 100%; height: 15px; background-color: #272c30; border-radius: 20px; } .active-bar { background-color: #80ed99; height: 100%; width: auto; border-radius: 20px; } .services { color: white; display: grid; grid-template-columns: repeat(3, calc(34% - 10px)); grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px); padding: 100px ; box-sizing: border-box; } .services .heading { grid-column: 1/span 3; } .services .service { display: flex; text-align: center; justify-content: center; padding: 15px; background-color: rgba(0, 0, 0, 0.437); border-radius: 5px; margin: 20px; backdrop-filter: blur(10px); flex-direction: column; transition-duration: 0.25s; } .services .service i { font-size: 3rem; color:#80ed99 } .services .service .service-icon { padding: 0px 50px; border-radius: 5px; margin: 20px auto; } .service h2{ color:#80ed99 } .service:hover { background-color: #80ed99; color: #176d2d } .service:hover h2,.service:hover i{ color: #176d2d } .gallery { display: grid; grid-template-columns: repeat(3, 33%); padding:100px; grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px); } .gallery h1, .gallery h2 { grid-column: 1/span 3; } .gallery h2 { color: white; font-weight: 600; font-size: 1.5rem; padding: 20px 10px; } .gallery .project { margin: 25px 20px; margin-top: 0px; background: #212529; padding: 5px; border-radius: 20px; } .gallery .project img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; border:none; } .contactMe { display: grid; grid-template-columns: 20% 80%; grid-template-rows: 80px calc(25% - 20px) calc(25% - 20px) calc(25% - 20px) calc(25% - 20px); position: relative; padding:100px; } .contactMe h1 { grid-column: 1/span 3; font-size:2.5rem; padding:30px; } .contactMe form { grid-area: 2/2/ span 5/span 2; } .contactinfo { display: flex; flex-direction: column; padding: 10px; color: white; justify-content: center; text-align: center; align-items: center; } .contactinfo i { padding: 10px; font-size: 2.5rem; color: #80ed99; margin: 20px auto; } .contactinfo h3 { color: #80ed99; } .contactMe form { display: grid; grid-template-columns: 50% 50%; width: 100%; padding: 20px; height: fit-content; color: white; } .contactMe form h2 { grid-column: 1/span 2; padding: 20px; display: flex; } .contactMe form input { padding: 15px; border-radius: 10px; margin: 20px; font-size: 1.1rem; border: none; color: white; background-color: #212529; } .contactMe form input:focus { border: 1px solid #85f69f; outline: none; } .contactMe form textarea { width: calc(100% - 40px); grid-column: 1/span 2; margin: 20px; padding: 20px; font-size: 1.1rem; border-radius: 10px; resize: none; border:none; border: none; color:white; background-color: #212529; } .contactMe form textarea:focus { border: 1px solid #85f69f !important; } .contactMe button{ grid-column: 1/span 2; margin:20px auto ; } footer{ position:absolute; bottom:0px; right:0px; text-align: center; color:white; width:100%; font-weight: 200; font-size: 0.8rem; } footer li{ padding:10px; } form h2 .SocialLinks{ padding:5px; width:fit-content; margin-left:auto; margin-right:10px; background-color: #212529; border-radius: 30px; } form h2 .SocialLinks i{ padding:10px; border-radius: 50%; transition-duration: 0.25s; } form h2 .SocialLinks i:hover{ background-color: #176d2d; } .about-us{ overflow: auto; } </style> </head> <body translate="no"> <main> <aside> <ul class="Links"> <li onclick="Navigate(0)" class="activeLink"><i class="fa-solid fa-house"></i> <p>Home</p> </li> <li onclick="Navigate(1)"><i class="fa-solid fa-user"></i> <p>About Me</p> </li> <li onclick="Navigate(2)"><i class="fa-solid fa-list"></i> <p>Services</p> </li> <li onclick="Navigate(3)"><i class="fa-solid fa-images"></i> <p>Gallery</p> </li> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0