About us Page in HTML CSS
About us Page in HTML CSS normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
A website is a collection of publicly accessible, interlinked Web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organization to serve a variety of purposes.
Together, all publicly accessible websites constitute the World Wide Web.
Although it is sometimes called “web page,” this definition is wrong, since a website consists of several webpages. A website is also known as a “web presence” or simply “site”.
Websites come in a nearly endless variety, including educational sites, news sites, porn sites, forums, social media sites, e-commerce sites, and so on. The pages within a website are usually a mix of text and other media. That said, there are no rules dictating the form of a website.
A person could create a website of nothing but black and white photos of roses, or the word “cat” linked to another Web page with the word “mouse.” However, many sites follow a standard pattern of a homepage that links off to other categories and content within the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>about me</title>
<link rel="stylesheet" href="about.css">
</head>
<body>
<section>
<!------------------------------image div satat--------------------------->
<div class="img">
<div class="box">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
</div>
</div>
<!------------------------------image div end--------------------------->
<!------------------------------content div satat--------------------------->
<div class="content">
<h1>-I'M STEVE MILNER.<br>
<span> WEB DESIGNER</span>
</h1>
<p>I'm a Tunisian based web designer & front-end
developer focused on crafting clean &
user-friendly experiences, I am passionate
about building excellent software that
improves the lives of those around me.</p>
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">More ABOUT ME</span>
</button>
</div>
<!------------------------------content div end--------------------------->
<!------------------------------icon div satat--------------------------->
<div class="icon">
<div class="uiverse">
<span class="tooltip">HOME</span>
<span>
<ion-icon name="home"></ion-icon>
</span>
</div>
<div class="uiverse">
<span class="tooltip">ABOUT</span>
<span>
<ion-icon name="person"></ion-icon>
</span>
</div>
<div class="uiverse">
<span class="tooltip PROTFOLI">PROTFOLI</span>
<span>
<ion-icon name="briefcase"></ion-icon>
</span>
</div>
<div class="uiverse">
<span class="tooltip CONTACT">CONTACT</span>
<span>
<ion-icon name="mail-open"></ion-icon>
</span>
</div>
<div class="uiverse">
<span class="tooltip">BLOG</span>
<span>
<ion-icon name="chatbubbles"></ion-icon>
</span>
</div>
</div>
<!------------------------------icon div end--------------------------->
</section>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
:root {
--main-color: #ffb400;
--font: #eee;
--time: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
* {
margin: 0;
padding: 0;
border: none;
outline: none;
text-decoration: none;
/* transition: .8s; */
font-family: Arial, Helvetica, sans-serif;
}
section {
width: 100%;
height: 100vh;
background-image: url(background.png);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
/* =================================================image style start
======================================================================
====================================================================== */
section .img {
width: 1200px;
height: 650px;
border-radius: 30px;
margin-left: 50px;
background-image: url(dark.jpeg);
background-size: cover;
background-position: center;
overflow: hidden;
}
section .img .box {
width: 125%;
height: 250px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
border-radius: 50%;
position: relative;
top: 100%;
overflow-x: hidden;
transition: var(--time);
margin-left: -50px;
display: flex;
justify-content: center;
align-items: center;
}
section .img:hover .box {
top: 70%;
}
section .img .box ion-icon {
font-size: 30px;
color: var(--font);
padding: 15px;
cursor: pointer;
position: relative;
border-radius: 10px;
z-index: 9999;
}
section .img .box ion-icon::before {
content: " ";
width: 0;
height: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: var(--main-color);
margin: auto;
transition: var(--time);
z-index: -1;
border-radius: 10px;
}
section .img .box ion-icon:hover::before {
width: 100%;
height: 100%;
}
/* =================================================image style end
===================================================================
=================================================================== */
/* =================================================content style start */
section .content {
/* background-color: red; */
padding: 150px;
}
section .content h1 {
font-size: 60px;
color: var(--main-color);
font-weight: 600;
}
section .content h1 span {
color: var(--font);
}
section .content p {
color: var(--font);
font-size: 20px;
line-height: 40px;
margin-top: 30px;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
margin-top: 50px;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: var(--time);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: var(--main-color);
border-radius: 100px;
padding: 5px 0;
}
button.learn-more .circle .icon {
transition: var(--time);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: var(--time);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.29rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: var(--time);
position: absolute;
top: 0;
left: 10px;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: var(--main-color);
font-weight: 400;
line-height: 1.6;
text-transform: uppercase;
font-size: 20px;
/* background-color: red; */
width: 200px;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
/* =================================================content style end */
/* =================================================icon style start */
.icon {
margin-right: 20px;
}
.uiverse {
position: relative;
background: #ffffff;
color: var(--main-color);
padding: 10px;
margin: 10px;
border-radius: 50%;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: var(--time);
}
.uiverse span ion-icon {
font-size: 30px;
}
.tooltip {
position: absolute;
top: 10px;
margin-left: 0;
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: var(--time);
}
.tooltip::before {
position: absolute;
content: "";
height: 10px;
width: 10px;
bottom: 15px;
left: 100%;
transform: translate(-50%) rotate(45deg);
transition: var(--time);
}
.uiverse:hover .tooltip {
margin-left: -180px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.uiverse:hover .PROTFOLI {
margin-left: -210px;
}
.uiverse:hover .CONTACT {
margin-left: -210px;
}
svg:hover span,
svg:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.uiverse:hover,
.uiverse:hover .tooltip,
.uiverse:hover .tooltip::before {
background: var(--main-color);
color: #ffffff;
}
/* =================================================icon style end */