Activity 19: Research CSS
This is the output of my simple CSS I maximize the use of display grid, display flex and css positions.
I added hover effects using position relative and absolute.
These are the codes (HTML & CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Activity 19: CSS Research</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<i class="fa-solid fa-bars"></i>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<main>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</main>
<footer>
<p>Created by: Kelvin Russel Soliman</p>
</footer>
</div>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
}
.wrapper {
min-height: 100vh;
display: grid;
grid-template-columns: 300px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"nav header header"
"nav main main"
"nav footer footer";
}
header {
grid-area: header;
background-color: #272727;
padding: 1rem;
color: #fff;
}
nav {
grid-area: nav;
background-color: #3c3d37;
}
nav ul {
padding: 10rem 5rem;
height: 90%;
}
nav ul li {
list-style: none;
margin-bottom: 1rem;
position: relative;
width: max-content;
}
nav ul li::before {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 4px;
background-color: #ffffff;
transition: 0.5s ease-in-out;
}
nav ul li:hover::before {
width: 100%;
}
nav ul li a {
text-decoration: none;
font-size: 18px;
color: white;
}
main {
grid-area: main;
background-color: #cecece;
padding: 3rem 5rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
main .box {
height: 200px;
width: 200px;
background-color: #606060;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1rem;
}
footer {
grid-area: footer;
background-color: #272727;
text-align: center;
color: #ffffff;
padding: 0.5rem;
}
This HTML document is structured as follows: it begins with a document type declaration <!DOCTYPE html>, indicating that it is an HTML5 document. The root element is <html lang="en">, specifying that the document's language is English. Inside the <head> section, metadata is provided, including a character set declaration (<meta charset="UTF-8">) that supports a wide range of characters, and a viewport setting (<meta name="viewport" content="width=device-width, initial-scale=1.0">) for responsive design. The title of the document, "Activity 19: CSS Research," is specified within the <title> tag.
Two stylesheets are linked: one for Font Awesome icons (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">) and another for custom styles (<link rel="stylesheet" href="style.css">). The <body> section begins with a <div> element having the class wrapper, which contains a <header> featuring a Font Awesome icon representing a menu.
Next, a <nav> element contains an unordered list with links to various sections of the website, including Home, About, Services, News, and Contacts. The <main> section holds multiple <div> elements with the class box, each labeled with "Box 1," "Box 2," and so on, providing the main content area of the document.
Finally, a <footer> section includes a paragraph with the text "Created by: Kelvin Russel Soliman," and the document concludes with closing tags for the wrapper, body, and html elements. This structure provides a clear layout for a basic web page.
This CSS stylesheet is structured to style a web page with a modern and responsive layout. It begins by importing the "Poppins" font from Google Fonts, allowing the text on the page to use this font family. The universal selector * is used to reset the margin and padding for all elements, ensuring consistent spacing throughout the document. Additionally, the box-sizing property is set to border-box, which includes padding and borders in the element's total width and height, along with applying the "Poppins" font family.
The .wrapper class defines a grid layout with a minimum height of 100% of the viewport height. It establishes a two-column structure, where the left column is 300 pixels wide, and the right column expands to fill the remaining space. The grid is divided into three rows: one for the header, one for the main content, and one for the footer. The layout is defined using the grid-template-areas property, which specifies how the header, navigation, main content, and footer are positioned within the grid.
The header section is styled with a dark background color (#272727), white text color, and padding. The nav section, also with a dark background color (#3c3d37), includes an unordered list that is padded to create space and is set to occupy 90% of its height. Each list item has no default styling, a margin for spacing, and a relative position to allow for a custom underline effect.
The nav ul li::before pseudo-element creates an animated underline effect that expands from 0 to 100% of the width when hovering over the list items. The links within the navigation list are styled with no text decoration, a font size of 18 pixels, and white color.
The main section is defined as the primary content area, with a light gray background color (#cecece) and padding. It uses Flexbox to allow the content boxes to align in rows and wrap as necessary. The .box class represents individual boxes within the main content area, with a fixed height and width of 200 pixels, a dark gray background color (#606060), and center alignment for both vertical and horizontal content.
Finally, the footer section is styled similarly to the header, with a dark background color, centered text, white color, and some padding for spacing. This overall styling creates a visually appealing, modern, and responsive web page layout.