From 0a70ed606c2e522855885621c8dcee492a5ab82f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Amirreza=20Heydari=20=7C=20=D8=A7=D9=85=DB=8C=D8=B1=D8=B1?=
 =?UTF-8?q?=D8=B6=D8=A7=20=D8=AD=DB=8C=D8=AF=D8=B1=DB=8C?=
 <amirreza09395574353@gmail.com>
Date: Wed, 8 Feb 2023 16:27:28 +0330
Subject: [PATCH] update Sass

---
 1_blog_cards/style.css   |   3 +
 1_blog_cards/style.scss  | 108 +++++++++++++++++++++++
 2_login/style.scss       | 137 +++++++++++++++++++++++++++++
 3_ads_manager/style.scss | 182 +++++++++++++++++++++++++++++++++++++++
 readme.md                |   4 +
 5 files changed, 434 insertions(+)
 create mode 100644 1_blog_cards/style.scss
 create mode 100644 2_login/style.scss
 create mode 100644 3_ads_manager/style.scss

diff --git a/1_blog_cards/style.css b/1_blog_cards/style.css
index 3c8e680..4be952d 100644
--- a/1_blog_cards/style.css
+++ b/1_blog_cards/style.css
@@ -32,6 +32,9 @@ body {
 	overflow: hidden;
 	width: 300px;
 }
