Sahil Dhuri

<p>The code can be improved by using more descriptive class names, adding comments to explain complex code, and considering the use of a CSS preprocessor like Sass. Additionally, more specific media queries should be used to target different screen sizes instead of relying on broad breakpoints. Absolute positioning should also be avoided for layout as it can cause issues with responsiveness.</p>

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #242629;
}
.gallery-container{
    display: flex;
    flex-wrap: wrap;
}
.gallery-image{
    width:100%;
    height: 100%;
    object-fit: cover;
}
.img-container{
    flex: 1 0 30%;
    position: relative;
    /*
    flex-grow:1;
    flex-shrink:0;
    flex-basis:100%;
    */
}
.title{
    position: absolute;
    color: white;
    bottom: 0.5em;
    left: 1em;
    font-family: sans-serif;
}
footer{
    background-color:#1f2224 ;
    color: white;
    position: relative;
    left: 0px;
    bottom: 0px;
    display: flex;
    /* display: block; */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

}
@media (max-width: 750px) {
    .img-container{
    flex: 1 0 50%;
    }
}
@media (max-width: 300px) {
    .img-container{
    flex: 1 0 100%;
    }
}
.footer{
    position: relative;
    width: 100vw;
    height: 10vh;
}
/* #about{
    justify-content: center;
    align-items: center;
} */



<p>Overall, the code can be improved by implementing best practices in HTML and CSS, such as using semantic HTML elements, adding proper alt text to images, avoiding inline styles, and using a grid or flexbox layout for better responsiveness. Additionally, accessibility can be improved by adding aria-labels to non-text elements. It is also recommended to use a CSS reset or normalize stylesheet for consistency across different browsers.</p>

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Multiverse Gallery Project</title>
</head>

<body>
    <div class="gallery-container">
        
        <article class="img-container">
            <img class="gallery-image" src="assets/1.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/2.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/3.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/4.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/5.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/6.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/7.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/8.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/9.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/10.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/11.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>
        
        <article class="img-container">
            <img class="gallery-image" src="assets/12.jpg" alt="">
            <span class="title">Lorem ipsum dolor sit amet.</span>
        </article>

    </div>
    <div class="footer">

	<footer>
        <p id="footer-title">
            Multiverse Gallery Project
            </p>
        <b id="about"> 
            
             about</b>
    </footer>
    </div>
	
</body>
</html>

A photo gallery website. This will test your HTML and CSS skills. All the designs are available inside the project.

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far