Sahil Dhuri

<p>Overall, the code could be improved by following better coding practices such as consistent naming conventions, using semantic HTML tags, and separating CSS into a separate file. Additionally, accessibility concerns such as adding alt text to images should be addressed. The website could also benefit from implementing form validation on the contact form.</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" />
        <link rel="stylesheet" href="style.css">
		<link
			rel="stylesheet"
			href="assets/font-awesome/css/font-awesome.min.css"
		/>
		<title>codedamn Project</title>
	</head>



    
	<body>
        <div class="container-1">
            <h1 class="container-1-h1">
                THIS IS MASSIVELY
            </h1>
            <p class="container-1-p">
                A free, fully responsive HTML5 + CSS3 site template designed by @Sahil for HTML5 UP and relesed for free use under the Creative Commons license.
            </p>
            <div class="circle">
                <i class="fa fa-arrow-down"></i>
            </div>
        </div>




            
            <nav>
                <section class="section-1">
                    <a class="nav-items first-a">MASSIVELY</a>
                    <a class="nav-items">BUGERBOOM</a>
                    <a class="nav-items">ELECTROJAVA</a>
                </section>
                <SECTION class="SECTION-2">
                    <i class="nav-icons fa fa-instagram"></i>
                    <i class="nav-icons fa fa-twitter"></i>
                    <i class="nav-icons fa fa-facebook"></i>
                    <i class="nav-icons fa fa-github"></i>
                </SECTION>
            </nav>





            
            <div class="main-container">
                <h3 class="date">31st May 2023</h3>
                <h1 class="main-container-h1">THIS IS MASSIVE HEADLINE</h1>
                <p class="main-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo dicta nobis sint ipsa, quasi voluptatem natus eligendi. Error, ipsum hic.</p>
                <img src="assets/images/main-section.jpg" alt="" class="main-container-img">
                <div class="border-div">Full story</div>
            </div>







            
            <div class="blog-container">
                
                <article class="blog">
                     <h3 class="date">31st May 2023</h3>
                     <h1 class="blog-container-h1">BLOG 1</h1>
                     <p class="blog-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, recusandae!</p>
                     <img src="assets/images/1.jpg" alt="" class="blog-container-img">
                     <div class="border-div">Full story</div>
                </article>
                 
                <article class="blog">
                    <h3 class="date">31st May 2023</h3>
                     <h1 class="blog-container-h1">BLOG 2</h1>
                     <p class="blog-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, recusandae!</p>
                     <img src="assets/images/2.jpg" alt="" class="blog-container-img">
                     <div class="border-div">Full story</div>
                     </article>
                     
                <article class="blog">
                    <h3 class="date">31st May 2023</h3>
                     <h1 class="blog-container-h1">BLOG 3</h1>
                     <p class="blog-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, recusandae!</p>
                     <img src="assets/images/3.jpg" alt="" class="blog-container-img">
                     <div class="border-div">Full story</div>
                     </article>
                     
                <article class="blog">
                    <h3 class="date">31st May 2023</h3>
                     <h1 class="blog-container-h1">BLOG 4</h1>
                     <p class="blog-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, recusandae!</p>
                     <img src="assets/images/4.jpg" alt="" class="blog-container-img">
                     <div class="border-div">Full story</div>
                     </article>
                     
                <article class="blog">
                    <h3 class="date">31st May 2023</h3>
                     <h1 class="blog-container-h1">BLOG 5</h1>
                     <p class="blog-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, recusandae!</p>
                     <img src="assets/images/5.jpg" alt="" class="blog-container-img">
                     <div class="border-div">Full story</div>
                     </article>
                     
                <article class="blog">
                    <h3 class="date">31st May 2023</h3>
                     <h1 class="blog-container-h1">BLOG 6</h1>
                     <p class="blog-container-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, recusandae!</p>
                     <img src="assets/images/6.jpg" alt="" class="blog-container-img">
                     <div class="border-div">Full story</div>
                     </article>
            </div>



            
            <div class="scroll-page">
                <div class="scroll1">1</div>
                <div class="scroll1">2</div>
                <div class="scroll1">3</div>
                <div class="scroll1">...</div>
                <div class="scroll1">6</div>
                <div class="scroll1">7</div>
                <div class="scroll1">Next <i class="fa fa-arrow-right"></i></div>
            </div>



            
            <div class="contact-container">
                <div class="contact1">
                    <form action="">
                        <div><label for="name">Name:</label><br>
                        <input type="text" placeholder="Enter Name:" name="name" required></div>
                        <div><label for="email">Email:</label><br>
                        <input type="email" placeholder="Enter Email:" name="email" required></div>
                        <div><label for="message">Enter your query:</label><br>
                        <textarea name="message" id="" cols="50" rows="20" required></textarea></div>
                        <div><input type="submit" value="submit" class="border-div"></div>
                    </form>
                </div>

                <div class="contact2">
                    <div class="informatation">
                        <div class="infotitle">ADDRESS: </div>
                    <div class="infoanswer">Mumbai , Maharastra , India</div>
                    </div>
                    <div class="informatation">
                        <div class="infotitle">PHONE: </div>
                    <div class="infoanswer">+91 784511269</div>
                    </div>
                    <div class="informatation">
                        <div class="infotitle">EMAIL: </div>
                    <div class="infoanswer">sahildhuri216@gmail.com</div>
                    </div>
                    <div class="informatation">
                        <div class="infotitle">SOCIAL: </div>
                    <div class="infoanswer">
                        <div class="circlelast"><i class="fa fa-instagram"></i></div>
                        <div class="circlelast"><i class="fa fa-facebook"></i></div>
                        <div class="circlelast"><i class="fa fa-github"></i></div>
                        <div class="circlelast"><i class="fa fa-linkedin"></i></div>
                    </div>
                    </div>
                </div>
            </div>


            
            <footer><pre>UNTITLED   |   DESIGN:HTML5UP   |   DEMO IMAGES: &COPY; UNSPLASH</pre></footer>

    </body>
