Home 👉 Web Projects
Source Code
1. HTML
<div class="base">
<div class="layers-container">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h2>Don't Forget</h2>
<br/>
<p>The expert in anything was once
a beginner.</p>
<br/><br/>
<p>Learning is never done without
errors and defeat.</p>
</div>
This code is a simple HTML markup that creates a container with a layered effect and some text content. The outermost `<div>` element has a class name of "base" which acts as a container for all the child elements. Inside the "base" `<div>` element, there is another `<div>` element with a class name of "layers-container". This element contains four `<span>` elements, which could be styled to create a layered effect using CSS.
After the "layers-container" element, there is an `<h2>` element which displays the text "Don't Forget". Below that, there is a `<br>` element which creates a line break, followed by two `<p>` elements that contain inspirational quotes. Overall, this code provides a basic structure for displaying text content within a container, which can be styled and customized further using CSS.
2. CSS
Step-1
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
This is a CSS code that sets the initial styling properties for all elements on a webpage. The `*` selector matches all elements on the page, and the properties set are `margin`, `padding`, and `box-sizing`. By setting `margin` and `padding` to 0, the code eliminates any unwanted space around the elements, providing a cleaner layout. The `box-sizing` property is used to specify how an element's width and height are calculated, including its padding and border. In this case, the `border-box` value is used, which includes the padding and border in the element's total width and height calculation, ensuring a consistent layout. Overall, this code provides a basic and efficient way to set default styles for all elements on a webpage, creating a uniform and organized layout for the content.
Step-2
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: cornflowerblue;
}
This is a CSS code that sets the styling properties for the `<body>` element of a webpage. The `height` property sets the height of the `<body>` element to 100% of the viewport height using the `vh` unit. This ensures that the entire content of the webpage is visible within the viewport.
The `display` property is set to `flex`, which enables the use of flexbox to align and position the child elements of the `<body>` element.
The `align-items` property is set to `center`, which vertically centers the child elements of the `<body>` element, and the `justify-content` property is set to `center`, which horizontally centers the child elements.
Lastly, the `background-color` property is set to `cornflowerblue`, which sets the background color of the `<body>` element to a shade of blue. Overall, this code creates a centered, full-height layout with a blue background color for the webpage.
Step-3
.base{
height: 320px;
width: 250px;
background-color: palevioletred;
overflow: hidden;
font-family: 'Poppins', sans-serif;
box-shadow :
0em 0.6em 1.2em rgba(0,0,0,0.3);
}
This is a CSS code that applies styles to an HTML element with the class name of "base".
The `height` and `width` properties set the height and width of the element to 320 pixels and 250 pixels respectively. The `background-color` property sets the background color of the element to palevioletred. The `overflow` property specifies how content that overflows the element's box should be handled, and in this case, it is set to "hidden" which clips any content that goes beyond the element's boundaries. The `font-family` property sets the font type for the element's text to Poppins, a sans-serif font. The `box-shadow` property creates a shadow effect around the element using four values. The first two values set the horizontal and vertical offset of the shadow, the third value sets the blur radius, and the fourth value sets the color and opacity of the shadow.
Overall, this CSS code styles an HTML element to have a specific size, background color, font, and shadow effect, making it stand out visually on the webpage.
Step-4
.layers-container{
position: absolute;
overflow: hidden;
}
This CSS code targets the element with a class name of "layers-container" and applies two styling properties to it.
The `position` property is set to "absolute" which means that the element is positioned relative to its nearest positioned ancestor element. This allows for precise placement and control of the element's position within the document flow.
The `overflow` property is set to "hidden" which means that any content that overflows beyond the boundaries of the element will be hidden, and not visible to the user. This is useful for creating elements with fixed sizes and preventing unwanted scrollbars from appearing.
Together, these properties create a container with a fixed position and size that clips any content that overflows its boundaries. This is commonly used in web design to create layered effects or to contain elements within a specific area of a webpage.
Step-5
.base span{
display: block;
height: 80px;
width: 250px;
background-color: aqua;
transition: all 1s var(--delay);
}
This is a CSS code that targets all `<span>` elements that are descendants of an element with a class name of "base".
The code sets several styling properties for the selected `<span>` elements. The `display` property is set to "block", which means the elements will take up the entire width of their parent container and appear on a new line. The `height` and `width` properties set the dimensions of the `<span>` elements to 80 pixels and 250 pixels, respectively. The `background-color` property sets the background color of the `<span>` elements to "aqua". The `transition` property adds an animation effect to the `<span>` elements, where all property changes will be animated over a duration of 1 second, with an additional delay specified by the value of the `--delay` variable.
Overall, this code applies a consistent and visually pleasing style to all `<span>` elements within the "base" container, with the added animation effect providing an extra level of interactivity and engagement for the user.
Step-6
.base span:nth-child(1){
--delay : 0ms;
}
.base span:nth-child(2){
--delay : 100ms;
}
.base span:nth-child(3){
--delay : 200ms;
}
.base span:nth-child(4){
--delay : 300ms;
}
This is a CSS code that uses the `nth-child` pseudo-class to select and style specific child elements of the parent element with a class of `.base`. The code sets a CSS custom property or variable `--delay` for each child element, which is used to control the delay between the appearance of each element.
The `nth-child(1)` selector targets the first child element, `nth-child(2)` targets the second, and so on. Each `nth-child` selector specifies a different value for the `--delay` variable, with each value being incremented by 100ms. This creates a staggered or delayed animation effect for the child elements, with each element appearing one after the other, starting from the first child.
Overall, this code demonstrates the use of CSS custom properties and `nth-child` selector to create dynamic and interactive animations for web pages or applications.
Step-7
.base:hover span{
transform: translateX(250px);
}
This is a CSS code that applies a transformation effect to a `span` element when the user hovers over the parent element with class name "base".
The `:hover` pseudo-class targets the `span` element when the user hovers over the parent element with class name "base". The `transform` property is used to apply a 2D or 3D transformation to an element, in this case, a `translateX` transformation that moves the `span` element 250 pixels to the right of its original position.
Overall, this code creates an interactive and dynamic effect that enhances the user experience by adding a visual response to their actions.
Step-8
h2{
color: white;
text-align: center;
margin: 0.5em;
}
This is a CSS code that sets the styling properties for all `h2` elements on a webpage.
The `color` property sets the text color of the `h2` element to white. The `text-align` property centers the text of the `h2` element horizontally within its container. The `margin` property sets a 0.5em margin on all sides of the `h2` element, creating space between the `h2` element and any adjacent elements.
Overall, this code styles the `h2` element to have white text, centered within its container, and with a small margin around it, providing a consistent and visually appealing layout for the content.
Step-9
p{
color: white;
text-align: center;
margin: 0em 0.8em;
}
This code is a CSS style rule that targets all paragraph elements on a webpage. The `color` property sets the text color of the paragraph to white, making it stand out against a dark background. The `text-align` property centers the text within the paragraph element, providing a clean and visually appealing layout. The `margin` property sets the spacing around the paragraph element, with 0em on the top and bottom and 0.8em on the left and right. This creates a balanced and visually appealing spacing around the text, making it easier to read and enhancing the overall design of the webpage.
---END---
Comments
Post a Comment