Hi all,
I’ve finished the Grid Task Board Project ([Link to Task])(https://www.codecademy.com/courses/learn-css/projects/css-grid-project-ii?action=resume_content_item), but can’t get the navbar h1 element at the top of the page to center inline (“Stuffed Animal Task List”). I’ve tried to display: inline-block, and add a single row.
Can anyone shed some light?
Have you tried
text-align: center;
or
margin: 0 auto;
Ok, so I fixed it by making a grid in the navbar, and set navbar h1 to ‘c’. Is there a better way to have done that?
Here is the code. If there’s a better way to be uploading, let me know! I’m still learning and appreciate any help!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Project Task Board</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="bg"></div>
<div class="navbar">
<div class="search-bar">
<img class="search-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/search_icon.svg">
</div>
<h1>STUFFED ANIMAL TASK LIST</h1>
</div>
<div class="site-body">
<div class="container">
<div class="card-column future-projects">
<div class="taskgroup-heading">
<h2>FUTURE PROJECTS</h2>
<div class="ellipsis-icon">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
</div>
</div>
<div class="card future-i">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Pick Color Trends</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/21/2017</p>
</div>
<div class="card future-ii">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Source Fabrics</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/21/2017</p>
</div>
<div class="card future-iii">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Manufacture clothing</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/20/2017</p>
</div>
<div class="card future-iv">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Confirm structural integrity</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/23/2017</p>
</div>
<div class="card future-v">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Manufacture mandibles</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/26/2017</p>
</div>
</div>
<div class="card-column active-projects">
<div class="taskgroup-heading">
<h2>ACTIVE PROJECTS</h2>
<div class="ellipsis-icon">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
</div>
</div>
<div class="card project-i">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Test fear factor</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/20/2017</p>
</div>
<div class="card project-ii">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Develop button samples</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/21/2017</p>
</div>
<div class="card project-iii">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Recall malfunctioning giraffes</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/21/2017</p>
</div>
<div class="card project-iv">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">task task task task</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/20/2017</p>
</div>
<div class="card project-v">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Perform user research on new stuffing</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/23/2017</p>
</div>
</div><div class="card-column completed-projects">
<div class="taskgroup-heading">
<h2>COMPLETED PROJECTS</h2>
<div class="ellipsis-icon">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
<img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/oval-copy.svg">
</div>
</div>
<div class="card complete-i">
<div class="rectangle yellow"></div>
<div class="rectangle green"></div>
<div class="rectangle blue"></div>
<div class="rectangle orange"></div>
<p class="task-description">Research Trends</p>
<img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg">
<p class="task-date">4/19/2017</p>
</div>
<div class="add-card-container">
<input class ="new-card-task" placeholder="Add a card...">
<button class="add-card">Add</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(".add-card").on("click", function(){
var description = $(".new-card-task").val();
var today = new Date();
var dateStr = (today.getMonth()+1) + "/" + today.getDate() + "/" + today.getFullYear();
var newCard = $(`<div class="card"><div class="rectangle yellow"></div><div class="rectangle green"></div><div class="rectangle blue"></div><div class="rectangle orange"></div><p class="task-description">${description}</p><img class="list-icon" src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/list_icon.svg"><p class="task-date">${dateStr}</p></div>`)
$(".add-card-container").before(newCard);
})
})
</script>
CSS
@font-face {
font-family: WorkSans;
src: url("https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/Work_Sans/WorkSans-Regular.ttf");
}
@font-face {
font-family: Poppins;
src: url("https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/Poppins/Poppins-Regular.ttf");
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-image: linear-gradient(359deg, #3023ae, #eb7f7b);
background-repeat: no-repeat;
background-attachment: fixed;
}
.navbar {
display: grid;
grid-template-columns: 10px 1fr 3fr 1fr;
position: absolute;
width: 100%;
height: 60px;
background-color: rgba(120,70,154, 0.2);
text-align: center;
top: 0;
left: 0;
justify-content: space-around;
grid-template-areas: "a a a a b b b b "
"c c c c d d d d ";
align-items: start;
}
.navbar h1 {
font-family: Poppins;
color: #ffffff;
margin: 0;
align-self: center;
display: inline-block;
grid-area: c;
}
.container {
width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.search-bar {
display: inline-block;
width: 23%;
height: 40px;
background-color: rgba(255,255,255, 0.35);
left: 50px;
top: 8px;
position: absolute;
}
input {
display: inline-block;
border: none;
background: transparent;
font-size: 14px;
}
.search-bar input {
float: left;
height: 18px;
margin-top: 9px;
margin-left: 7px;
}
.card-column input {
height: 18px;
margin-left: 15px;
}
.search-icon {
float: left;
margin-top: 9px;
margin-left: 7px;
}
.card-column {
background-color: #ffffff;
min-height: 700px;
display: grid;
grid-template-rows: 20px repeat(5, 100px);
align-content: space-between;
grid-auto-rows: 100px;
}
.card-column h2 {
padding: 0;
margin: 0 auto;
font-family: WorkSans;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.2px;
text-align: left;
color: #2f2f2f;
display: inline-block;
}
.taskgroup-heading {
margin-left: 15px;
margin-top: 7px;
}
.site-body {
position: absolute;
top: 100px;
margin-left: 50px;
}
.card {
margin-right: 15px;
margin-left: 15px;
background-color: rgba(216, 216, 216, 0.21);
border: solid 1px rgba(151,151,151,0.21);
position: relative;
}
.rectangle {
width: 57px;
height: 6px;
position: relative;
display: inline-block;
margin-left: 7px;
}
.list-icon {
display: inline-block;
margin-left: 7px;
margin-bottom: 5px;
position: absolute;
bottom: 0;
}
.task-description {
margin-left: 7px;
margin-top: 0;
font-family: WorkSans;
font-size: 14px;
letter-spacing: 0.2px;
text-align: left;
color: #2f2f2f;
}
.ellipsis-icon {
display: inline-block;
float: right;
margin-right: 15px;
}
.task-date {
display: inline-block;
font-family: WorkSans;
font-size: 10px;
letter-spacing: 0.1px;
text-align: left;
color: #9b9b9b;
position: absolute;
bottom: 0;
margin-bottom: 5px;
left: 25px;
}
.yellow {
background-color: #fdcb1e;
}
.orange {
background-color: #ff7700;
}
.green {
background-color: #50e3c2;
}
.blue {
background-color: #3343e5;
}
.add-card {
background-color: rgba(216, 216, 216, 0.21);
border: solid 1px rgba(151,151,151,0.21);
color: #2f2f2f;
}
I did, and it wasn’t coming out for some reason. I’ve uploaded the code below, and used a different solution.
Ok, glad you found something you are happy with ;).