</html>

<p>Overall, the code can be improved by using more semantic HTML tags, consolidating CSS selectors, optimizing images for faster loading times, and adding more descriptive class names. Additionally, the use of a CSS preprocessor like Sass can make styling more efficient. The commented out code should be removed and alt attributes should be added to images for accessibility.</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" />
        <link rel="stylesheet" href="style.css">
		<link
			rel="stylesheet"
			href="assets/font-awesome/css/font-awesome.min.css"
		/>
		<title>codedamn Project</title>
	</head>
	<body>
        <section class="header">
            <h1>THIS IS MASSIVELY</h1>
            <p class="headerp">A free,full resopnsive HTML5 + CSS3 site templete designed by @sahil for HTML5 UP and released for free under creative common license Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, eius!</p>
            <div class="arrow">
                <i class="fa fa-arrow-down"></i>
                </div>
        </section>
        
        
</html>

<p>The code can be improved by following consistent naming conventions, separating styles into a separate CSS file, using more descriptive class names, removing unnecessary comments and whitespace, considering the use of a CSS preprocessor, adding alt attributes to images, using semantic HTML elements where appropriate, avoiding !important in CSS styles, optimizing images for faster load times, and using HTTPS protocol for external resources.</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:#ffffff">
            </div>
			<div class="color-text">
				<p>#ffffff</p>
			</div>
        </div>

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

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

        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-holder-4" style="background-color:#eeeeee">
            </div>
			<div class="color-text">
				<p>#eeeeee</p>
			</div>
        </div>

        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-holder-5" style="background-color:#f5f5f5">
            </div>
			<div class="color-text">
				<p>#f5f5f5</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:#212931">
            </div>
            <p>#212931</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-2" style="background-color:#ffffff">
            </div>
            <p>#ffffff</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-3" style="background-color:#909498">
            </div>
            <p>#909498</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-4" style="background-color:#717981">
            </div>
            <p>#717981</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-5" style="background-color:#000000">
            </div>
            <p>#000000</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-6" style="background-color:#1e252d">
            </div>
            <p>#1e252d</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-7" style="background-color:#eeeeee">
            </div>
            <p>#eeeeee</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:&#34;Source Sans Pro&#34;, Helvetica, sans-serif; font-style:normal; font-size:80px; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 1</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>&#34;Source Sans Pro&#34;, Helvetica, sans-serif</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>80px</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>80px</div><div class="typography-col-2"><span>Color</span><br>#ffffff</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h2-dt" class=" ">
            <div class="typography-header">
                <div style="font-family:&#34;Source Sans Pro&#34;, Helvetica, sans-serif; font-style:normal; font-size:64px; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 2</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>&#34;Source Sans Pro&#34;, Helvetica, sans-serif</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>64px</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>70.4px</div><div class="typography-col-2"><span>Color</span><br>#212931</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h3-dt" class=" ">
            <div class="typography-header">
                <div style="font-family:&#34;Source Sans Pro&#34;, Helvetica, sans-serif; font-style:normal; font-size:12.8px; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 3</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>&#34;Source Sans Pro&#34;, Helvetica, sans-serif</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>12.8px</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>19.2px</div><div class="typography-col-2"><span>Color</span><br>#717981</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:Merriweather, Georgia, 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>Merriweather, Georgia, 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>38px</div><div class="typography-col-2"><span>Color</span><br>#212931</div></div>      
            </div>
            </dt>
        </div>
    </div>
</div>

<p>Overall, the code can be improved by refactoring it to be more organized, modular, and maintainable. The use of more descriptive class and ID names, consolidating repetitive styles, removing unnecessary code, adding comments, and using more semantic HTML tags can greatly enhance the readability of the code. Additionally, optimizing images for faster page load times and testing the website on different browsers and devices can improve performance. The use of a CSS preprocessor like Sass or Less can also make the code cleaner and easier to manage.</p>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-image: url(assets/images/bg.jpg);
    background-repeat:repeat;
}