+.card:hover{
+	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
+}
 
 .card-header img {
 	object-fit: cover;
diff --git a/1_blog_cards/style.scss b/1_blog_cards/style.scss
new file mode 100644
index 0000000..4be952d
--- /dev/null
+++ b/1_blog_cards/style.scss
@@ -0,0 +1,108 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap');
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: #f7f8fc;
+	font-family: 'Open Sans', sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	margin: 0;
+}
+
+.container {
+	/* CHANGE TO GRID */
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	justify-items: center;
+	grid-gap: 20px;
+	width: 940px;
+	max-width: 100%;
+	margin: auto;
+}
+
+.card {
+	background-color: #fff;
+	border-radius: 10px;
+	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+	width: 300px;
+}
+.card:hover{
+	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card-header img {
+	object-fit: cover;
+	height: 200px;
+	width: 100%;
+}
+
+.card-body {
+	display: flex;
+	flex-direction: column;
+	align-items: start;
+	padding: 20px;
+	min-height: 250px;
+}
+
+.card-body h4 {
+	margin: 10px 0;
+}
+
+.card-body p {
+	font-size: 13px;
+	margin: 0 0 40px;
+}
+
+.tag {
+	background-color: #fff;
+	border-radius: 50px;
+	font-size: 12px;
+	color: #fff;
+	margin: 0;
+	padding: 2px 10px;
+	text-transform: uppercase;
+}
+
+.tag-teal {
+	background-color: #92d4e4;
+}
+
+.tag-purple {
+	background-color: #3d1d94;
+}
+
+.tag-pink {
+	background-color: #c62bcb;
+}
+
+.user {
+	display: flex;
+	margin-top: auto;
+}
+
+.user img {
+	border-radius: 50%;
+	margin-right: 10px;
+	height: 40px;
+	width: 40px;
+}
+
+.user-info h5 {
+	margin: 0;
+}
+
+.user-info small {
+	color: #888785;
+}
+
+@media (max-width: 940px) {
+	.container {
+		grid-template-columns: 1fr;
+	}
+}
diff --git a/2_login/style.scss b/2_login/style.scss
new file mode 100644
index 0000000..54b67bb
--- /dev/null
+++ b/2_login/style.scss
@@ -0,0 +1,137 @@
+$color_1: #141c2c;
+$color_2: #2762eb;
+$color_3: #7a7e8c;
+$color_4: #fff;
+$font-family_1: 'Open Sans', sans-serif;
+$font-family_2: inherit;
+$background-color_1: #f7f8fc;
+$background-color_2: #fff;
+$background-color_3: transparent;
+$background-color_4: #141c2c;
+$border-color_1: #ecf2ff;
+
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap";
+* {
+	box-sizing: border-box;
+}
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	background-color: $background-color_1;
+	color: $color_1;
+	font-family: $font-family_1;
+	margin: 0;
+}
+a {
+	color: $color_2;
+	text-decoration: none;
+}
+.container {
+	background-color: $background-color_2;
+	border-radius: 3px;
+	border: 20px solid #dce7ff;
+	width: 1000px;
+	box-shadow: 0 4px 5px rgba(0,0,0,0.1);
+	display: flex;
+}
+form {
+	border-right: 1px solid #ecf2ff;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 40px;
+	flex: 1;
+}
+.form-control {
+	margin: 10px 0;
+	width: 100%;
+}
+label {
+	display: inline-block;
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+input {
+	&:not([type="checkbox"]) {
+		background-color: $background-color_3;
+		border: 2px solid #ecf2ff;
+		border-radius: 3px;
+		font-family: $font-family_2;
+		font-size: 14px;
+		padding: 10px;
+		width: 100%;
+	}
+}
+.checkbox-container {
+	display: flex;
+	justify-content: space-between;
+	font-size: 14px;
+	margin-bottom: 15px;
+	width: 100%;
+	a {
+		margin-left: auto;
+	}
+	label {
+		color: $color_3;
+		font-weight: normal;
+	}
+}
+.btn {
+	cursor: pointer;
+	background-color: $background-color_4;
+	border: 2px solid #141c2c;
+	border-radius: 3px;
+	color: $color_4;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: $font-family_2;
+	font-weight: bold;
+	font-size: 14px;
+	padding: 10px;
+	margin: 20px 0;
+	width: 100%;
+	img {
+		margin-right: 5px;
+		width: 20px;
+	}
+}
+.btn-ghost {
+	background-color: $background-color_3;
+	border-color: $border-color_1;
+	color: $color_1;
+}
+.features {
+	flex: 1.5;
+	padding: 40px;
+}
+.feature {
+	position: relative;
+	padding-left: 30px;
+	margin: 40px 0;
+	i {
+		color: $color_2;
+		position: absolute;
+		top: 5px;
+		left: 0;
+	}
+	h3 {
+		margin: 0;
+	}
+	p {
+		font-size: 14px;
+		line-height: 1.8;
+		margin: 5px 0;
+	}
+}
+@media (max-width: 768px) {
+	.container {
+		flex-direction: column;
+	}
+	form {
+		border-right: 0;
+	}
+}
diff --git a/3_ads_manager/style.scss b/3_ads_manager/style.scss
new file mode 100644
index 0000000..a897d64
--- /dev/null
+++ b/3_ads_manager/style.scss
@@ -0,0 +1,182 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #1c223b;
+  color: #fff;
+  font-family: 'Source Sans Pro', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.container {
+  background-color: #273349;
+  border-radius: 10px;
+  box-shadow: 0 5px 10px rgba(12, 16, 31, 0.4);
+  padding: 100px;
+  margin: auto;
+  width: 1000px;
+}
+
+.user {
+  margin-left: 25px;
+  margin-bottom: 20px;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.user i {
+  background-color: #fff;
+  color: #000;
+  font-size: inherit;
+  padding: 10px;
+  border-radius: 50%;
+}
+
+.search-area {
+  padding: 20px 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.search-area .search form input {
+  background-color: transparent;
+  border-left: none;
+  border-color: #1d2545;
+  padding: 10px;
+  font-size: 17px;
+  color: #e2e2e2;
+  float: right;
+  width: 80%;
+}
+
+.search-area .search form button {
+  background-color: transparent;
+  border-right: none;
+  border-color: #1d2545;
+  float: right;
+  width: 20%;
+  padding: 10px;
+  color: #e2e2e2;
+  font-size: 17px;
+  cursor: pointer;
+}
+
+.search-area .filter button {
+  background-color: transparent;
+  color: #e2e2e2;
+  padding: 10px 20px;
+  border-color: #1d2545;
+  font-size: 17px;
+  cursor: pointer;
+}
+
+table {
+  color: #e2e2e2;
+  padding: 10px;
+  width: 100%;
+}
+
+table th,
+table td {
+  padding: 15px;
+  text-align: left;
+}
+
+table tbody tr {
+  background-color: #1c223b;
+}
+
+table tbody tr:hover {
+  background-color: #151b31;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+table tbody tr td:first-of-type {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+table tbody tr td:last-of-type {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  text-align: center;
+}
+
+table tbody tr.priority-200 td:first-of-type {
+  border-left: 5px solid #9c7c64;
+}
+
+table tbody tr.priority-300 td:first-of-type {
+  border-left: 5px solid #5c8cdc;
+}
+
+table tbody tr.priority-600 td:first-of-type {
+  border-left: 5px solid #40c587;
+}
+
+table tbody tr td .fa-circle {
+  transform: scale(0.5);
+}
+
+table tbody tr.priority-200 td .fa-circle {
+  color: #9c7c64;
+}
+
+table tbody tr.priority-300 td .fa-circle {
+  color: #5c8cdc;
+}
+
+table tbody tr.priority-600 td .fa-circle {
+  color: #40c587;
+}
+
+.delete {
+  cursor: pointer;
+  background-color: #242c4c;
+  border: 0;
+  border-radius: 2px;
+  color: #909090;
+  font-size: 16px;
+  padding: 5px 10px;
+  opacity: 0;
+}
+
+table tbody tr:hover .delete {
+  opacity: 1;
+}
+
+.add-btn {
+  cursor: pointer;
+  float: right;
+  padding: 15px;
+  font-size: 17px;
+  margin-top: 15px;
+  margin-right: 10px;
+  background-color: #861657;
+  background-image: linear-gradient(326deg, #861657 0%, #ffa69e 74%);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 20px;
+  }
+
+  table tbody tr .delete {
+    opacity: 1;
+  }
+
+  table th:nth-of-type(3),
+  table td:nth-of-type(3) {
+    display: none;
+  }
+}
diff --git a/readme.md b/readme.md
index 0839da7..8cdae06 100644
--- a/readme.md
+++ b/readme.md
@@ -9,3 +9,7 @@ I will be adding 3 more per month and creating a video for them at [Traversy Med
 1. [Blog Cards](https://uidesigndaily.com/posts/sketch-blog-cards-post-article-thumbnail-day-997)
 2. [Login](https://uidesigndaily.com/posts/sketch-login-log-in-authentication-features-day-1022)
 3. [Ads Manager](https://uidesigndaily.com/posts/sketch-ads-manager-table-list-day-1049)
+
+### log
+
+- add Sass File
\ No newline at end of file