Header
Article
Nav
CSS Border Radius:
- It sets curved border.
border-radius : all directions
border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius
Syntax:
{
border-radius : 20px;
}
Note: You can't adjust width and height for few inline elements, you have add a CSS
attribute "display" set to "inline-block".
Syntax:
span {
display:inline-block;
width:150px;
height: 50px;
}
To get a circle you have define width, height and radius with same size.
Syntax:
span {
display:inline-block;
width: 50px;
height: 50px;
border-radius: 50px;
}
Ex: Landkit-header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landkit</title>
<style>
header {
font-size: 20px;
font-family: Segoe UI;
display: flex;
justify-content: space-around;
padding: 20px;
}
.brand-title {
font-weight: bold;
font-size: 24px;
color:blue;
}
nav span {
padding-left: 20px;
padding-right: 20px;
}
.btn-buy {
background-color: blue;
color:white;
padding: 10px;
border-radius: 10px;
width: 50px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<header>
<div>
<span class="brand-title">Landkit.</span>
</div>
<div>
<nav>
<span>Landings</span>
<span>Pages</span>
<span>Account</span>
<span>Documentation</span>
</nav>
</div>
<div>
<span class="btn-buy">Buy now </span>
</div>
</header>
</body>
</html>
Section
- It defines the content to display between header and footer.
- Website related all content is kept in section area.
Syntax:
<section>
… your content …
</section>
Main
- In computer programming "main" is considered as "entry point".
- Website comprises of an entry point which is used by new user. [Anonymous User]
- Website can have multiple entry points for anonymous user.
Syntax:
<body>
<header>
</header>
<section>
<article> </article>
<main> </main>
</section>
<footer>
</footer>
</body>
CSS Background Image:
- <body> element have background attribute to set a background image.
- Other elements require "background-image" CSS attribute, to set background image.
Syntax:
div {
background-image: url("file_path");
background-size: cover;
height: 400px;
width: 200px;
}
CSS Display Grid:
- It is used to display content in fixed set of rows and columns, how ever it
allows to change the position dynamically.
Syntax:
{
display: grid;
grid-template-columns: 400px 400px 400px; (or) 4fr 4fr 4fr
}
CSS Text Shadow & Box Shadow
- Shadow can be defined for text or any container element.
- It requires the CSS attributes
a) text-shadow
b) box-shadow
- The value for shadow container
a) horizontal
b) vertical
c) blur
d) color
Syntax:
.title {
text-shadow : 10px 10px 2px black;
}
CSS Hover Class:
- CSS provides "hover" class, which defines actions to perform when mouse pointer
is over the element.
Syntax:
element:hover
{
//styles;
}
CSS Opacity:
- It controls the transparency of element in page.
- Its value can be from 0 to 1.
Syntax:
element {
opacity: 0.5;
}
element:hover {
opacity: 1;
}
Note: Grid Design allows to change the placement of content in rows and columns by
using the attributes:
a) grid-row
b) grid-column
Syntax:
.women-fashion {
grid-row : 1;
grid-column:1;
}
.men-fashion {
grid-row: 1;
grid-column:2;
}
Ex: Shopper-Template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopper</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-
icons.css">
<style>
header
{
font-size: 22px;
font-family: Segoe UI;
padding: 20px;
display: flex;
justify-content: space-between;
}
.brand-title {
font-weight: bold;
font-size: 28px;
}
.main-nav span {
padding-right: 20px;
font-size: 20px;
}
.main-nav span:hover {
font-weight: bold;
cursor:grab;
}
.shortcut-nav span {
padding-right: 5px;
font-size: 20px;
}
article {
font-size: 18px;
font-family: Segoe UI;
background-color: black;
color:white;
padding: 10px;
text-align: center;
}
.bi-lightning-fill {
color:gold;
}
main {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
height: 500px;
margin-top: 10px;
}
.women-fashion {
background-image: url("./images/women-fashion.jpg");
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
opacity: 0.7;
grid-row: 1;
grid-column: 3;
}
.men-fashion {
background-image: url("./images/men-fashion.jpg");
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
opacity: 0.7;
grid-row: 1;
grid-column: 1;
}
.kids-fashion {
background-image: url("./images/kids-fashion.jpg");
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
opacity: 0.7;
grid-row: 1;
grid-column: 2;
}
.main-title {
font-size: 40px;
font-family: Segoe UI;
font-weight: bold;
color:white;
text-shadow: 2px 2px 2px black;
}
.btn-shop {
box-shadow: 2px 2px 2px gray;
border: 1px solid black;
width: 120px;
background-color: white;
padding: 15px;
font-size: 18px;
text-align: center;
}
.women-fashion:hover, .men-fashion:hover, .kids-fashion:hover {
opacity: 1;
border: 1px solid blue;
}
</style>
</head>
<body>
<header>
<div>
<span class="brand-title">Shopper.</span>
</div>
<div>
<nav class="main-nav">
<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Pages</span>
<span>Blog</span>
<span>Docs</span>
</nav>
</div>
<div>
<nav class="shortcut-nav">
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart"></span>
</nav>
</div>
</header>
<section>
<article>
<span class="bi bi-lightning-fill"></span>
<span> HAPPY HOLIDAY DEAL ON EVERYTHING </span>
<span class="bi bi-lightning-fill"></span>
</article>
<main>
<div class="women-fashion">
<div class="main-title">Women</div>
<div class="btn-shop">
<span>Shop Women</span> <span class="bi bi-arrow-right"></span>
</div>
</div>
<div class="men-fashion">
<div class="main-title">Men</div>
<div class="btn-shop">
<span>Shop Men</span> <span class="bi bi-arrow-right"></span>
</div>
</div>
<div class="kids-fashion">
<div class="main-title">Kids</div>
<div class="btn-shop">
<span>Shop Kids</span> <span class="bi bi-arrow-right"></span>
</div>
</div>
</main>
</section>
</body>
</html>
