P5CHI-Web-Academy · IvanCeban · May 8, 2019 · Apr 19, 2019 · Apr 19, 2019 · Apr 19, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# Homework-VueJS-HTML
+# Homework-VueJS-HTML
+
+- Create a layout based on this mockup.
+
+- Dimensions, fonts and colors are up to you.
+- For text use simple 'span' (no links or buttons are required)
+- Use both Flex and Grid in appropriate places.
+- 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.
+- Any animations, transitions and other creativity are welcome (but not required)
+- Using preprocessors is a big plus (but not required)
+
+### =======
+
+- Layout was created using SASS.
+- Responsive, and has 2 breakpoints
+- Hover efects on menu items
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,175 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; }
+
+html {
+  font-size: 62.5%; }
+
+body {
+  font-family: "Lato", sans-serif;
+  background-color: #eee; }
+
+.side-menu__title {
+  font-weight: 400; }
+
+.container {
+  font-size: 1.6rem;
+  color: #fff; }
+
+.u-center-text {
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.header__navbar {
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center; }
+  .header__navbar .navbar__items {
+    display: flex;
+    flex: 1;
+    list-style: none; }
+    .header__navbar .navbar__items .navbar__item {
+      text-transform: uppercase; }
+      .header__navbar .navbar__items .navbar__item:not(:last-child) {
+        margin-right: 2rem; }
+      .header__navbar .navbar__items .navbar__item:last-child {
+        margin-left: auto; }
+      .header__navbar .navbar__items .navbar__item a {
+        text-decoration: none; }
+
+.header__logo-box {
+  background-image: linear-gradient(to right bottom, #92ade8, #eeeeee);
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.side-menu {
+  padding: 1.5rem 0;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  flex-direction: column; }
+  .side-menu .side-menu__items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: auto;
+    list-style: none; }
+    .side-menu .side-menu__items .side-menu__item:not(:first-child) {
+      margin-top: 2.5rem; }
+    .side-menu .side-menu__items .side-menu__item a {
+      text-decoration: none; }
+
+.footer {
+  text-align: center; }
+
+.link {
+  color: #fff; }
+  .link:hover {
+    color: #656868; }
+  .link:active {
+    color: rgba(101, 104, 104, 0.7); }
+
+.container {
+  display: grid;
+  height: 100vh;
+  padding: 1rem;
+  grid-gap: 0.5rem;
+  grid-template-columns: 16rem auto;
+  grid-template-rows: 5rem auto 5rem; }
+
+.header__logo-box {
+  grid-column: 1 / 2; }
+
+.header__navbar {
+  grid-column: 2 / 3; }
+
+.content {
+  grid-column: 2 / 3;
+  padding: 2rem;
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: 2.8fr 4fr 3.2fr;
+  grid-template-rows: auto auto; }
+  .content .content__item-1 {
+    grid-column: 1 / 2; }
+  .content .content__item-2 {
+    grid-column: 2 / 3; }
+  .content .content__item-3 {
+    grid-column: 1 / 3; }
+  .content .content__item-4 {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3; }
+
+.footer {
+  grid-column: 1 / 3; }
+
+@media only screen and (max-width: 768px) {
+  .container {
+    grid-template-columns: 5rem auto;
+    grid-template-rows: 5rem 5rem auto 5rem; }
+    .container .side-menu {
+      grid-column: 1 / 3;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 0.5rem 1rem; }
+      .container .side-menu .side-menu__title {
+        display: none; }
+      .container .side-menu .side-menu__items {
+        padding: 0;
+        flex-direction: row;
+        margin-top: 0; }
+        .container .side-menu .side-menu__items .side-menu__item {
+          margin: 0; }
+          .container .side-menu .side-menu__items .side-menu__item:not(:last-child) {
+            margin-right: 2rem; }
+    .container .content {
+      grid-column: 1 / 3;
+      grid-row: 3 / 4;
+      padding: 1rem; }
+    .container .footer {
+      grid-row: 4 / 5; } }
+
+@media only screen and (max-width: 575px) {
+  .container .content {
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+    padding: 0.1rem; }
+    .container .content .content__item-1 {
+      grid-row: 1 / 2;
+      grid-column: 1 / 2; }
+    .container .content .content__item-2 {
+      grid-row: 2 / 3;
+      grid-column: 1 / 2; }
+    .container .content .content__item-3 {
+      grid-row: 3 / 4;
+      grid-column: 1 / 2; }
+    .container .content .content__item-4 {
+      grid-row: 4 / 5;
+      grid-column: 1 / 2; } }
+
+.header__navbar {
+  background-color: #92ade8; }
+
+.content__item-1 {
+  background-color: #b5a1ac; }
+
+.content__item-2 {
+  background-color: #d5d5d5; }
+
+.content__item-3 {
+  background-color: #b7bfc9; }
+
+.content__item-4 {
+  background-color: #b5a1ac; }
+
+.side-menu {
+  background-color: #92ade8; }
+
+.footer {
+  background-color: #92ade8; }
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>HTML Homework at Pentalog</title>
+		<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+		<link rel="stylesheet" href="css/style.css">
+		<link rel="shortcut icon" type="image/png" href="img/favicon.png">
+	</head>
+	<body>
+		<div class="container">
+				<div class="header__logo-box">
+					<span class="header__span">LOGO</span>
+				</div>
+				<nav class="header__navbar">
+					<ul class="navbar__items">
+						<li class="navbar__item"><a href="#" class="link">Home</a></li>
+			            <li class="navbar__item"><a href="#" class="link">About</a></li>
+			            <li class="navbar__item"><a href="#" class="link">Gallery</a></li>
+			            <li class="navbar__item"><a href="#" class="link">Log In</a></li>
+					</ul>
+				</nav>
+				<nav class="side-menu">
+	        		<span class="side-menu__title">Menu</span>
+		        	<ul class="side-menu__items">
+			          <li class="side-menu__item"><a href="#" class="link">Articles</a></li>
+			          <li class="side-menu__item"><a href="#" class="link">News</a></li>
+			          <li class="side-menu__item"><a href="#" class="link">Blog</a></li>
+		        	</ul>
+		      	</nav>
+		      	<div class="content">
+		      		<div class="content__item content__item-1 u-center-text">CONTENT1</div>
+		      		<div class="content__item content__item-2 u-center-text">CONTENT2</div>
+		      		<div class="content__item content__item-3 u-center-text">CONTENT3</div>
+		      		<div class="content__item content__item-4 u-center-text">CONTENT4</div>
+		      	</div>
+			<footer class="footer u-center-text">
+				<p>HTML Homework at Pentalog</p>
+			</footer>
+		</div>
+	</body>
+</html>
diff --git a/layout-homework.pdf b/layout-homework.pdf