HTML Code for Student Profile Page | HTML Profile Template
Are you working on a school/college website project and looking for a student profile page? Well! you are in the right place. Here I’m going to share HTML code for student profile page design with step by step implementation guide.
Basically, this is a simple profile page design containing different sections of the student profile. As you have seen in the above image, the left-sided section contains a circular profile picture, name, and student ID. On the other hand, a detailed section for the student information is located. All these elements can be viewed in action on the demo page.
You can display this profile page after submitting the student registration form as a student dashboard. Besides this, this one-page template also can be used as a simple portfolio page.
Getting Started with Coding
This student profile page uses the Bootstrap CSS for the responsive design and Font Awesome for icons. So, include the following CDN links for Google fonts, Bootstrap, and Font Awesome CSS into the head tag of your HTML document.
HTML Code for Student Profile
After loading all dependencies, now its time to create the HTML code structure for the student profile page. So the following is the complete code for the profile page.
Ishmam Ahasan Samin
321000001
General Information
Roll
:
125
Academic Year
:
2020
Gender
:
Male
Religion
:
Group
blood
:
B+
Other Information
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Styling with CSS
The layout structure for the profile page depends on Bootstrap CSS. Anyhow, we need some additional styles to customize. So, define the CSS for the body element as follows:
After that, target the Bootstrap «card» class and add a border-radius property with a 10px value. You can also set the custom value if you want to increase/decrease the size of rounded corners.
Now we will make the circular profile photo. To do so, you need to set the fixed width and height with 50% border-radius. Therefore, define the dimension of the «profile_img» element as 150ox and set a solid border. Specify the «cover» value for the CSS object-fit property.
.student-profile .card .card-header .profile_img
Define the font-weight and font-size for the card heading as follows:
Likewise, set the color and font size for the card paragraphs. You can set custom HTML colors for text according to your choice.
Finally, add some spacing between the table cells by defining CSS padding property for the th and td element. Similarly, specify font size and text color as described below. You can set the custom values for the font-size, padding, and color according to your template.
You have done it! Hopefully, you found this tutorial helpful to create a student profile page. If you have any questions or suggestions let me know by comment below.
Подключены шрифтовые иконки, что установлены под ссылки. Что по мне, так они лишнее, можно что-то по факту поставить, чтоб перейти как пример, на тот материал, что был создан или залит на сайт этим пользователем. Тематически не привязана, но больше всего по своему формату можно поставить под разные наклонение тематики, что интернет магазин или игровой сайт.
1. Многофункциональная карта профиля; 2. Хорошо документированы; 3. Полностью отзывчивый; 4. Нет перезагрузки страницы; 5. Включает также контактную форму; 6. Используемые иконки;
Больше всего его создавали под оригинальный дизайн, где на страницу, что отведена для пользователей, можно разместить этот скрипт.
See the Pen User profile by Jose Pino (@jofpin) on CodePen.
Daily UI #006: User Profile
Bootstrap User Profile
User Profile
See the Pen User Profile by Travis Williamson (@travisw) on CodePen.
#dailyui 006: User Profile
Daily UI User Profile
Simple User Profile Widget
User Profile
See the Pen User Profile by Nick lewis (@nickylew) on CodePen.
CodePen User Profile Card
Bootstrap User Profile
DailyUI | User Profile
Simple profile UI
Bounty Hunter Profile UI
User Profile / Pet Adoption Card
React DailyUI — User Profile
Day 3: User Profile
User profile
See the Pen User profile by Anand (@nad) on CodePen.
just another Css tabs (:checked)
User Profile Header
ReactJS: GitHub User Cards
User profile page
Vertical User Profile Widget
User Profile
See the Pen User Profile by Veronica Rivera (@justvcreative) on CodePen.
User Profile Page
CSS User Profile Card
Profile Box
See the Pen Profile Box by Theodore Kluge (@villa7) on CodePen.
ES6 React User Profile Card
User Profile
See the Pen User Profile by MohamadReza Deylami (@imohamad) on CodePen.
User Profile Card Animation
See the Pen User Profile Card Animation by Vincent Van Goggles (@Gogh) on CodePen.
DailyUI — User Profile
Post a Comment
Post a Comment
Best Selected YouTube Theme Extension For Web Store
How to enable Right Click of Microsoft edge | Google Chrome | Mozilla Firefox browser if it is disabled
How to automatically like and subscribe to your browser with just one extension[YouTube auto]
DRUM PAD WEB EXTENSION DOWNLOAD YOUR WEBSTORE
Block YouTube Ads and Video Ads in Microsoft Edge Browser
How to change the color glow of Bing web browser.
Adblock Glow Youtube™ [ The Best Google Chrome Extension 2022]
Get Remove any element that is Mouse clicked
How To Block [SonyLiv] [YouTube] [MxPlayer] Ads Skipper
Show Instagram Fake Followers in Microsoft Edge Browser
About Us
We create a variety of programs and Web Design that will show codehemu. We Show simplified and interactive learning experiences. Codehemu is for web developers, covering all the aspects of web development and shows a variety of programming with.
