Sahil Dhuri

<p>The code can be improved by following consistent naming conventions, removing unnecessary comments and whitespace, avoiding inline styles, using semantic HTML elements, adding alt attributes to images, considering a CSS framework or preprocessor, avoiding !important in CSS rules, using relative units for font sizes, and implementing a linter. Additionally, the code could benefit from better organization and separation of concerns between HTML and CSS.</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
	<title>codedamn Project Style Guide</title>
    
    <style>
        #header {
            margin: 0 auto;
            background-color: white;
        }

        #logo {
            padding-right: 10px;
			margin-top: 2px;
			height: 24px;
        }

		#header-logo {
		    height: 95px;
			position: relative;
		}
		
		#logo-text {
			position: absolute;
			top: 50%; left: 50%;
		    transform: translate(-50%,-50%);
			width: 305px;
		}

        h1 {
            font-family: Manrope;
			font-size: 24px;
			font-style: normal;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0em;
			text-align: left;
			margin: 0px;
			
        }

        h2 {
            font-family: 'Inter', sans-serif;
            font-size:17px;
            color:#263646;
            margin-top:33px;
            margin-bottom:0px;
        }
		
		h2 span {
			font-family: 'Inter', sans-serif;
            font-size:10px;
            color:#777777;
            margin-top:33px;
            margin-bottom:0px;
		
		}

        h3 {
            color:#777777;
            margin-top:8px;
            margin-bottom:30px;
        }

        

        h4 {
            font-family:'Inter';
            font-weight:700;
            color:#777777;
            font-size:14px;
            margin-top: 24px;
            margin-bottom: 0px;

        }
		
		h4 span {
			font-size:12px;
		}
		
		h5 {
			color: white;
			margin: 0px auto;
			padding-top: 7px;
			padding-bottom: 7px;
			
		}
		
		body {
			margin:0px !important;
		}

        span {
            font-family: 'Inter', sans-serif;
            color:#777777;
            margin-top:7px;
            margin-bottom:0px;
            font-size:14px;
        }

        p {
            font-family: 'Inter', sans-serif;
			color: black;
            text-align:center;
            margin-top: 13px;
            margin-bottom: 13px;
        }



        img {
            float:left;
        }

        #main-holder {
            clear:both;
			background-color:#f4f4f5;
        }

        #backgrondcolors {
            
        }
		
		.color-section {
			font-family: Inter;
			font-size: 30px;
			font-style: normal;
			font-weight: 400;
			letter-spacing: 0.01em;
			text-align: left;
			padding: 30px 0 20px 48px;
		}

        #textcolors {
            
        }

        .color-wrapper {
            display:inline-block;
            margin-top: 32px;
			box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background-color: white;
			margin-left: 49px;
			font-size: 16px;
			font-weight: 500;
        }
        .color-holder {
            width: 184px;
            height: 130px;
            background: #ACACAC;
            margin: auto;
			border-radius: 4px 4px 0px 0px;
        }
		
		.not-set {
			opacity:0.4;
		}

        .typography-header {
            padding-left: 48px;
            padding-top: 24px;
            padding-bottom: 16px;
        }

        #typography {
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0em;
            text-align: left;
            color: black;
        }

        #typography span {
            color: #919499;
            text-transform: uppercase;
            line-height: 19px;
        }

        .typography-row {
            padding-left: 48px;
            padding-bottom: 16px;
        }

        .typography-col-1{
            display: inline-block;
        }

        .typography-col-2{
            display: inline-block;
            position: absolute;
            left: 256px;
        }

        dt {
            border-bottom: 1px solid #DBDEE6;
            padding-bottom: 16px;
        }
    </style>
</head>

