Html portfolio template code

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website

License

CommunityPro/portfolio-html

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Build your portfolio using this super easy template. Free to use if you are a member of the community or a contributor to this project. If not, read our requirements if you plan on using this template for your portfolio.

This project is made from the tireless efforts of the community, so feel free to support our work by contributing, staring ✨ the project or sponsoring us. 🙏🏽

Are you contributing to this project, please ensure all pull requests and contributions comply with our guidelines.

Before making any changes, ensure you have raised an issue here, unless it is a minimal change like Typo error then you can go right ahead.

├── src │ ├── index.html │ ├── css │ │ ├── style.css │ │ ├── utilities.css │ ├── assets │ │ ├── favicon │ │ │ ├── android-chrome-192x192 │ │ │ ├── android-chrome-512x512 │ │ │ ├── apple-touch-icon │ │ │ ├── favicon-16x16 │ │ │ ├── favicon-32x32 │ │ │ ├── favicon.ico │ │ │ ├── site.webmanifest │ │ ├── profile-image │ │ ├── logo │ ├── js │ │ ├── script.js ├── .github │ ├── ISSUE_TEMPLATE │ │ ├── bug.md │ │ ├── feature.md │ ├── Pull_request_template.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── REQUIREMENTS.md ├── package.json └── .gitignore

✨ How to Customize this Template ✨

This portfolio uses modern HTML5 semantic tags like article, header, footer and more for better accessibility and improve SEO, you can read more about that on Jemima’s article: How to improve your SEO ranking. Also learn about metatags and how to generate them for SEO optimization here.

The root page of this project is located at /docs/index.html This is the default page you see when you visit the site. Want to customize this template to suit your style, here are a few things you can change:

The logo of this template is controlled by this line in the index.html markup, replace the ./assets/logo.png with your logo link or replace the current logo image without yours and rename it to logo.png

 h1 id pl-s">logo"> a href pl-s">#">img src pl-s">./assets/logo.png" alt pl-s">Your Logo">a> h1>

ul class pl-s">nav-menu"> li>a class pl-s">nav-link" href pl-s">#">PROJECTSa>li> li>a class pl-s">nav-link" href pl-s">#">CONTACTa>li> li>a class pl-s">nav-link" href pl-s">#">BlOGa>li> li>a class pl-s">nav-link btn btn-primary" href pl-s">#">RESUME i class pl-s">fas fa-arrow-right">i>a> li> ul>

Replace the # symbol with your respective link. Delete any nav-link that is not being used or edit the name with your own preferred link source.

• The last navigation link is the highlighted yellow button on the template. Which is styled with the btn & btn-primary classes.

Replace the icon or user profile with your profile image. Image can be found in the /assets/profile-image.png .

img class pl-s">profile-image" src pl-s">./assets/profile-image.png" alt="" />

You can add the image locally by replacing it with the /assets/profile-image.png . Or replace the src link in the HTML file with your preferred image. I recommmend you copy your GitHub profile image link, so the image changes anytime you update it on GitHub.

Edit the name on the welcome message with your own name. This line of text can be found in the /docs/index.html file. Replace Franklin with your own name.

Summarize what you do in five words and add it into the line. Add the first two in the first element and add the remaining four on the next

h2>Building digitalh2> h2>products, brands, and experience.h2>

Update the job description with your information. 20 words recommended.

p> A Frontend Developer and Visual Designer with experience in web design, brand identity and product design. p>

Replace the # on the connect with me button with a link. You can choose what link you want your visitors to go when they click this button. Social links, email address or phone number, it’s completely up to you.

a href pl-s">#" class pl-s">btn btn-secondary">Connect With Mea>

This section showcases your projects using screenshots. It has 3 columns and 2 rows by default but you can add more columns according to your use case. The .project controls the number of columns and rows of the project cards.

div href="" class pl-s">card"> div class pl-s">project-info"> div class pl-s">project-bio"> h3>Project Oneh3> p>React, Redux, SASSp> div> div class pl-s">project-link"> a href pl-s">#">i class pl-s">fab fa-github">i>a> a href pl-s">#">i class pl-s">fas fa-globe">i>a> div> div> div>

To customize the cards, here are a few things you can change:

This is controlled by the element. Edit the text and add your preferred project name.

This is where you display the tools/technologies used in building the project. Edit the element with the specific tools or delete the line completely.

