В этой статье расскажем, как создать собственный современный веб-сайт портфолио с использованием HTML, CSS и JS. Вы создадите временную шкалу CSS, чтобы продемонстрировать свое образование и опыт, сделаете раздел для своего проекта с эффектом крутого наведения. Сделайте похожее портфолио, чтобы произвести впечатление на рекрутера.
Код
Итак, давайте начнем с создания навигационной панели для сайта. Но перед этим вы должны знать наши файлы и папки.
Вы можете скачать изображения здесь.
Панель навигации
Итак, давайте начнем, чтобы создать navbar, сначала напишите базовый HTML-шаблон и style.css и app.js дляindex.html файла. После того, как со всем этим покончено. Создайте панель навигации.
<!-- navbar --> <nav class="navbar"><ul class="link-group"><li class="link active"><a href="#">home</a></li><li class="link"><a href="#">projects</a></li><li class="link"><a href="#">about</a></li><li class="link"><a href="#">contact</a></li></ul> </nav>
Мы закончили с HTMl, теперь добавьте к нему стиль.
*{margin: 0;padding: 0;box-sizing: border-box;} body{width: 100%;max-width: 1400px;display: block;margin: auto;min-height: 100vh;background: #191919;font-family: sans-serif; } .navbar{width: 100%;position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 9;background: #1a1a1a; } .link-group{list-style: none;display: flex} .link a{color: #fff;opacity: 0.5;text-decoration: none;text-transform: capitalize;padding: 10px 30px;margin: 0 20px;line-height: 80px;transition: .5s;font-size: 20px; } .link a:hover, .link.active a{opacity: 1; }
Закончив с этим, вы увидите что-то подобное.
Итак, мы закончили с navbar. Итак, давайте перейдем к нашему домашнему разделу
Главная страница
Для создания кода домашнего раздела используется HTML-структура после элемента navbar.
<!-- home section --> <section class="home-section active"><h1 class="hero-heading">hello, i am <br> kunaal</h1><img src="img/home.png" class="home-img" alt=""> </section>
Придайте несколько стилей.
.home-section{width: 100%;height: 100vh;padding: 0 150px;display: flex;align-items: center;position: relative;top: 0;opacity: 0;transition: 1s; } .hero-heading{color: #fff;font-size: 120px;text-transform: capitalize;font-weight: 300; } .home-img{position: absolute;top: 0;right: 0;height: 100vh;width: 50%;object-fit: cover;opacity: 0.2; }
Если вы напишете приведенный выше код, вы увидите position: relative и top: 0 в .home-section. Эти свойства важны во время навигации, потому что то, как будет работать наша навигация, немного сложно. Все наши разделы (главная, проект, о нас, контакт) все это будет иметь position: fixed из-за этого, все разделы будут друг на друге. И мы будем использовать active класс для указания активного раздела. Используя active класс, мы установим положение раздела относительным, а его непрозрачность равной 1. Так будет работать наша навигация.
Итак, как только вы закончите с домашним разделом, убедитесь, что вы меняете его положение на fixed с относительного.
.home-section{/* previous styles */position: fixed; }
Затем создайте active стили классов.
.home-section.active, .project-section.active, .about-section.active, .contact-section.active{position: relative;opacity: 1;z-index: 8; }
Раздел проекта
Теперь давайте сделаем раздел проекта.
<!-- project section --> <section class="project-section"><h1 class="project-heading">some of my projects</h1><div class="project-container"><div class="project-card"><img src="img/project-1.png" class="project-img" alt=""><div class="project-content"><h1 class="project-title">project 01</h1><p class="project-info">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit vitae delectus cumque repudiandae aliquam optio accusamus natus nobis! Nam, sunt?</p><div class="project-btn-grp"><button class="project-btn github">github repo</button><button class="project-btn live">see live</button></div></div></div>// +3 more cards</div> </section>
Также стилизуйте его.
/* project-section */ .project-section{width: 100%;min-height: 100vh;padding: 150px 100px 100px;position: fixed;top: 0;transition: 1s;opacity: 0; } .project-heading{font-size: 100px;background: #252525;text-transform: capitalize;text-align: center;margin-bottom: 50px;color: #1a1a1a;background-clip: text;-webkit-background-clip: text;-webkit-text-stroke: 8px transparent; } .project-container{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 100px; } .project-card{height: 400px;position: relative; } .project-img{width: 100%;height: 100%;position: absolute;top: 0; left: 0;object-fit: cover;transition: .5s; } .project-content{position: relative;padding: 40px;color: #fff;transition: .5s;opacity: 0; } .project-title{font-size: 50px;text-transform: capitalize;text-align: center;font-weight: 300; } .project-info{margin: 40px;font-size: 20px;line-height: 30px;text-align: center; } .project-btn-grp{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 20px; } .project-btn{height: 40px;text-transform: capitalize;font-size: 18px;border: none;background: #000;color: #fff;cursor: pointer; } .project-btn.live{background: none;border: 2px solid #fff; } .project-card:hover .project-img{filter: blur(20px); } .project-card:hover .project-content{opacity: 1; }
В приведенном выше коде уже добавили fixed позицию в project-section и определили ее непрозрачность в 0. Но для того, чтобы вы увидели выход. убедитесь, что вы указали active класс в project-section как показано ниже.
<section class="project-section active">
Вывод С эффектом наведения
Навигация
Прежде чем идти вперед, давайте сначала сделаем навигационную систему. Для этого напишем код внутри app.js файла.
const links = document.querySelectorAll('.link'); const sections = document.querySelectorAll('section'); let activeLink = 0; links.forEach((link, i) => {link.addEventListener('click', () => {if(activeLink != i){links[activeLink].classList.remove('active');link.classList.add('active');sections[activeLink].classList.remove('active');setTimeout(() => {activeLink = i;sections[i].classList.add('active');}, 1000);}}) })
В приведенном выше коде сначала выбираем все ссылки и разделы. После этого определяемactiveLink Эта переменная будет отслеживать текущий активный раздел или ссылку. После этого используем метод forEach чтобы зациклиться на всех ссылках. Внутри этого получаем доступ к отдельной ссылке и ее индексу.
Сначала внутри добавляем событие клика для ссылки с помощью addEventListener. Затем используем простое условие, чтобы убедиться, что пользователь не нажимает на активную ссылку. После этого удаляем активный класс из текущей активной ссылки с помощью classList.remove и добавляемactive класс к щелкнутой ссылке с помощью classList.add. Делаем то же самое, чтобы удалить active класс из активного раздела.
Как только это будет сделано, используемsetTimeout чтобы добавить задержку 1s при выполнении приведенных ниже кодов. Внутри тайм-аута это просто добавление активного класса снова.
Раздел About
Теперь давайте создадим раздел «О нас». В нашем разделе «О нас» есть все, в нем есть раздел навыков, а также временная шкала образования.
Чтобы создать раздел о программе, закодируйте его после project section.
<!-- about section --> <section class="about-section"><div class="about"><div class="about-img-container"><img src="img/home.png" class="about-img" alt=""><button class="download-cv-btn">downlaod cv</button></div><p class="about-info">Lorem ipsum.....</p></div> </section>
И стилизируйте его.
/* about-section */ .about-section{width: 100%;min-height: 100vh;padding: 150px 100px 0;position: fixed;top: 0;opacity: 0;transition: 1s; } .about{width: 100%;display: grid;grid-template-columns: 30% 65%;grid-gap: 40px; } .about-img-container{position: relative; } .about-info{color: #fff;opacity: 0.6;font-size: 20px;line-height: 40px; } .about-img{width: 100%;height: 100%;object-fit: cover;border-radius: 20px; } .download-cv-btn{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);padding: 10px 20px;color: #fff;border: none;font-size: 16px;text-transform: capitalize;cursor: pointer;transition: .5s;background: rgba(0, 0, 0, 0.5); } .download-cv-btn:hover{background: #000; }
Опять же, вы можете ничего не увидеть, обязательно добавьте active класс в about-section и удалите его из всех других разделов.
Итак, теперь мы создадим раздел навыков. Ну, в нашем разделе навыков нет ни одного индикатора развития навыков, который является наиболее используемой вещью в портфолио.
<!-- skills --> <div class="skill-section"><h1 class="heading">skills</h1><div class="skills-container"><div class="skill-card"><img src="img/html.png" class="skill-img" alt=""><div class="skill-level">98%</div><h1 class="skill-name">HTML</h1><p class="skill-info">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, delectus!</p></div>// +4 more cards</div> </div>
Закодируйте приведенный выше код под элементом about-section и стилизуйте.
/* skills */ .skill-section{position: relative;margin: 100px 0; } .heading{text-align: center;font-size: 60px;color: #fff;text-transform: capitalize;font-weight: 300;margin-bottom: 100px; } .skills-container{width: 95%;margin: auto;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 100px;color: #fff; } .skill-card{position: relative; } .skill-img{display: block;margin: auto;height: 200px; } .skill-name{font-size: 30px;font-weight: 300;text-align: center;text-transform: capitalize;margin: 30px 0 20px; } .skill-info{text-align: center;opacity: 0.5;font-size: 18px;line-height: 30px; } .skill-level{position: absolute;top: 80px;right: 0;width: 150px;height: 150px;display: flex;justify-content: center;align-items: center;font-size: 22px;border-radius: 50%;border: 10px solid; } .skill-card:nth-child(1) .skill-level{background: #ff4f4f28;border-color: #ff4f4f;color: #ff4f4f; } .skill-card:nth-child(2) .skill-level{background: #4fa0ff28;border-color: #4fa0ff;color: #4fa0ff; } .skill-card:nth-child(3) .skill-level{background: #ffed4f28;border-color: #ffed4f;color: #ffed4f; } .skill-card:nth-child(4) .skill-level{background: #52ff4f28;border-color: #52ff4f;color: #52ff4f; } .skill-card:nth-child(5) .skill-level{background: #4fdfff28;border-color: #4fdfff;color: #4fdfff; }
А теперь самое сложное - временная шкала CSS.
<!-- timeline --> <div class="timeline"><h1 class="heading">education and experience</h1><div class="card"><div class="card-body"><h1 class="card-title">2000-2002</h1><p class="card-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto sequi recusandae laborum ipsam dignissimos nostrum vitae provident officia, consectetur ab accusantium corrupti exercitationem temporibus repellat non magni cupiditate ea reprehenderit.</p></div></div>//+4 more cards </div>
Обязательно добавьте этот код внутри about-section
/* timeline */ .timeline{display: block;width: 80%;margin: 150px auto; } .timeline .heading{margin-bottom: 150px; } .card{width: 45%;padding: 30px;border-radius: 10px;color: #fff;display: block;margin: -80px 0;position: relative;background: #f00; } .card:nth-child(even){margin-left: auto; } .card:nth-child(even):before{content: '';position: absolute;left: -15%;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;border: 5px solid #191919;border-radius: 50%; } .card:nth-child(even):after{content: '';position: absolute;left: -8.5%;top: 50%;transform: translateY(-50%);width: 7%;height: 2px;background: #fff;z-index: -1; } .card:nth-child(odd):before{ content: ''; position: absolute; right: -13%; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 5px solid #191919; border-radius: 50%; } .card:nth-child(odd):after{ content: ''; position: absolute; right: -8.5%; top: 50%; transform: translateY(-50%); width: 7%; height: 2px; background: #fff; z-index: -1; } .card:nth-child(2), .card:nth-child(2):before{ background: #ff4f4f; } .card:nth-child(3), .card:nth-child(3):before{ background: #ffb84f; } .card:nth-child(4), .card:nth-child(4):before{ background: #3dca5c; } .card:nth-child(5), .card:nth-child(5):before{ background: #565252; } .card:nth-child(6), .card:nth-child(6):before{ background: #4fa0ff; } .card:nth-child(even) .card-body:before{content: '';position: absolute;left: -12%;top: 0;width: 0px;height: 100%;border: 1px dashed #fff;z-index: -1; } .card-title{font-size: 30px;font-weight: 300;margin-bottom: 20px; }
Раздел "Контакты"
и последняя часть контактного раздела. Давайте создадим и это.
<!-- contact section --> <section class="contact-section"><form class="contact-form"><input type="text" name="name" id="name" autocomplete="off" placeholder="name"><input type="text" name="email" id="email" autocomplete="off" placeholder="email"><textarea name="msg" id="msg" placeholder="message" autocomplete="off"></textarea><button type="submit" class="form-submit-btn">contact</button></form><!-- map --><div class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d448181.163742937!2d76.81306771991275!3d28.647279935262464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x37205b715389640!2sDelhi!5e0!3m2!1sen!2sin!4v1639489002410!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div> </section>
Кстати, приведенный выше код iframe - это ссылка для встраивания карты Google. Вы можете получить его с помощью карты Google.
.contact-section{position: absolute;top: 0;opacity: 0;transition: 1s;padding: 100px 150px;height: 100vh;display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 50px; } .contact-form input, .contact-form textarea{width: 100%;height: 40px;background: rgba(255, 255, 255, 0.2);border: 1px solid #fff;margin-bottom: 30px;border-radius: 5px;text-transform: capitalize;color: #fff;padding: 5px 10px; } ::placeholder{color: #fff; } #msg{height: 280px;resize: none;font-family: sans-serif; } .form-submit-btn{background: #ff4f4f;color: #fff;text-transform: capitalize;padding: 15px 40px;display: block;margin: auto;border: none;border-radius: 10px;cursor: pointer; } .map{width: 100%;height: 100%;padding: 10px;border: 2px solid #fff;background: rgba(255, 255, 255, 0.2);border-radius: 10px; } .map iframe{width: 100%;height: 100%;border-radius: 5px; }
Вот и все. Отличная работа, ребята. С портфолио покончено.
0 комментариев
Добавить комментарий