added about section

This commit is contained in:
JSriwongsa 2023-05-23 09:45:06 -05:00
parent f1b65e138a
commit 4a0c4612cd
2 changed files with 193 additions and 0 deletions

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_about.css">
<link rel="shortcut icon" href="images/title.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
<img src="images/logo1.png" alt="" class="logo-img">
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="index.html" class="nav-link ">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
<a href="" class="nav-link">
<i class='bx bx-basket'></i>
<span class="nav-link-title">Shop</span>
</a>
<a href="" class="nav-link">
<i class='bx bx-book-bookmark' ></i>
<span class="nav-link-title">Blog</span>
</a>
<a href="" class="nav-link nav-active">
<i class='bx bxs-florist'></i>
<span class="nav-link-title">About Us</span>
</a>
<a href="contact.html" class="nav-link">
<i class='bx bx-phone-call'></i>
<span class="nav-link-title">Contact</span>
</a>
</div>
</div>
</header>
<div class="about">
<div class="about-container">
<div class="about-text">
<div class="tiltle">
<h1> About Us</h1>
</div>
<div class="content">
<p>message</p>
<div class="button">
<a href="">Read More</a>
</div>
</div>
<div class="social">
<a href=""><i class='bx bxl-instagram-alt'></i></a>
<a href=""><i class='bx bxl-twitter'></i></a>
<a href=""><i class='bx bxl-facebook-circle'></i></a>
</div>
</div>
<div class="about-img">
<img src="images/a1.jpg">
</div>
</div>
</div>
<div class="end-text">
<p>&#169; Flora All Rights Reserved </p>
</div>
</body>
</html>

View file

@ -0,0 +1,114 @@
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Klee One', cursive;
list-style: none;
text-decoration: none;
}
:root{
--bg-color:snow;
--main-color:lightcoral;
--minor-color:rgb(49, 48, 48);
--other-color:dimgray;
--text-color:black;
}
.about{
margin-top: 10rem;
width: 100%;
min-height: 100vh;
background-color: var(--bg-color);
}
.about-container{
width: 80%;
display: block;
margin: auto;
padding-top: 100px;
}
.about-text{
float: left;
width: 50%;
}
.about-img{
float: right;
width: 40%;
}
.about-img img{
width: 100%;
height: auto;
}
.about-text .tiltle h1{
font-size: 36px;
font-family: 'Norican', cursive;
}
.content p{
margin-top: 3%;
font-size: 16px;
letter-spacing: 1px;
color: var(--other-color);
}
.content .button {
margin-top: 2rem;
margin-bottom: 2rem;
cursor: pointer;
}
.content .button a{
background-color: var(--main-color);
padding: 10px 15px;
color: var(--bg-color);
font-size: 16px;
letter-spacing: 1px;
border-radius: 4rem;
}
.content .button a:hover{
background-color: rgb(239, 197, 197);
color: var(--text-color);
}
.social{
margin-top: 40px;
}
.social i{
color: var(--main-color);
font-size: 1.2rem;
cursor: pointer;
}
@media(max-width:1000px){
.about-container{
width: 80%;
display: block;
margin: auto;
padding-top: 50px;
}
.about-text{
float: none;
width: 100%;
display: block;
margin: auto;
}
.about-img{
float: none;
width: 100%;
}
.about-img img{
width: 100%;
height: auto;
display: block;
margin: auto;
}
.about-text .tiltle{
text-align: center;
font-size: 18px;
}
.content .button {
margin-top: 2rem;
margin-bottom: 2rem;
cursor: pointer;
text-align: center;
}
.social{
text-align: center;
margin-bottom: 2%;
}
}