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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.