About — An example of about us page

How TO — About Page

Add HTML: Example

Our Team

Some text that describes me lorem ipsum ipsum lorem.

jane@example.com

mike@example.com

john@example.com

html < box-sizing: border-box; >*, *:before, *:after < box-sizing: inherit; >.column < float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; >.card < box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); margin: 8px; >.about-section < padding: 50px; text-align: center; background-color: #474e5d; color: white; >.container < padding: 0 16px; >.container::after, .row::after

How TO — About Page

Learn how to create an about page / about us page.

About Us

Create an About Page

Step 1) Add HTML:

Example

About Us Page

Some text about who we are and what we do.

Resize the browser window to see that this page is responsive by the way.

Our Team

Jane Doe

Some text that describes me lorem ipsum ipsum lorem.

jane@example.com

Mike Ross

Some text that describes me lorem ipsum ipsum lorem.

mike@example.com

John Doe

Designer

Some text that describes me lorem ipsum ipsum lorem.

john@example.com

Step 2) Add CSS:

Example

body <
font-family: Arial, Helvetica, sans-serif;
margin: 0;
>

*, *:before, *:after <
box-sizing: inherit;
>

.column <
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
>

.card <
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
>

.about-section <
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
>

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

.button <
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
>

.button:hover <
background-color: #555;
>

@media screen and (max-width: 650px) <
.column <
width: 100%;
display: block;
>
>

Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.

Simple Portfolio Website Design using HTML, Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent, so in this article, we will learn how to make a simple one-page portfolio by just using HTML. This portfolio might contain some very important information of yours like: about us …

How To make design about us page using html and css

Hello Friends,In this video i am design a about us page that is use in your web site. i hope you are learn something new from this video.Keep Watching and Ke

How To Create An About Me Page With HTML And CSS

Resources: https://www.dropbox.com/sh/7wdhyiflhd4r1ph/AACBN_CuuA7Wja1ZhRT_qI5Ya?dl=0In this video I show you how to a create a cool about me …

Design an About us Page using HTML and CSS

To create an attractive page may seem to be difficult for, who don’t know HTML and CSS. If someone does not know using CSS, then they will not be able to make the page look better or attractive. So the main focus of this article will be on the implementation of CSS.

Источник

About Us Page

Some text about who we are and what we do.

Resize the browser window to see that this page is responsive by the way.

Читайте также:  Инструменты разметка html страницы

Our Team

Jane Doe

Some text that describes me lorem ipsum ipsum lorem.

jane@example.com

Mike Ross

Some text that describes me lorem ipsum ipsum lorem.

mike@example.com

John Doe

Some text that describes me lorem ipsum ipsum lorem.

john@example.com

Step 2) Add CSS:

Example

body <
font-family: Arial, Helvetica, sans-serif;
margin: 0;
>

*, *:before, *:after box-sizing: inherit;
>

.column float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
>

.card box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
>

.about-section padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
>

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

.button border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
>

.button:hover background-color: #555;
>

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

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

How to create an About Us page using only HTML CSS (download template)

In this post, I will give you an “About Us” page template to download. It was built with only HTML & CSS. But looks very professional & mobile-responsive.

I will also show you how I built this about us template from scratch. So you can learn basic HTML & CSS. If you’re already familiar with or an expert, you can go to the bottom of this post to find the download option.

Before we move forward, let’s the finished product (about page) in the link below.

A few facts about this template

When I create the template, I made sure that it was well structured both for humans & search engines. Also, I tried to optimize the template so it loads faster and even on a low-speed internet connection.

Please check a couple of performance reports below:

GTmetrix performance report

PageSpeed Insights performance report

How to use this about us template?

In this about us template, I created a couple of sections including an overlay hero banner section. After you download the template, you can edit the HTML, CSS, text & images as you see fit.

In my project, I have the following structure:

That means I have an index.html file in the project folder and also two folders such as sass & img. The sass & img folders contain the style.css & images respectively.

I used Roboto font for the entire template that you will find in the index.html file (within the tag).

You may need to rename the index.html file to about.html or about-us.html or whatever you like. For more information, please see how to create a multipage HTML website.

Download the about us template

If you want your about page exactly the same as mine, go ahead and download the template from my GitHub repository.

If you’re not familiar with GitHub, see the screenshot below to learn how to download a project:

But if you want the HTML & CSS only, see below:

HTML

               
About us 
Consectetur adipisicing elituscipit quidem facere itaque molestias vitae.
 

Adipisicing ipsum dolor sit amet consectetur elit. Consectetur beatae eius, labore quasi ab neque asperiores repellendus praesentium in! Necessitatibus excepturi, accusantium esse eosnulla odit dicta deserunt iusto soluta.

