2
\$\begingroup\$

Just want to know if I used CSS Grid properly along with flex. I always have that feeling that what I'm programming can look better and be shorter, etc. Thoughts?

/* Main */ 
@import url('https://fonts.googleapis.com/css?family=Quicksand');


body {
	background-color: #ecf0f1;
	margin: 0px;
	padding: 0px;
}

.grid {
	display: grid;
	padding-bottom: 30px;
	grid-template-rows: auto auto;
	justify-content: space-around;
	grid-template-areas:
		". . title . ."
		". main main main ."
}	
	
.main {
	overflow: hidden;
	grid-area: main;
	display: inline-flex;
	
	margin: 150px 10px 10px 10px;
	justify-content: center;
	flex-direction: row;
}

.site_header {
	overflow: hidden;
	position: fixed;
	grid-area: head;
	width: 100%;
	height: 80px;
	background-color: #2ecc71;
}



.site_header h1 {
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 15px;
	padding-top: 10px;
	width: 300px;
    font-family: 'Quicksand', sans-serif;
    font-size: 2.5em;
	border-radius: 0px 0px 60px 0px;
	background-color: beige;
}
.site_header a {
	text-decoration: none;
	color: #e74c3c;
}

.site_content {
	width: 1000px;
	height: 600px;
	background: #2ecc71;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.main_title {
	grid-area: title;
	text-decoration: underline;
	color: #e74c3c;
	text-align: center;
	margin-top: 200px;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.75em;
}


.site_content p {
	color: black;
}

.site_aside {
	overflow: hidden;
	margin-right: 50px;
	width: 200px;
	padding: 15px;
	background: lightblue;	
}

.site_footer {
	width: 98%;
	margin-left: 1%;
	justify-self: center;
	display: inline-flex;
	justify-content: space-around;
	align-items: center;
	border-top: 4px solid #2ecc71;
}

.site_footer p {
	font-weight: bold;
}
	
.site_footer a {
	text-decoration: none;
	color: black;
}
	
.small {
	font-size: 0.75em;
	font-weight: lighter;
	font-family: 'Quicksand', sans-serif;
}
<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel = "stylesheet" type = "text/css" href = "styles/main.css">
		<title>New Wizardry Test page</title>
	</head>
	<body>
		<header class = "site_header">
				<h1><a href = "Test page .html">New Wizardry</a></h1><!--  nav bar will be located here -->
		</header>
		
		<div class = "grid">
			<div class = "main_title">
				<h1>Main Page</h1>
			</div>
			<div class = "main">
				<div class = "site_aside">
					Site aside
						
				</div>
				<div class = "site_content">
					
					<p>Here is where we will talk about what we do, updates, talk about the company(about us) etc.. either a progression bar or a launch date will be placed here.</p>
				</div>
				
				
			</div>
		</div>
		<footer class = "site_footer">
			<p>New Wizardry<span class= "small"> - A Front-end Programming company</span></p>
			<p>Email: <span class= "small"><a href = "mailto:sales@newWizardry.com"> sales@newwizardry.com</a></p>
			<p>Darcey McKelvey</p>
		</footer>
	</body>
</html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.