arif98741/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="wrapper">
        <nav>
            <div>
                logo
            </div>
            <div class="navbar">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Projects</a></li>
                    <li><a href="">Notice</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Sign Up/Login</a></li>
                </ul>
            </div>
        </nav>
        <div id="columns">
            <div class="item">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi ullam consectetur sit hic magnam quas
                    inventore no, quod cupiditate rerum, corporis sequi at nihil dolorum ea repellat similique eaque
                    nobis impedit maxime? Rerum, animi voluptate dolor beatae, sunt corporis commodi, quisquam at
                    voluptates dicta impedit est laudantium labore cumque? Placeat quo eaque accusamus libero dolore
                    quas quaerat, expedita vel perspiciatis, tenetur ullam optio!</p>
            </div>


            <div class="item">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque consequatur quae quaerat iure quam
                    eveniet harum ut, quidem quos suscipit numquam sint quo eaque, aliquid, placeat rerum alias dolores
                    eos? Accusamus, quod. Natus provident possimus aliquid eius. Distinctio obcaecati atque nisi fugiat,
                    quos eligendi deserunt dolorum voluptatibus labore temporibus veniam!</p>
            </div>
            <div class="item">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque consequatur quae quaerat iure quam
                    eveniet harum ut, quidem quos suscipit numquam sint quo eaque, aliquid, placeat rerum alias dolores
                    eos? Accusamus, quod. Natus provident possimus aliquid eius. Distinctio obcaecati atque nisi fugiat,
                    quos eligendi deserunt dolorum voluptatibus labore temporibus veniam!</p>
            </div>


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

</html>

## style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;1,100;1,200&display=swap');

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

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

#wrapper {
    min-height: 100vh;
    margin: 10px;
    /* max-width: 1440px; */
}

ul {
    list-style: none;
}

ul>li>a {
    text-decoration: none;
}

#columns {
    background-color: #f8f8f8;
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: cen;
}

.item {

    background: #048a40;
    padding: 20px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 1.5rem;
}

nav{
    display: flex;
    justify-content: space-between;
    height: 65px;
}

nav ul {
    display: flex;
    height: 100%;
}
nav ul li{
    margin-right: 10px;
    background: #048a40;
    justify-content: center;
    align-items: center;
}

nav ul li a{
    color: #fff;
    padding: 10px 5px;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id="wrapper">
	<nav>
	<div>
	logo
	</div>
	<div class="navbar">
	<ul>
	<li><a href="">Home</a></li>
	<li><a href="">Projects</a></li>
	<li><a href="">Notice</a></li>
	<li><a href="">Contact</a></li>
	<li><a href="">Sign Up/Login</a></li>
	</ul>
	</div>
	</nav>
	<div id="columns">
	<div class="item">
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi ullam consectetur sit hic magnam quas
	inventore no, quod cupiditate rerum, corporis sequi at nihil dolorum ea repellat similique eaque
	nobis impedit maxime? Rerum, animi voluptate dolor beatae, sunt corporis commodi, quisquam at
	voluptates dicta impedit est laudantium labore cumque? Placeat quo eaque accusamus libero dolore
	quas quaerat, expedita vel perspiciatis, tenetur ullam optio!</p>
	</div>



	<div class="item">
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque consequatur quae quaerat iure quam
	eveniet harum ut, quidem quos suscipit numquam sint quo eaque, aliquid, placeat rerum alias dolores
	eos? Accusamus, quod. Natus provident possimus aliquid eius. Distinctio obcaecati atque nisi fugiat,
	quos eligendi deserunt dolorum voluptatibus labore temporibus veniam!</p>
	</div>
	<div class="item">
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque consequatur quae quaerat iure quam
	eveniet harum ut, quidem quos suscipit numquam sint quo eaque, aliquid, placeat rerum alias dolores
	eos? Accusamus, quod. Natus provident possimus aliquid eius. Distinctio obcaecati atque nisi fugiat,
	quos eligendi deserunt dolorum voluptatibus labore temporibus veniam!</p>
	</div>


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

	</html>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;1,100;1,200&display=swap');

	* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	}

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

	#wrapper {
	min-height: 100vh;
	margin: 10px;
	/* max-width: 1440px; */
	}

	ul {
	list-style: none;
	}

	ul>li>a {
	text-decoration: none;
	}

	#columns {
	background-color: #f8f8f8;
	gap: 20px;
	display: flex;
	justify-content: center;
	align-items: cen;
	}

	.item {

	background: #048a40;
	padding: 20px;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	line-height: 1.5rem;
	}

	nav{
	display: flex;
	justify-content: space-between;
	height: 65px;
	}

	nav ul {
	display: flex;
	height: 100%;
	}
	nav ul li{
	margin-right: 10px;
	background: #048a40;
	justify-content: center;
	align-items: center;
	}

	nav ul li a{
	color: #fff;
	padding: 10px 5px;
	}