Labore quasi abneque asperiores repellendus praesentium in! Necessitatibus excepturi, accusantium esse eos nulla odit dicta deserunt iusto. Tuasi ablabore neque asperiores repellendus praesentium in! Necessitatibus excepturi, accusantium esse eos nulla odit dicta deserunt iusto soluta. Labore quasi ab neque asperiores repellendus praesentium.

Discover more ⟩

Perspiciatis cupiditate deserunt

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum in cumque, id quisquam praesentium unde dolor fugiat mollitia perspiciatis cupiditate deserunt, odit quo non officiis optio illum eum ad expedita? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit enim dolorum, adipisci explicabo, officia reprehenderit velit quasi voluptatibus consectetur et accusantium quam quaerat voluptates vel sapiente consequuntur doloribus illum dolores!

Learn more »

Mollitia consequatur

Lorem ipsum dolor sit amet consectetur, adipisicing elit. In consequuntur velit repudiandae nobis sunt quisquam odio nesciunt! Saepe aspernatur in ad itaque quasi vel voluptatem recusandae nemo rem uidem facilis.

Aliquidorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quo porro laborum non praesentium delectus ipsum, ullam necessitatibus assumenda voluptatem repellendus quis cumque nobis unde aliquam mollitia asperiores consequatur.

Contact us »

Margaret Hilda

Sitamet ipsum dolor consectetur adipisicing elit. Similique numquam aperiam commodi! Id, ipsam pariatur! Ex cupiditate officiis iste laboriosam quibusdam esse illo praesentium, nemo necessitatibus tempore.

Justin Trudeau

Lpsum dolor sit amet consectetur adipisicing elit. Similique numquam aperiam commodi! Id, ipsam pariatur! Ex cupiditate officiis iste laboriosam quibusdam esse illo praesentium.

Yoweri Museveni

Consectetur upsum dolor sit amet adipisicing elit. Similique numquam aperiam commodi! Id ipsam pariatur! Ex cupiditate officiis iste laboriosam quibusdam esse illo praesentium, nemo necessitatibus tempore. Cupiditate officiis iste laboriosam.

Your browser does not support the video tag.

Taborum modi fugiat rem aliquid quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum laboriosam laborum modi fugiat rem aliquid quod? Non, laudantium, aperiam deserunt sequi harum mollitia sapiente magnam rem expedita voluptas necessitatibus quam!

Magnam reprehenderit sequi provident minima! Molestiae eum repudiandae dolorem sapiente, expedita debitis corrupti quia! Suscipit, officia. Tenetur perspiciatis totam debitis maxime nam. Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Contact us »

CSS