/* styling container 1 */
.container-1{
    width: 100vw;
    height:95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.circle{
    border: 2px solid white;
    border-radius: 50%;
    padding: 10px;
    margin-top: 60px;
}
.container-1-h1{
    font-size: 64px;
    padding: 50px;
}
.container-1-p{
    font-size: 1em;
    padding: 50px;
}
.circle i{
    font-size: 30px;
}



/* styling navbar */
nav{
    color:white;
    display: flex;
    justify-content: space-between;
    background-color: rgb(50, 50, 50);
    margin-left: 100px;
    margin-right: 100px;
}
nav a{
    padding: 15px;
    padding-right: 80px;
}
nav i{
    padding: 8px;
    padding-left:40px;
}
.first-a{
    color: black;
    background-color: white;
}



/* styling main-container */
.main-container{
    margin-left: 100px;
    margin-right: 100px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.main-container *{
    padding: 20px;
}
.border-div{
    border: 2px solid black;
    padding: 20px;
    display: inline-block;
    margin-bottom: 20px;
}
.date::before{
    content: "----------------------";
}
.date::after{
    content: "----------------------";
}
.main-container-h1{
    font-size: 64px;
}
.main-container-p{
    font-size: 18px;
}
.main-container-img{
    width: 60vw;
    height: auto;
    object-fit: cover;
}


/* styling blogs container */
.blog-container{
    margin-left: 100px;
    margin-right: 100px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.blog{
    flex: 0 1 50%;
    border: 2px solid rgb(245, 245, 245);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}
.blog *{
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 20px;
    flex-wrap: wrap;
}
.blog h3{
    padding-top: 20px;
}

/* styling scroll bar */
.scroll-page{
    display: flex;
    background-color: white;
    margin-left: 100px;
    margin-right: 100px;
    justify-content: center;
    align-items: center;
    padding: 50px;
    border: 2px solid rgb(245, 245, 245);

}
.scroll1{
    border: 2px solid black;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* styling contact form */
.contact-container{
    margin-left: 100px;
    margin-right: 100px;
    background-color: white;
    flex-direction: row;
    display: flex;
    flex: 1 0 50%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px solid rgb(245, 245, 245);
}
.circlelast{
    display: inline-block;
}
.contact1 div{
    padding:  20px 5px;
    font-size: 20px;
}
.contact1 input{
    width:350px;
    height: 50px;
}
.contact2 div{
    padding:  20px 5px;
    font-size: 20px;
}
label{
    font-size: 20px;
}

/* styling footer */
footer{
    margin-right: 100px;
    margin-left: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    font-size: 15px;
    color: aliceblue;
}
@media (max-width:1050px){
    nav a {
        display: block;
    }
}
@media (max-width:430px){
.circle{
    display: none;
}
.container-1-h1{
    font-size: 34px;
    padding: 50px;
}
.container-1-p{
    font-size: 0.8em;
    padding: 50px;
}
nav{
    color:white;
    display: block;
    justify-content: space-between;
    background-color: rgb(50, 50, 50);
    margin-left: 0px;
    margin-right: 0px;
}
nav a{
    padding: 15px;
    padding-right: 80px;
}
nav i{
    padding: 8px;
    padding-left:40px;
}
.first-a{
    color: black;
    background-color: white;
}



/* styling main-container */
.main-container{
    margin-left: 0px;
    margin-right: 0px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.main-container *{
    padding: 20px;
}
.border-div{
    border: 2px solid black;
    padding: 20px;
    display: inline-block;
    margin-bottom: 20px;
}
.date::before{
    content: "";
}
.date::after{
    content: "";
}
.main-container-h1{
    font-size: 64px;
}
.main-container-p{
    font-size: 18px;
}
.main-container-img{
    width: 60vw;
    height: auto;
    object-fit: cover;
}


/* styling blogs container */
.blog-container{
    margin-left: 0px;
    margin-right: 0px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.blog{
    flex: 0 1 50%;
    border: 2px solid rgb(245, 245, 245);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}
.blog *{
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 20px;
    flex-wrap: wrap;
}
.blog h3{
    padding-top: 20px;
}

/* styling scroll bar */
.scroll-page{
    display: flex;
    background-color: white;
    margin-left: 0px;
    margin-right: 0px;
    justify-content: center;
    align-items: center;
    padding: 50px;
    border: 2px solid rgb(245, 245, 245);

}
.scroll1{
    border: 2px solid black;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* styling contact form */
.contact-container{
    margin-left: 0px;
    margin-right: 0px;
    background-color: white;
    flex-direction: row;
    display: flex;
    flex: 1 0 50%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px solid rgb(245, 245, 245);
}
.circlelast{
    display: inline-block;
}
.contact1 div{
    padding:  20px 5px;
    font-size: 20px;
}
.contact1 input{
    width:350px;
    height: 50px;
}
.contact2 div{
    padding:  20px 5px;
    font-size: 20px;
}
label{
    font-size: 20px;
}

/* styling footer */
footer{
    margin-right: 0px;
    margin-left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    font-size: 10px;
    color: aliceblue;
}
    }
}

This project will be a perfect test of your layout and responsive skills. The major focus is HTML and CSS for this project

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far