About Me Html Template

Create a Theme: 'Simply Me'

Each template includes a review, long screenshot, live demo and download links. These HTML templates require a small amount of coding skill. If you need a content management system, I recommend browsing One Page WordPress Themes. Bootstrap Registration Form Template - Free Download. SIGN UP FORM Easily add registration forms without a server-side integration.

  • About Us HTML Templates. Free Download the biggest collection of HTML templates. HTML website template code. Freely use basic and simple HTML templates for your commercial or personal use.
  • 1 to 12 of 993 Free Personal Website Templates Available on the Free CSS site.
  • Personal Website HTML Template. ABOUT ME I AM A PHOTOGRAPHER & DESIGNER Dedicated and energised professional photographer with 7+ years' comprehensive experience in customized and also specialized photography.

This page will show you how to build a Bootstrap theme from scratch.

We will start with a simple HTML page, and then add more and more components, until we have a fully functional, personal and responsive website.

The result will look like this, and you are free to modify, save, share, use or do whatever you want with it:

HTML Start Page

We will start with the following HTML page:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset='utf-8'>
<meta name='viewport'>
</head>
<body>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</body>
</html>

Add Bootstrap CDN and Put Elements in Container

Add Bootstrap CDN and a link to jQuery and put HTML elements inside a container:

Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset='utf-8'>
<meta name='viewport'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>
<div>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</div>
</body>
</html>

Result:

About Me Html TemplateTry it Yourself »

Add Background Color and Center Text

1. Add a custom class (.bg-1) to the container to add a background color.

2. Add the .text-center class to center the text inside the container:

Example

About Me Html Template

<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<body>
<div>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</div>
</body>

Result:

Try it Yourself »

Circle Image

Shape the image to a circle with the .img-circle class:

Example

<img src='bird.jpg' alt='Bird'>

Result:

Try it Yourself »

More Content

Add more content and put it inside new containers:

Example

<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
</style>
</head>
<body>
<div>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</div>
<div>
<h3>What Am I?</h3>
<p>Lorem ipsum.</p>
</div>
<div>
<h3>Where To Find Me?</h3>
<p>Lorem ipsum.</p>
</div>
</body>

Result:

What Am I?

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.

Where To Find Me?

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.

Try it Yourself »

Add Padding

Lets make the containers look good by adding some padding:

Example

<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>

Result:

What Am I?

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.

Where To Find Me?

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.

Try it Yourself »

Add a Button

Add a button to the mid container:

Example

<div>
<h3>What Am I?</h3>
<p>Lorem ipsum.</p>
<a href='#'>Search</a>
</div>

Result:

What Am I?

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.

SearchTry it Yourself »

Add an Icon

Add a Search icon on the 'Search' button:

Example

<a href='#'>
<span></span> Search
</a>

Result:

Try it Yourself »

Modify The Third Container (Add Grid)

Add three columns of equal width inside the third container (.col-sm-4):

Example

<div>
<h3>Where To Find Me?</h3>
<div>
<div>
<p>Lorem ipsum.</p>
<img src='birds1.jpg' alt='Image'>
</div>
<div>
<p>Lorem ipsum.</p>
<img src='birds2.jpg' alt='Image'>
</div>
<div>
<p>Lorem ipsum.</p>
<img src='birds3.jpg' alt='Image'>
</div>
</div>
</div>

Result:

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Try it Yourself »

Make The Images Responsive

Add the .img-responsive class to all images.

Add display:inline to the first image to force it to be centered (the .img-responsive class adds display:block to the image, which makes it jump to the left of the screen).

If you want the image to span the entire width of the screen when it starts to stack, add width:100% to the image.

When opening the example, remember to resize the screen to see the responsive effect:

Example

<!-- The circular bird -->
<img src='bird.jpg' alt='Bird'>
<!-- The birds in our grid: -->
<img src='birds1.jpg' alt='Image'>
<img src='birds2.jpg' alt='Image'>
<img src='birds3.jpg' alt='Image'>
Try it Yourself »

Add a Navbar

Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:

Example

<nav>
<div>
<div>
<button type='button'>
<span></span>
<span></span>
<span></span>
</button>
<a href='#'>Me</a>
</div>
<div>
<ul>
<li><a href='#'>WHO</a></li>
<li><a href='#'>WHAT</a></li>
<li><a href='#'>WHERE</a></li>
</ul>
</div>
</div>
</nav>

Result:

Try it Yourself »

Style The Navbar

Use CSS to customize the navigation bar:

Example

.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}

Result:

Try it Yourself »

Add a Footer

Add a footer and use CSS to style it:

Example

<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer>
<p>Bootstrap Theme Made By <a href='https://www.w3schools.com'>www.w3schools.com</a></p>
</footer>

Result:

Try it Yourself »

Final Touch

Personalize your Theme by adding a font that you like. We have used 'Montserrat' from Google's Font Library.

Link to the font in the <head> section:

<link href='https://fonts.googleapis.com/css?family=Montserrat'> Joomla responsive templates free.

Then you can use it in the page:

Example

body {
font: 20px 'Montserrat', sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}

We have also created a 'helper' margin class to add extra space where we think it's needed; usually after each <h3> and <img> element.

Example

Try it Yourself »

Complete 'Simply Me' Theme



About me html template

HOW TO

HowTo Home

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

About Me Page Template Html Css

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Html About Us Template


Buttons

Alert ButtonsOutline ButtonsSplit ButtonsAnimated ButtonsFading ButtonsButton on ImageSocial Media ButtonsRead More Read LessLoading ButtonsDownload ButtonsPill ButtonsNotification ButtonIcon ButtonsNext/prev ButtonsMore Button in NavBlock ButtonsText ButtonsRound ButtonsScroll To Top Button

Forms

Login FormSignup FormCheckout FormContact FormSocial Login FormRegister FormForm with IconsNewsletterStacked FormResponsive FormPopup FormInline FormClear Input FieldHide Number ArrowsCopy Text to ClipboardAnimated SearchSearch ButtonFullscreen SearchInput Field in NavbarLogin Form in NavbarCustom Checkbox/RadioCustom SelectToggle SwitchCheck CheckboxDetect Caps LockTrigger Button on EnterPassword ValidationToggle Password VisibilityMultiple Step FormAutocompleteTurn off autocompleteTurn off spellcheckFile Upload ButtonEmpty Input Validation

About Me Html Templates


Filters

Filter ListFilter TableFilter ElementsFilter DropdownSort ListSort Table

Tables

Zebra Striped TableCenter TablesFull-width TableSide-by-side TablesResponsive TablesComparison Table

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Website

Make a WebsiteMake a Website (W3.CSS)Make a Website (BS3)Make a Website (BS4)Make a WebBookCenter WebsiteContact SectionAbout PageBig HeaderExample Website

Grid

2 Column Layout3 Column Layout4 Column LayoutExpanding GridList Grid ViewMixed Column LayoutColumn CardsZig Zag LayoutBlog Layout

Google

Google ChartsGoogle FontsGoogle Font Pairings

Converters

Convert WeightConvert TemperatureConvert LengthConvert Speed