How To Build the About Me Section of Your Website With CSS (Section 2)

How To Build the About Me Section of Your Website With CSS (Section 2)

In this tutorial, you will recreate the second section of the demonstration website using CSS. Feel free to switch out Sammy’s information with your own if you wish to personalize the size. The methods you learn here can be applied to other CSS/HTML website projects.

Introduction

In this tutorial, you will recreate the second section of the demonstration website using CSS. Feel free to switch out Sammy’s information with your own if you wish to personalize the size. The methods you learn here can be applied to other CSS/HTML website projects.

The second section of the site contains two content boxes, one that contains text and one that contains a large profile photo:

Screenshot of the second section of the website

Prerequisites

To follow this tutorial, make sure that you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

You will need a profile image to place in the content box on the right. If you don’t have a profile image, you can use this image for demonstration purposes.

Note : To download the large profile image, visit this link  and click CTRL + Left Click  (on Macs) or Right Click  (on Windows) on the image and select “Save Image As” and save it as large-profile.jpeg  to your images  folder.

Before proceeding, make sure your selected image is saved in your images folder as “large-profile.jpeg".

Creating and Styling Content Boxes For Text and Images

To create these two content boxes, you will first define a column class in the styles.css file that styles the boxes for this purpose. Then you will add the text and image content to the HTML document.

Next, return to the styles.css file and copy and paste the following rulesets at the bottom of the file:

styles.css

. . .
/* Include padding and border in total box size*/
* {
  box-sizing: border-box;
}

/* Create two equal columns that float next to each other */
.column-2 {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.