The project links are the icons on the top right of the project cards. One is the github link and the othe is the live link. You can paste the respective links into the empty href attributes. The icons are added using an icon library called fontawesome so changing this icon is super easy.

a href pl-s">#">i class pl-s">fab fa-github">i>a> a href pl-s">#">i class pl-s">fas fa-globe">i>a>

The layout of the project cards is controlled by the .project in the style.css file. By using CSS grid-template-columns , the cards are outlined on three columns on desktop mode, two columns on tablet mode and one column on mobile view.

.project < display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(250px, auto); grid-gap: 0.9rem; >

The footer links contain social icons that you can link to your specific social channels. By default the icons available are: Facebook , Twitter , LinkedIn , GitHub , Hashnode and the icons image are added locally to the assets folder, so you can add your own custom icon and link it.

a href pl-s">mailto:communitypro47@gmail.com">communitypro47@gmail.coma> div class pl-s">social"> a href pl-s">#">img src pl-s">./assets/facebook-icon.svg" alt pl-s">Facebook">a> a href pl-s">#">img src pl-s">./assets/twitter-icon.svg" alt pl-s">Twitter">a> a href pl-s">#">img src pl-s">./assets/linkedin-icon.svg" alt pl-s">Linkedin">a> a href pl-s">#">img src pl-s">./assets/github-icon.svg" alt pl-s">GitHub">a> a href pl-s">#">img src pl-s">./assets/hashnode-icon.svg" alt pl-s">Hashnode">a> div>

Use Metatags.io to generate meta tags for sharing your portfolio and for SEO benefits.

We are using plain CSS for this project and you can find that in the docs/css/ folder

Here are examples of portfolios customized using this template, you can draw inspiration from this list or add yours.

If you like this project, kindly star ⭐ and share this project. It means the world to us. You can also offer support by donating to keep this project going.

About

🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website

Источник

HTML шаблон для портфолио

На этом уроке мы научимся делать простое адаптивное портфолио, где количество столбцов, меняется в зависимости от ширины экрана на просматриваемом устройстве.

Демонстрация примера.

Из этого урока, пользу извлекут как начинающие верстальщики, так и представители разных профессий, которым нужен простой HTML шаблон портфолио. В конце урока будет ссылка на CodePen, откуда можно скачать данный шаблон.

HTML код

Сначала создадим секцию section, внутри которой поместим все остальные элементы сайта. Смысл секции в том, чтобы портфолио позиционировать в центре окна браузера, задав соответствующие ей стили.

LOGO.RU

---

Портфолио фотографа

При уменьшении окна браузера, вы увидите, как работает адаптивность. Затем строим сетку для галереи. Первый ряд и единственный, если работ в портфолио больше, то ряды можно добавить.

Внутри ряда идут четыре столбцы, где один столбец – одна работа в портфолио. Здесь я приведу код одного столбца, остальные будут идентичные, но с разным содержимым.

После первого ряда, расположилась одна большая фотография, с одним отличием, в коде, что нет тега div с классом row. В этом нет необходимости, поскольку фотография одна и после отмены обтекания, блок так и так встанет в новом ряду.

CSS код

Ограничим ширину секции с портфолио до 1000 пикселей , чтобы на больших экранах мониторов, превью фотографии не растягивались до бесконечности.

section max-width: 1000px;
margin: auto; /* вебсайт в центре окна браузера */
>

Задаем отступы со всех сторон от края браузера у блока с классом row.

Поля по 8 пикселей со всех сторон, между колонками у блоков с указанными классами.

.row,
.row > .column padding: 8px;
>

Правило, расположения четырех столбцов: каждый занимает 25% от контейнера и обтекает друг друга слева, как способ поставить их в ряд.

.column float: left;
width: 25%;
>

Способ отмены обтекания для следующих элементов, идущих после столбцов, в противном случае, большая фотография не появиться на новой строке.

.row:after content: «»;
display: table;
clear: both;
>

Добавляем адаптивность

На ширине экрана меньше, чем 900 пикселей, расположить по два столбца в ряд, вместо четырех.

@media screen and (max-width: 900px) .column width: 50%;
>
>

На ширине экрана меньше, чем 600 пикселей, оставить по одному столбцу в ряде, расположив все работы портфолио друг под другом.

@media screen and (max-width: 600px) .column width: 100%;
>
>

На CodePen, можно посмотреть весь код и импортировать шаблон себе на компьютер, в дальнейшем заменив фотографии и текст на свои.

Создано 30.11.2018 10:00:37

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник