Skip to content

CSS Grid & Flexbox Homework #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
taneapoleacov wants to merge 7 commits into
base: tpoleacov
Choose a base branch
from
Open

CSS Grid & Flexbox Homework #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8064dc7
css grid and flex implemented
taneapoleacov May 19, 2019
8d408a8
made it responsive
taneapoleacov May 19, 2019
7dca38d
added main tag
taneapoleacov May 22, 2019
ce37abe
header mistake resolved
taneapoleacov May 22, 2019
4eac98a
made layout changes
taneapoleacov May 22, 2019
8440e84
layout style mistakes resolved
taneapoleacov May 23, 2019
d7ebbb0
made responsive on mobile
taneapoleacov May 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 206 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
html,body {
background-color: #ffeead;
}

.wrapper {
Copy link
Contributor

@IvanCeban IvanCeban May 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make your wrapper take the full space of the screen.

display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, [col] 1fr) ;
/* grid-template-rows: repeat(6, [row] auto ); */
grid-template-rows: auto 150px 150px 150px 150px auto;
padding: 10px;
background-color: #ffeead;
color: #444;
}

.box {
padding: 10px;
font-size: 150%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

ul:last-child {
margin-left: auto;
}

nav li {
list-style: none;
}

.navigation ul {
display: flex;
}

.topbar > li {
padding: 0 10px 0 10px;
color: #f7e6d7;
box-sizing: border-box;
list-style-type: none;
}

ul > li:last-child {
margin-left: auto;
}

.logo {
text-align: center;
background-color: #ffcc5c;
grid-column: 1 / 2;
}

header{
background-color: #8dcfb1;
grid-column: 2/ -1;
}

aside {
Copy link
Contributor

@IvanCeban IvanCeban May 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Align the children properly (according the example)

display: flex;
flex-direction: column;
text-align: center;
background-color: #ff6f69;
grid-column: 1 / 2;
grid-row: 2 / 6;
}

aside nav ul > li:first-child {
margin-bottom: auto;
}

main{
display: grid;
grid-column: 2 / -1;
grid-row: 2 / 6;
grid-gap: 10px;
padding: 20px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
background-color: rgb(255, 182, 86);
}

main > div{
display: flex;
justify-content: center;
align-items: center;
}

.first-content {
background-color: #e67b90;
grid-column: 1 / 3;
grid-row: 1 / 3;
}

.second-content {
background-color: #ae7ece;
grid-column: 3 / 8;
grid-row: 1 / 3;
}

.third-content {
background-color: #9dcf90;
grid-column: 8 / -1;
grid-row: 1 / 5;
}

.forth-content {
background-color: #8fdbdb;
grid-column: 1 / 8;
grid-row: 3 / 5;
}

.bottom {
text-align: center;
background-color: #a9e069;
grid-column: col 1 / -1;
grid-row: 6 / 7;
}

@media (max-width: 900px) {
.first-content {
grid-column: 1 / 5;
grid-row: 1 / 3;
}

.second-content {
grid-column: 5 / 9;
grid-row: 1 / 3;
}

.third-content {
grid-column: 9 / -1;
grid-row: 1 / 5;
}

.forth-content {
grid-column: 1 / 9;
grid-row: 3 / 5;
}

}

@media (max-width: 600px) {
.topbar {
flex-wrap: wrap;
}

.topbar > li {
flex:1 1 50%;
text-align: center;
}

.first-content {
grid-column: 1 / -1;
grid-row: 1 / 2;
}

.second-content {
grid-column: 1 / -1;
grid-row: 2 / 3;
}

.third-content {
grid-column: 1 / -1;
grid-row: 3 / 4;
}

.forth-content {
grid-column: 1 / -1;
grid-row: 4 / 5;
}
}

@media (min-width: 320px) and (max-width: 480px) {
Copy link
Contributor

@IvanCeban IvanCeban May 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On small devices your nav blocks are too high. The content allows you to make their height less and => save some space for important content on the screen

.logo {
grid-column: 1 / -1;
}

header{
grid-column: 1/ 7;
grid-row: 2 / 3;
}

aside {
grid-column: 7/ -1;
grid-row: 2 / 3;
}

main {
grid-column: 1 / -1;
grid-row: 3 / 6;
}

.bottom {
grid-column: 1 / -1;
grid-row: 6 / 7;
}
}






42 changes: 42 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>Homework-VueJS-HTML</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="box logo">LOGO</div>
<header>
<nav class="navigation">
<ul class="box topbar">
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>LOG IN</li>
</ul>
</nav>
</header>
<aside>
<nav class="sidebar">
<ul class="box leftbar">
<li>MENU</li>
<li>Articles</li>
<li>News</li>
<li>Blog</li>
</ul>
</nav>
</aside>
<main lass="box content">
<div class="box first-content">CONTENT 1</div>
<div class="box second-content">CONTENT 2</div>
<div class="box third-content">CONTENT 3</div>
<div class="box forth-content">CONTENT 4</div>
</main>
<footer class="box bottom">FOOTER</footer>
</div>
</body>
</html>