Documentation

CSS Code Documentation

The following is the documentation for the provided CSS code:

💡 Code auto-documented by ChatGPT 🤖 & Edited by

👉 See : index.html

👉 See : main.js

Body Styles

The body selector is used to apply styles to the entire page. In this code, the font-family property is set to 'Inter', sans-serif, which specifies that the font used in the document should be the “Inter” font if available, or a sans-serif font as a fallback.

body {
  font-family: 'Inter', sans-serif;
}

Sticky Header

The .sticky-header class selector is used to style the sticky header element. The header is fixed at the top of the page using position: fixed. It spans the full width of the page (width: 100%) and has a white background color (background-color: #ffffff). A subtle box shadow is applied to give it a slight elevation effect (box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)). The z-index property ensures that the header appears above other elements on the page.

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

Logo Styles

The .sticky-header .logo selector targets the logo element within the sticky header. It is set to display: inline-block, which allows other elements to align next to it horizontally. The logo has padding (padding: 10px) to create some space around it.

.sticky-header .logo {
  display: inline-block;
  padding: 10px;
}

The .sticky-header .logo img selector targets the image within the logo element. It sets the height property to 40px and vertical-align to middle, which vertically aligns the image within the logo container.

.sticky-header .logo img {
  height: 40px;
  vertical-align: middle;
}

Action Links Styles

The .sticky-header .action-links selector targets the container for action links within the sticky header. It is set to display: inline-block, allowing the action links to align horizontally. It also has float: right applied to move the container to the right side of the header. The container has padding (padding: 10px) to create some spacing.

.sticky-header .action-links {
  display: inline-block;
  float: right;
  padding: 10px;
}

The .sticky-header .action-links a selector targets the anchor elements within the action links container. It sets the margin-right property to 10px, creating space between the links. The links have a black color (color: #000000) and no text decoration (text-decoration: none).

.sticky-header .action-links a {
  margin-right: 10px;
  color: #000000;
  text-decoration: none;
}

The .sticky-header .action-links a:last-child selector targets the last anchor element within the action links container. It overrides the margin-right property and sets it to 0 to remove the margin on the last link.

.sticky-header .action-links a:last-child {
  margin-right: 0;
}

The .sticky-header .action-links .phone-icon, .sticky-header .action-links .email-icon, and .sticky-header .action-links .whatsapp-icon selectors target specific icons within the action links container. They use custom classes to apply different colors to each icon. The phone icon is colored red (color: #ff0000), the email icon is also colored red, and the WhatsApp icon is colored green (color: #25d366).

.sticky-header .action-links .phone-icon {
  color: #ff0000;
}

.sticky-header .action-links .email-icon {
  color: #ff0000;
}

.sticky-header .action-links .whatsapp-icon {
  color: #25d366;
}

Banner

The provided code is a set of CSS rules that define the styling for a banner section. The banner section typically includes a background image, some content, and a form. Below is the documentation for each section of the code:

Banner Section Styles

The .banner-section selector is used to style the entire banner section. It is set to position: relative and has a width of 100%. The height property is set to 500px to define the height of the banner section. The overflow property is set to hidden, which ensures that any content overflowing the section will be clipped.

.banner-section {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

Banner Background Styles

The .banner-background selector is used to style the background image of the banner section. It is positioned absolutely (position: absolute) within the banner section, spanning the full width and height (top: 0; left: 0; width: 100%; height: 100%). The background-image property specifies the URL of the image. The background-size property is set to cover, which scales the image to cover the entire background. The background-position property is set to center, which centers the image horizontally and vertically. The filter property applies a brightness of 80% to the background image.

.banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://www.siilc.edu.in/wp-content/uploads/2019/08/New-home-banner1.jpg);
  background-size: cover;
  background-position: center;
  filter: brightness(80%);
}

Banner Content Styles

The .banner-content selector is used to style the content within the banner section. It is positioned relative (position: relative) and has a higher z-index value of 1, which ensures that the content appears above the background image. The content is centered both vertically and horizontally using display: flex, align-items: center, and justify-content: center. The content has a margin of 40px to create some space around it.

.banner-content {
  margin: 40px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Left Section Styles

The .left-section selector is used to style the left section of the content within the banner. It occupies flex: 1.5 of the available space and is displayed as a flex container (display: flex). The flex-direction is set to column, aligning the child elements vertically. The align-items property is set to flex-start, which aligns the child elements to the left. The padding-left property adds 50px of padding to the left side. The text color is set to #ffffff (white).

.left-section {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 50px;
  color: #ffffff;
}

The .left-section h2 selector targets the h2 heading element within the left section. It sets the font size to 50px and the line height to 1.2.

.left-section h2 {
  font-size: 50px;
 

 line-height: 1.2;
}

The .left-section h1 selector targets the h1 heading element within the left section. It sets the font size to 90px, font weight to bold, and adds a top margin of 10px.

.left-section h1 {
  font-size: 90px;
  font-weight: bold;
  margin-top: 10px;
}

Right Section Styles

The .right-section selector is used to style the right section of the content within the banner. It occupies flex: 0.5 of the available space and has a gap of 16px between its child elements. It has padding of 20px to create space around the content. The background color is set to #ffffff (white) and has a border radius of 20px to give it rounded corners.

.right-section {
  flex: 0.5;
  gap: 16px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 20px;
}

The .right-section h3 selector targets the h3 heading element within the right section. It sets the font size to 24px, font weight to bold, and adds a bottom margin of 20px.

.right-section h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

Form Styles

The form selector is used to style the form within the banner section. It is displayed as a grid container with a gap of 15px between grid items.

form {
  display: grid;
  gap: 15px;
}

The .form-group selector is used to style each form group within the form. It is also displayed as a grid container.

.form-group {
  display: grid;
}

The input[type="text"], input[type="email"], and textarea selectors are used to style text input fields and textarea within the form. They have a width of 100%, padding of 10px, a border of 1px solid #cccccc, and a border radius of 4px.

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

The button[type="submit"] selector is used to style the submit button within the form. It has padding of 10px 20px, a background color of #ff0000 (red), text color of #ffffff (white), no border, a border radius of 4px, and a cursor set to pointer.

button[type="submit"] {
  padding: 10px 20px;
  background-color: #ff0000;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Quote and Images

The provided code is a set of CSS rules that define the styling for Section 2, which includes a quote and images. Below is the documentation for each section of the code:

Section 2 Styles

The .section-2 selector is used to style the entire Section 2. It is displayed as a flex container using display: flex. The justify-content property is set to center, which horizontally centers the content within the container. The align-items property is set to center, which vertically centers the content within the container. The container has padding of 50px to create space around the content.

.section-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

Left Section Styles

The .section-2 > .left-section selector targets the left section within Section 2. It occupies flex: 1 of the available space.

.section-2 > .left-section {
  flex: 1;
}

The .section-2 > .left-section blockquote selector targets the blockquote element within the left section. It sets the font size to 30px, font weight to normal, and text color to #000000 (black).

.section-2 > .left-section blockquote {
  font-size: 30px;
  font-weight: normal;
  color: #000000;
}

The .section-2 > .left-section blockquote p selector targets the p element within the blockquote. It sets the margin to 0 to remove any default margins applied to the paragraph.

.section-2 > .left-section blockquote p {
  margin: 0;
}

The .section-2 > .left-section .empowering selector targets an element with the class empowering within the left section. It sets the text color to #ff0000 (red) and font weight to bold.

.section-2 > .left-section .empowering {
  color: #ff0000;
  font-weight: bold;
}

Right Section Styles

The .section-2 > .right-section selector targets the right section within Section 2. It occupies flex: 1 of the available space and is displayed as a flex container. The justify-content property is set to space-between, which distributes the child elements with space between them horizontally. The align-items property is set to center, which vertically centers the child elements.

.section-2 > .right-section {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

The .section-2 > .right-section img selector targets the img elements within the right section. It sets the max-width property to 33.33% to ensure the images do not exceed one-third of the available space within the right section.

.section-2 > .right-section img {
  max-width: 33.33%;
}

Courses

The code block below defines styles for navigation tabs.

/* Styling for navigation tabs */
.tab {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  background-color: #f0f0f0;
}
.active {
  background-color: lightgray;
}

• .tab: This class represents each navigation tab element. It is set to display: inline-block to make the tabs appear horizontally. It has padding: 10px to add spacing around the tab content. The cursor property is set to pointer to indicate that the tab is clickable. The background-color is #f0f0f0, which is a light gray color.

• .active: This class represents the active tab. It is applied to a tab element to indicate that it is currently selected. The background-color is set to lightgray to visually distinguish the active tab from the inactive ones.

Course Boxes

The code block below defines styles for course boxes.

/* Styling for course boxes */
.course {
  width: 250px;
  height: 180px;
  border-radius: 10px;
  margin: 10px;
  background-image: url('https://cdn.pixabay.com/photo/2015/07/28/22/05/child-865116_1280.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(70%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
}

.content {
  display: flex;
  flex-direction: row;
  width: 100%;
}

• .course: This class represents each course box element. It sets the width to 250px and the height to 180px, giving the course box a fixed size. The border-radius property is set to 10px to create rounded corners for the box. The margin property adds spacing around the course box. The background-image property sets the background image of the box using the provided URL. The background-size is set to cover to ensure the image covers the entire box. The background-position is set to center to center the background image within the box. The filter property is used to adjust the brightness of the background image to 70%. The display property is set to flex to enable flexbox layout for the box. The justify-content and align-items properties are set to center to horizontally and vertically center the content within the box. The color property sets the text color to white, and font-weight is set to bold for bold text.

• .content: This class represents the container for the course boxes. It sets the display property to flex and flex-direction to row to arrange the course boxes in a row layout. The width is set to 100% to ensure the course boxes take up the full width of their container.

Mission Statement

The code block below defines styles for a mission statement section.

.section-4 {
  display: flex;
  padding: 50px;
}

• .section-4: This class represents the container for the mission statement section. It is set to display: flex to enable flexbox layout for its child elements. The padding property adds 50 pixels of spacing around the section.

Left Section

The code block below defines styles for the left section of the mission statement.

.section-4 > .left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

• .section-4 > .left-section: This class represents the left section of the mission statement. It is a child element of the .section-4 container. The flex property is set to 1 to make the left section grow and occupy available space within the flex container. It is set to display: flex to enable flexbox layout for its child elements. The flex-direction property is set to column to arrange the child elements vertically. The justify-content property is set to center to vertically center the content within the left section.

Heading Styles

The code block below defines styles for headings within the left section.

.section-4 > .left-section h2 {
  font-size: 24px;
  color: #ff0000;
}

.section-4 > .left-section h1 {
  font-size: 48px;
  color: #000000;
  margin-top: 10px;
}

• .section-4 > .left-section h2: This selector represents the <h2> element within the left section. It sets the font-size to 24px and the color to #ff0000 (red).

• .section-4 > .left-section h1: This selector represents the <h1> element within the left section. It sets the font-size to 48px and the color to #000000 (black). The margin-top property adds 10 pixels of spacing above the heading.

Enroll Button Styles

The code block below defines styles for the enroll button within the left section.

.section-4 > .left-section .enroll-btn {
  display: inline-block;
  padding: 15px 30px;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  margin-top: 20px;
}

• .section-4 > .left-section .enroll-btn: This selector represents the enroll button element within the left section. It sets the display property to inline-block to make the button appear in a block-level context but remain inline with the surrounding content. The padding property sets 15 pixels of padding on the top and bottom and 30 pixels on the left and right of the button. The background-color is set to #ff0000 (red). The color is set to #ffffff (white) for the button text. The font-size is set to 18px. The text-decoration property is set to none to remove any text decoration such as underlines. The margin-top property adds 20 pixels of spacing above the button.

Right Section

The code block below defines styles for the right section of the mission statement.

.section-4 > .right-section {
  flex: 1;
  background-image: url("https://www.siilc.edu.in/wp-content/uploads/2020/05/abm-image2.jpg");
  background-size: cover;
  background-position: center;
  height: 500px;
}

• .section-4 > .right-section: This class represents the right section of the mission statement. It is a child element of the .section-4 container. The flex property is set to 1 to make the right section grow and occupy available space within the flex container.

The background-image property sets the background image of the right section using the provided URL. The background-size is set to cover to ensure the image covers the entire background. The background-position is set to center to center the background image within the right section. The height is set to 500px to give the right section a fixed height of 500 pixels.

Footer

The code block below defines styles for the footer section.

/* Footer */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  color: white;
  background-color: #070d17;
  font-size: 20px;
  margin-top: 10px;
}

• footer: This selector represents the footer section of the document.

The following properties are applied to the footer selector:

• display: flex: This property is used to enable flexbox layout for the footer section and its child elements.
• justify-content: center: This property is used to horizontally center the content within the footer.
• align-items: center: This property is used to vertically center the content within the footer.
• padding: 15px: This property adds 15 pixels of spacing around the content within the footer.
• color: white: This property sets the text color to white within the footer.
• background-color: #070d17: This property sets the background color of the footer to #070d17, which is a dark blue color.
• font-size: 20px: This property sets the font size to 20 pixels for the text within the footer.
• margin-top: 10px: This property adds 10 pixels of spacing above the footer section.

Chat

The provided code contains styles for a chat interface, including a chat icon, chat window, message display, and input area. Additionally, it includes styles for chips. Below is the documentation for each section:

Chat Icon

The code block below defines styles for the chat icon.

.chat-icon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #624aba;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

• .chat-icon: This class represents the chat icon element. It is positioned fixed at the bottom-right corner of the screen. The width and height are set to 60 pixels, creating a circular shape using border-radius: 50%. The background-color is #624aba (a shade of purple). The content of the icon is centered using display: flex, justify-content: center, and align-items: center. The color is set to #ffffff (white) for the icon. The cursor property is set to pointer to indicate that the icon is clickable. The box-shadow adds a subtle shadow effect, and the z-index ensures the icon appears above other elements on the page.

Chat Window

The code block below defines styles for the chat window.

.chat-window {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 400px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: none;
  z-index: 999;
}

• .chat-window: This class represents the chat window element. It is positioned fixed at the bottom-right corner of the screen, below the chat icon. The width is set to 400 pixels. The background-color is #ffffff (white). The box-shadow adds a subtle shadow effect. The border-radius creates rounded corners for the window. The overflow property is set to hidden to hide any content that exceeds the window’s dimensions. The display is set to none initially to hide the window. The z-index ensures the window appears above other elements on the page.

Chat Window Header

The code block below defines styles for the header section of the chat window.

.chat-window .header {
  background-color: #2b1652;
  color: #ffffff;
  padding: 10px;
  display: flex;
  align-items: center;
}

.chat-window .header h3 {
  margin: 0;
  flex-grow: 1;
  font-size: 18px;
}

.chat-window .header .close-btn {
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}

• .chat-window .header: This selector represents the header section of the chat window. It has a background-color of #2b1652 (a dark purple color). The color is set to `#

ffffff (white) for the text. The padding property adds 10 pixels of spacing around the content. The display is set to flex to enable flexbox layout for the header. The align-items property is set to center` to vertically center the content within the header.

• .chat-window .header h3: This selector represents the <h3> element within the header. It has a margin of 0 to remove any margin spacing. The flex-grow property is set to 1 to allow the heading to grow and occupy available space within the header. The font-size is set to 18 pixels for the heading text.

• .chat-window .header .close-btn: This selector represents the close button within the header. It has border: none to remove any borders. The background-color is set to transparent to make the button background transparent. The color is set to #ffffff (white) for the icon. The font-size is set to 20 pixels. The cursor property is set to pointer to indicate that the button is clickable.

Message Display

The code block below defines styles for the message display area within the chat window.

.chat-window .messages {
  max-height: 300px;
  overflow-y: scroll;
  padding: 10px;
}

• .chat-window .messages: This selector represents the message display area within the chat window. The max-height is set to 300 pixels, limiting the height of the area. The overflow-y property is set to scroll to enable vertical scrolling if the content exceeds the available space. The padding property adds 10 pixels of spacing around the content.

Individual Messages

The code block below defines styles for individual messages within the message display area.

.chat-window .message {
  display: flex;
  margin-bottom: 10px;
}

.chat-window .message p {
  background-color: #e5e5ea;
  color: #000000;
  padding: 8px;
  border-radius: 8px;
  margin: 0;
  max-width: 70%;
}

.chat-window .incoming {
  align-self: flex-start;
}

• .chat-window .message: This selector represents an individual message within the message display area. It is displayed as a flex container using display: flex to allow horizontal alignment of message components. The margin-bottom property adds 10 pixels of spacing between messages.

• .chat-window .message p: This selector represents the <p> element containing the message text. The background-color is set to #e5e5ea (a light gray color) to distinguish the message from the background. The color is set to #000000 (black) for the text color. The padding property adds 8 pixels of spacing around the message. The border-radius creates rounded corners for the message. The margin property is set to 0 to remove any margin spacing. The max-width is set to 70% to limit the width of the message within the message display area.

• .chat-window .incoming: This selector represents an incoming message within the message display area. It uses align-self: flex-start to align the incoming message to the left side of the container.

Input Area

The code block below defines styles for the input area within the chat window.

.chat-window .input-area {
  display: flex;
  align-items: center;
  padding: 10px;
}

.chat-window .input-area input[type="

text"] {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.chat-window .input-area .send-btn {
  background-color: #2b1d68;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  margin-left: 10px;
  cursor: pointer;
}

• .chat-window .input-area: This selector represents the input area within the chat window. It is displayed as a flex container using display: flex to allow horizontal alignment of input components. The align-items property is set to center to vertically center the content within the input area. The padding property adds 10 pixels of spacing around the content.

• .chat-window .input-area input[type="text"]: This selector represents the text input field within the input area. The flex-grow property is set to 1 to allow the input field to grow and occupy available space within the input area. The padding property adds 8 pixels of spacing around the input field. The border property sets a 1-pixel solid border with the color #cccccc. The border-radius creates rounded corners for the input field.

• .chat-window .input-area .send-btn: This selector represents the send button within the input area. The background-color is set to #2b1d68 (a dark purple color) for the button. The color is set to #ffffff (white) for the button text. The border property is set to none to remove any borders. The border-radius creates rounded corners for the button. The padding property sets 8 pixels of spacing on the top and bottom and 15 pixels on the left and right of the button. The margin-left property adds 10 pixels of spacing to the left of the button. The cursor property is set to pointer to indicate that the button is clickable.

Chips

The code block below defines styles for chips.

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px;
}

.chip {
  display: inline-block;
  background-color: #ffffff;
  border: 0.5px solid gray;
  font-size: 12px;
  color: #000000;
  padding: 8px 12px;
  border-radius: 24px;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.chip:hover {
  background-color: #d0d0d5;
}

• .chips: This class represents the container for the chips. The display property is set to flex to enable flexbox layout for the chips. The flex-wrap property is set to wrap to allow the chips to wrap onto multiple lines if needed. The margin-top property adds 10 pixels of spacing above the chips. The padding property adds 10 pixels of spacing around the chips.

• .chip: This class represents an individual chip element. The display property is set to inline-block to allow the chips to appear in a line. The background-color is set to #ffffff (white). The border property sets a 0.5-pixel solid border with the color gray. The font-size is set to 12 pixels. The color is

set to #000000 (black) for the chip text. The padding property sets 8 pixels of spacing on the top and bottom and 12 pixels on the left and right of the chip. The border-radius creates rounded corners for the chip. The margin-right property adds 8 pixels of spacing to the right of each chip. The margin-bottom property adds 8 pixels of spacing below each chip. The cursor property is set to pointer to indicate that the chip is clickable.

• .chip:hover: This selector represents the hover state of a chip. It changes the background-color to #d0d0d5 (a light gray color) when the chip is being hovered over.

This documentation explains the purpose and usage of the provided code and helps understand how the styles are applied to create a chat interface with a chat icon, chat window, message display, input area, and chips.