<div id="main-holder" class="container_16">
    <div id="backgrondcolors">
		<div class="color-section">Background colors</div>
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-holder-1" style="background-color:#000000">
            </div>
			<div class="color-text">
				<p>#000000</p>
			</div>
        </div>

        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-holder-2" style="background-color:#1cb495">
            </div>
			<div class="color-text">
				<p>#1cb495</p>
			</div>
        </div>

        
        
    </div>

    <div id="textcolors">
		<div class="color-section">Text colors</div>
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-1" style="background-color:#000000">
            </div>
            <p>#000000</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-2" style="background-color:#ffffff">
            </div>
            <p>#ffffff</p>
        </div>
        
        
    </div>
    <div id="typography">
        <div class="typeclass">
            
            
            <dt id="result-header-h1-dt" class=" first">
            <div class="typography-header">
                <div style="font-family:Roboto, sans-serif; font-style:normal; font-size:52px; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 1</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>Roboto, sans-serif</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>52px</div><div class="typography-col-2"><span>Font Style</span><br>normal</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>65px</div><div class="typography-col-2"><span>Color</span><br>#ffffff</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h2-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 2</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h3-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 3</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h4-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 4</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h5-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 5</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h6-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 6</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            

            
            <dt id="result-header-h7-dt" class=" ">
            <div class="typography-header">
                <div style="font-family:Roboto, sans-serif; font-style:normal; font-size:16px; line-height:; color:; background-color:transparent;margin-left: 0px;">Body</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>Roboto, sans-serif</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>16px</div><div class="typography-col-2"><span>Font Style</span><br>normal</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>26.4px</div><div class="typography-col-2"><span>Color</span><br>ERR</div></div>      
            </div>
            </dt>
        </div>
    </div>
</div>

<p>Overall, the code could be improved by implementing better accessibility practices, optimizing for faster loading times, and using more advanced tools like a CSS preprocessor. Additionally, implementing form validation would improve user experience and prevent potential security vulnerabilities.</p>

<!DOCTYPE html>
<html lang="en">
	<head>
		<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>codedamn Project</title>
		<link
			rel="stylesheet"
			href="assets/font-awesome/css/font-awesome.min.css"
		/>
        <link rel="stylesheet" href="style.css">
	</head>
	<body>
        <div class="container">

        <div class="main-container">
        <div class="heading">    
		<h1>Eventually</h1>
        </div>
        <div class="paragraph">
            <p>A simple templete for telling the world when you'll launch your next big thing. Brought to you by HTML5 UP. </p>
        </div>
        <div class="input">
            <input type="text" name="Email" placeholder="Email Address" id="email-button">
            <input type="submit" value="Sign Up" name="Submit" id="submit-button">
        </div>
        </div>

		<div class="footer">
        <div class="icon">
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-envelope-o"></i>
        <i class="fa fa-github"></i>
        </div>
        <div class="last-line">
            <pre>&copy; Untitled.  |  Credits: Unsplash + HTML5 UP</pre>
        </div>
        </div>

        </div>
	</body>
</html>


<p>The code can be improved by using more specific selectors, avoiding absolute units, and using semantic HTML tags. The use of !important and inline styles should be avoided. Additionally, vendor prefixes should be added for better cross-browser compatibility. Alt attributes should be added to all images for accessibility purposes.</p>

*{
    color: #ffff;
    margin: 0;
    padding: 0;
}
.container{
    background-image: url(assets/images/bg.jpg);
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
    flex-wrap: wrap;
    padding: 40px 30px;
    
}
h1{
    font-size: 65px;
    font-family: Roboto,sans-serif;
}
.heading{
    
}
.paragraph{
    font-family: Roboto,sans-serif;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 16px;
}
#email-button{
    width: 500px;
    height: 30px;
    border-radius: 8px;
    background-color: transparent;
    border-color: black;
}
#submit-button{
    background-color: #1cb495;
    height: 30px;
    width: 110px;
    border-radius: 8px;
}
.footer{
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 40px 30px;
    padding-bottom: 10px;
}

@media ONLY screen and (max-width:750px){
    #submit-button{
        animation: togglecolor 3000ms infinite;
    }
  @keyframes togglecolor{
    0%{
        background-color: #1cb495;
    }
    25%{
        background-color: bisque;
    }
    50%{
        background-color: brown;
    }
    75%{
        background-color: royalblue;
    }
    99%{
        background-color: #1cb495;
    }
  }
    
}
@media screen and (max-width:450px) {

    #email-button{
        display: block;
        animation: widthchange 100ms linear forwards;
    }
    #submit-button{
        display: block;
    }
    @keyframes widthchange{
        0%{
            width: 500px;
        }
        25%{
            width: 450px;
        }
        50%{
            width: 400px;
        }
        75%{
            width: 300px;
        }
        100%{
            width: 200px;
        }
    }
}
    


A simple and minimal landing page built in HTML5 for a pre-launch to collect email addresses. You will learn about background images and building a deployable landing page in this project.

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far