* < -webkit-box-sizing: border-box; box-sizing: border-box; >body < margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background-color: #F8F9FA; color: #222222; font-weight: 400; >strong < font-weight: 700; >img < max-width: 100%; >p < font-size: 1.125rem; color: #222222; margin: 0 0 15px; line-height: 1.6; >h1, h2, h3, h4, h5, h6 < margin: 0; >h1 < color: #000000; font-size: 36px; >@media (min-width: 768px) < h1 < font-size: 80px; >> h2 < color: #222222; font-size: 30px; >@media (min-width: 768px) < h2 < font-size: 60px; >> h3 < color: #444444; font-size: 24px; >@media (min-width: 768px) < h3 < font-size: 50px; >> h4 < color: #555555; font-size: 22px; >@media (min-width: 768px) < h4 < font-size: 40px; >> h5 < color: #666666; font-size: 20px; >@media (min-width: 768px) < h5 < font-size: 35px; >> h6 < color: #777777; font-size: 18px; >@media (min-width: 768px) < h6 < font-size: 32px; >> section < padding: 90px 15px; >a.cta < padding: 10px 30px; text-align: center; text-decoration: none; background-color: #f72d3d; border: 1px solid #d41c2a; border-radius: 25px; color: #FFFFFF; text-transform: uppercase; display: inline-block; -webkit-box-shadow: rgba(100, 100, 111, 0.8) 0px 7px 19px 0px; box-shadow: rgba(100, 100, 111, 0.8) 0px 7px 19px 0px; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; >a.cta:hover < background-color: #f75763; border: 1px solid #3b1215; color: #000000; >.container < max-width: 1100px; margin: 0 auto; >.container img < padding: 0.25rem; border: 1px solid #bdbdbd; border-radius: 0.25rem; >.banner < background: -webkit-gradient(linear, left top, right top, from(rgba(241, 157, 0, 0.8)), to(rgba(0, 0, 0, 0.5))), url(../img/banner.jpg) no-repeat; background: linear-gradient(90deg, rgba(241, 157, 0, 0.8), rgba(0, 0, 0, 0.5)), url(../img/banner.jpg) no-repeat; background-position: top right; background-size: cover; >.banner h1 < color: rgba(255, 255, 255, 0.85); text-transform: uppercase; font-weight: 700; >.banner p < color: #FFFFFF; font-size: 1.375rem; letter-spacing: 1.5px; font-weight: 100; text-shadow: 2px 2px 7px #222222; >.first < background-color: #FFFFFF; background-image: linear-gradient(315deg, #a7a8a8 0%, #E9EBEC 74%); >.first .container < max-width: 800px; >.second < background-color: #fff8e6; >.second .container < display: block; >@media (min-width: 768px) < .second .container < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >> @media (min-width: 768px) < .second .container .left-img < -ms-flex-preferred-size: 30%; flex-basis: 30%; >> @media (min-width: 768px) < .second .container .right-content < -ms-flex-preferred-size: 65%; flex-basis: 65%; >> .second .container .right-content h2 < margin: 30px 0 0; >@media (min-width: 768px) < .second .container .right-content h2 < margin: 0; >> .third < background-color: #e6f5fc; >@media (min-width: 768px) < .third .container < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >> .third .container .left-content < -ms-flex-preferred-size: 68%; flex-basis: 68%; >.third .container .right-img < -ms-flex-preferred-size: 30%; flex-basis: 30%; >.four < background-color: #c6fcb8; >.four .container < display: block; >@media (min-width: 768px) < .four .container < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> .four .container .member < background-color: #c0c6fa; padding: 20px; margin: 0 0 60px; border-radius: 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; >@media (min-width: 768px) < .four .container .member < -ms-flex-preferred-size: 31%; flex-basis: 31%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> @media (min-width: 768px) < .four .container .member h3 < font-size: 32px; >> .four .container .member .social < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; >.four .container .member .social a img < border: none; max-width: 40px; >.five < background-color: #fcde88; >.five .container < max-width: 700px; -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 7px 29px 0px; box-shadow: rgba(0, 0, 0, 0.8) 0px 7px 29px 0px; >.five .container .video-wrapper < position: relative; padding-bottom: 56.25%; height: 0; >.five .container .video-wrapper video < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.six .container < text-align: center; max-width: 800px; >footer < background-color: #222222; padding: 40px 15px; >footer .container < max-width: 600px; >footer p

I also have all the necessary browser vendor prefixes in the stylesheet. So the template/web page will work just fine in all sorts of browsers.

However, make sure you have an “img” folder on your project. Otherwise, the images will be missing. But if you already have a different project structure in place, be sure to replace the path both on HTML & CSS.

Build HTML CSS projects

Conclusion

This about us page template is available for download. You’re free to customize & use it on your projects.

If you’re a beginner in web design, I would encourage you to learn how I structured the HTML & wrote the CSS to align different elements.

After you download the template, if you find any difficulties, please let me know. I will try to help all of you as much as I can (without any cost).

Popular posts

About Shihab

With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

Источник

How to create an about us page in HTML?

The About Us page contains insightful information about the website. It contains information about the purpose of the website, owner details, top employees, contact details, etc.

This page is widely used especially in the business website. Here, we will learn to design this about us page with CSS.

Creating About Us page

The about us page may contain some heading text, images, and social media buttons, etc. Wrap all the contents within element and set the width: 100% , add some background-color and margin also.

Style each component with CSS properties and use Font Awesome library to add social media icon buttons.

Example: Creating About Us page with CSS

In this example, we have added a simple About US page where we have a rounded image, some text, and social media buttons.

      .About-us < width: 100%; text-align: center; background-color: #ccc; margin-top: 30px; margin-bottom: 30px; >h1 < color: red; font-size: 35px; >img < border-radius: 50%; >p < font-size: 20px; >h3 < text-shadow: >a  
 
About Us
 
Our mission is to empower young Students to be the inventors and creators.
 
In a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions.
 
We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.
 
And this journey started in 2013 when a young boy thought "wouldn't it be great, to have a website, with simple tutorials for programming languages, just like a friend would teach you!", and Studytonight was born.
 
follow us on
 
  

Output

Here is the output of the above program.

Example: Create an About us page with CSS

In this example, we have added cards to add information about the creator of the website. The card contains images and some text.

Conclusion

In this tutorial, we have learned to create About us Page with CSS. We can add elements and customize it with some basic CSS properties like background-color , padding , margin , font- size , and so on.

Источник