Skip to content

Commit 3218539

Browse files
IvanCebanIvanCeban
authored
Merge pull request #10 from jfredz/master
Layout done
2 parents b408fec + ad39432 commit 3218539

File tree

20 files changed

+2005
-1
lines changed

20 files changed

+2005
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
# Homework-VueJS-HTML
1+
# Homework-VueJS-HTML
2+
3+
- Create a layout based on this mockup.
4+
5+
- Dimensions, fonts and colors are up to you.
6+
- For text use simple 'span' (no links or buttons are required)
7+
- Use both Flex and Grid in appropriate places.
8+
- The layout should be fully responsive, should look good on all devices (from mobile to desktop). This means you will have to reorder elements to fit the screen and keep readability.
9+
- Any animations, transitions and other creativity are welcome (but not required)
10+
- Using preprocessors is a big plus (but not required)
11+
12+
### =======
13+
14+
- Layout was created using SASS.
15+
- Responsive, and has 2 breakpoints
16+
- Hover efects on menu items

‎css/style.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
*,
2+
*::after,
3+
*::before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box; }
7+
8+
html {
9+
font-size: 62.5%; }
10+
11+
body {
12+
font-family: "Lato", sans-serif;
13+
background-color: #eee; }
14+
15+
.side-menu__title {
16+
font-weight: 400; }
17+
18+
.container {
19+
font-size: 1.6rem;
20+
color: #fff; }
21+
22+
.u-center-text {
23+
display: flex;
24+
justify-content: center;
25+
align-items: center; }
26+
27+
.header__navbar {
28+
padding: 0.5rem 1rem;
29+
display: flex;
30+
align-items: center; }
31+
.header__navbar .navbar__items {
32+
display: flex;
33+
flex: 1;
34+
list-style: none; }
35+
.header__navbar .navbar__items .navbar__item {
36+
text-transform: uppercase; }
37+
.header__navbar .navbar__items .navbar__item:not(:last-child) {
38+
margin-right: 2rem; }
39+
.header__navbar .navbar__items .navbar__item:last-child {
40+
margin-left: auto; }
41+
.header__navbar .navbar__items .navbar__item a {
42+
text-decoration: none; }
43+
44+
.header__logo-box {
45+
background-image: linear-gradient(to right bottom, #92ade8, #eeeeee);
46+
display: flex;
47+
justify-content: center;
48+
align-items: center; }
49+
50+
.side-menu {
51+
padding: 1.5rem 0;
52+
text-transform: uppercase;
53+
display: flex;
54+
align-items: center;
55+
flex-direction: column; }
56+
.side-menu .side-menu__items {
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
margin-top: auto;
61+
list-style: none; }
62+
.side-menu .side-menu__items .side-menu__item:not(:first-child) {
63+
margin-top: 2.5rem; }
64+
.side-menu .side-menu__items .side-menu__item a {
65+
text-decoration: none; }
66+
67+
.footer {
68+
text-align: center; }
69+
70+
.link {
71+
color: #fff; }
72+
.link:hover {
73+
color: #656868; }
74+
.link:active {
75+
color: rgba(101, 104, 104, 0.7); }
76+
77+
.container {
78+
display: grid;
79+
height: 100vh;
80+
padding: 1rem;
81+
grid-gap: 0.5rem;
82+
grid-template-columns: 16rem auto;
83+
grid-template-rows: 5rem auto 5rem; }
84+
85+
.header__logo-box {
86+
grid-column: 1 / 2; }
87+
88+
.header__navbar {
89+
grid-column: 2 / 3; }
90+
91+
.content {
92+
grid-column: 2 / 3;
93+
padding: 2rem;
94+
display: grid;
95+
grid-gap: 1rem;
96+
grid-template-columns: 2.8fr 4fr 3.2fr;
97+
grid-template-rows: auto auto; }
98+
.content .content__item-1 {
99+
grid-column: 1 / 2; }
100+
.content .content__item-2 {
101+
grid-column: 2 / 3; }
102+
.content .content__item-3 {
103+
grid-column: 1 / 3; }
104+
.content .content__item-4 {
105+
grid-column: 3 / 4;
106+
grid-row: 1 / 3; }
107+
108+
.footer {
109+
grid-column: 1 / 3; }
110+
111+
@media only screen and (max-width: 768px) {
112+
.container {
113+
grid-template-columns: 5rem auto;
114+
grid-template-rows: 5rem 5rem auto 5rem; }
115+
.container .side-menu {
116+
grid-column: 1 / 3;
117+
flex-direction: row;
118+
justify-content: center;
119+
align-items: center;
120+
padding: 0.5rem 1rem; }
121+
.container .side-menu .side-menu__title {
122+
display: none; }
123+
.container .side-menu .side-menu__items {
124+
padding: 0;
125+
flex-direction: row;
126+
margin-top: 0; }
127+
.container .side-menu .side-menu__items .side-menu__item {
128+
margin: 0; }
129+
.container .side-menu .side-menu__items .side-menu__item:not(:last-child) {
130+
margin-right: 2rem; }
131+
.container .content {
132+
grid-column: 1 / 3;
133+
grid-row: 3 / 4;
134+
padding: 1rem; }
135+
.container .footer {
136+
grid-row: 4 / 5; } }
137+
138+
@media only screen and (max-width: 575px) {
139+
.container .content {
140+
grid-template-columns: 1fr;
141+
grid-auto-rows: auto;
142+
padding: 0.1rem; }
143+
.container .content .content__item-1 {
144+
grid-row: 1 / 2;
145+
grid-column: 1 / 2; }
146+
.container .content .content__item-2 {
147+
grid-row: 2 / 3;
148+
grid-column: 1 / 2; }
149+
.container .content .content__item-3 {
150+
grid-row: 3 / 4;
151+
grid-column: 1 / 2; }
152+
.container .content .content__item-4 {
153+
grid-row: 4 / 5;
154+
grid-column: 1 / 2; } }
155+
156+
.header__navbar {
157+
background-color: #92ade8; }
158+
159+
.content__item-1 {
160+
background-color: #b5a1ac; }
161+
162+
.content__item-2 {
163+
background-color: #d5d5d5; }
164+
165+
.content__item-3 {
166+
background-color: #b7bfc9; }
167+
168+
.content__item-4 {
169+
background-color: #b5a1ac; }
170+
171+
.side-menu {
172+
background-color: #92ade8; }
173+
174+
.footer {
175+
background-color: #92ade8; }

‎img/favicon.png‎

5.19 KB
Loading

‎index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HTML Homework at Pentalog</title>
7+
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
8+
<link rel="stylesheet" href="css/style.css">
9+
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="header__logo-box">
14+
<span class="header__span">LOGO</span>
15+
</div>
16+
<nav class="header__navbar">
17+
<ul class="navbar__items">
18+
<li class="navbar__item"><a href="#" class="link">Home</a></li>
19+
<li class="navbar__item"><a href="#" class="link">About</a></li>
20+
<li class="navbar__item"><a href="#" class="link">Gallery</a></li>
21+
<li class="navbar__item"><a href="#" class="link">Log In</a></li>
22+
</ul>
23+
</nav>
24+
<nav class="side-menu">
25+
<span class="side-menu__title">Menu</span>
26+
<ul class="side-menu__items">
27+
<li class="side-menu__item"><a href="#" class="link">Articles</a></li>
28+
<li class="side-menu__item"><a href="#" class="link">News</a></li>
29+
<li class="side-menu__item"><a href="#" class="link">Blog</a></li>
30+
</ul>
31+
</nav>
32+
<div class="content">
33+
<div class="content__item content__item-1 u-center-text">CONTENT1</div>
34+
<div class="content__item content__item-2 u-center-text">CONTENT2</div>
35+
<div class="content__item content__item-3 u-center-text">CONTENT3</div>
36+
<div class="content__item content__item-4 u-center-text">CONTENT4</div>
37+
</div>
38+
<footer class="footer u-center-text">
39+
<p>HTML Homework at Pentalog</p>
40+
</footer>
41+
</div>
42+
</body>
43+
</html>

‎layout-homework.pdf‎

92 KB
Binary file not shown.

0 commit comments

Comments
 (0)