diff --git a/.DS_Store b/.DS_Store
index fdfd322e..036bd229 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/README.md b/README.md
index 6bf51df6..ea4d10d7 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,14 @@
-# HyeonJiPARK
\ No newline at end of file
+
+
+# HyeonjiPARK
+
μμ’μ’..
+
+### π» κ³Όμ
+
+| Week | κ³Όμ | βοΈ | λ§ν¬ |
+| ---- | -------- | -- |---- |
+| 1μ£Όμ°¨ | TodoList | βοΈ | |
+| 1μ£Όμ°¨ | Hyeonlog | βοΈ | |
+| 1μ£Όμ°¨ | μΉμ κ·Όμ± | | |
+
+
+```
+
+
+### 2. **μ΄μ©μ±(Operable)**
+
+> **μ¬μ©μκ° λͺ¨λ κΈ°λ₯μ λν΄ μ‘°μμ΄ κ°λ₯ν΄μΌνλ€.**
+
+- ν€λ³΄λλ‘ λͺ¨λ κΈ°λ₯μ μ¬μ©ν μ μλλ‘ ν΄μΌνλ€.
+- μ½κΈ° λ° μ½ν
μΈ λ₯Ό μ¬μ©νλ μ¬μ©μμκ² μΆ©λΆν μκ°μ μ 곡ν΄μΌνλ€.
+- λ°μμ μΌμΌν¬ μ μλ μ½ν
μΈ λ₯Ό λμμΈνμ§ μμμΌ νλ€.
+- μ¬μ©μκ° νμνκ³ , μ½ν
μΈ μ°Ύκ³ κ·Έλ€μ΄ μ΄λμ μμΉνκ³ μλμ§λ₯Ό μ μ λμμ£Όλ λ°©λ²μ μ 곡ν΄μΌνλ€.
+
+**ex) ν€λ³΄λλ₯Ό ν΅ν μ‘°μ**
+λͺ¨λ μ¬λμ΄ λ§μ°μ€λ₯Ό μ¬μ©ν μ μλ κ²μ μλλ€. λ°λΌμ μΉμ¬μ΄νΈμ λͺ¨λ κΈ°λ₯μ ν€λ³΄λλ§μΌλ‘ μ‘μΈμ€ν μ μμ΄μΌ νλ€. μλ₯Ό λ€μ΄, ν ν€λ μ¬μ©μκ° νμ΄μ§μμ μ ν κ°λ₯ν μμ μ¬μ΄λ₯Ό μ΄λν μ μκ² νκ³ , μν°/λ¦¬ν΄ ν€λ ν¬μ»€μ€κ° μλ μμλ₯Ό ν΄λ¦ν μ μμ΄μΌ νλ€.
+
+```jsx
+ν ν€λ₯Ό μ΄μ©ν μ μκ² ν¨
+ν ν€λ₯Ό μ΄μ©ν μ μκ² ν¨
+
+ν ν€μ μμλ₯Ό μ§μ
+ν ν€μ μμλ₯Ό μ§μ
+ν ν€μ μμλ₯Ό μ§μ
+```
+
+
+### 3. **μ΄ν΄μ±(Understandable)**
+
+> **λͺ¨λ μ¬μ©μμκ² μ½ν
μΈ λ μ΄ν΄λμ΄μΌ νλ€.**
+
+- ν
μ€νΈ μ½ν
μΈ λ₯Ό νλ
νκ³ μ΄ν΄ν μ μλλ‘ λ§λ€μ΄μΌ νλ€.
+- μΉνμ΄μ§μ νμ¬μ μ΄μ©μ μμΈ‘ κ°λ₯ν λ°©λ²μΌλ‘ μ μν΄μΌ νλ€.
+- μ¬μ©μμ μ€μλ₯Ό λ°©μ§νκ³ μμ ν μ μλλ‘ λμμΌ νλ€.
+
+**ex) νμ΄μ§ μΈμ΄ μ§μ **
+λ€κ΅μ΄λ₯Ό μ§μνλ κ²½μ°, ν
μ€νΈμ μΈμ΄ μ 보λ₯Ό μ€ν¬λ¦° 리λμκ² μ λ¬νκΈ° λλ¬Έμμ½ν
μΈ μ μ μ©λλ μΈμ΄λ₯Ό λ°λμ λͺ
μν΄μΌ νλ€.
+
+```jsx
+
+μ’ λ fancyν μΆμ μ΄κ³ μΆμΌμ κ°μ?
+```
+
+
+### 4. **κ²¬κ³ μ±(Robust)**
+
+> **λ―Έλμ κΈ°μ λ‘λ νμ¬μ μ½ν
μΈ λ₯Ό μ΄μ©ν μ μμ΄μΌ νλ€.**
+
+- μ½ν
μΈ λ 보쑰 κΈ°μ μ ν¬ν¨ν λκ³ λ€μν μ¬μ©μ μμ΄μ νΈμ μμ‘΄νμ¬ ν΄μλ μ μλλ‘ μΆ©λΆν λ΄κ΅¬μ±μ κ°μ ΈμΌ νλ€.
+
+
+------
+
+## π‘ μ κ·Όμ±μ μν κ°λ°μ νμν κΉ?
+
+μΉ μ κ·Όμ±μ 보μ₯νλ κ°λ°μ μν λ
Έλ ₯μ ν΅ν΄ κΈ°λν μ μλ ν¨κ³Όλ€μ λ€μκ³Ό κ°λ€.
+
+1. **`μ₯μ μΈ, κ³ λ Ήμ λ±μ ν¬ν¨ν μ¬μ©μμΈ΅ νλ`**
+
+ μ₯μ μΈ, κ³ λ Ήμ λ±κ³Ό κ°μ μ 보 μμΈ κ³μΈ΅μ΄ μνλ μ 보λ₯Ό μμ λ‘κ² μ κ·Όνκ³ μ΄μ©ν μ μκ² ν΄μ£Όλ©°, μ΄λ¬ν μ μ¬μ μΈ κ³μΈ΅μ μ¬μ©μ κ³μΈ΅μΌλ‘ λμ΄λ΄μ΄ μλ‘μ΄ κ³ κ°μΈ΅μ λ°κ΅΄νλ κΈ°νλ‘ νμ©ν μ μλ€.
+
+2. **`μ μ§λ³΄μμ μ©μ΄μ±`**
+
+ λΆνμν νκ·Έλ€μ μ¬μ©νμ§ μκ³ μ ν΄μ§ κ·κ²©μ λ§κ² μ½λ©νκΈ° λλ¬Έμ μ΄ν μ μ§λ³΄μκ° μλμ μΌλ‘ κ°νΈν΄μ§λ€. λ€λ₯Έμ΄λ€κ³Όμ νμ
μμλ μ’μ κ°λ
μ±μ μ 곡νλ€.
+
+3. **`μλ²μ λΆλ΄ κ°μ`**
+
+ μΉ νμ€μ λ°λΌ ν¨μ¨μ μΌλ‘ μ§μ¬μ§ μ½λλ μ½λμ μλ μ€κ³ λμμ μλ²μ λΆλ΄μ μ€μΈλ€. μ΄λ λ‘λ© μλλ ν₯μμν¨λ€.
+
+4. **`SEO(κ²μ μμ§ μ΅μ ν)μ μ 리`**
+
+ μΉ μ κ·Όμ±μ μ€μν λ§ν¬μ
μ SEOμ μ 리νλ€. μ맨ν±ν λ§ν¬μ
μ κ²μ ν¬λ‘€λ¬κ° 컨ν
μΈ λ₯Ό μ΄ν΄νλλ° λμμ μ£ΌκΈ° λλ¬Έμ΄λ€. κ²μ μμ§μ ν¬λ‘€λ¬λ μΉμ¬μ΄νΈ μμκ°μ κ΄κ³μ μ€μλλ₯Ό νμ
νμ¬ `heading`κ³Ό κ°μ νκ·Έλ‘ κ°μΈμ§ μ€μν ν€μλλ₯Ό κ²μ μΈλ±μ€μ λ£μ΄ κ²μ κ²°κ³Όλ₯Ό μ΅μ ννλ€.
+
+
+μλ μμ΄λ μΉ (World Wide Web)μ μ°½μν ν λ²λμ€ λ¦¬λ μΉμ΄λ `'μ₯μ μ ꡬμ μμ΄ λͺ¨λ μ¬λλ€μ΄ μμ½κ² μ 보λ₯Ό 곡μ ν μ μλ 곡κ°'`μ΄λΌκ³ μ μνμμΌλ©°, μΉ μ½ν
μΈ λ₯Ό μ μν λμλ μ₯μ μ ꡬμ λ¨μ΄ μμ΄ λꡬλ μ κ·Όν μ μλλ‘ μ μνμ¬μΌ νλ€κ³ νμλ€.
+μΉ κ°λ°μ μμνλ©° μ΄λ¬ν λ³Έμ§μ μμ§ μκΈ° μν΄μ, μμΌλ‘λ λ€μν λ°©μμ ν΅ν μ κ·Όμ±μ μ²μλΆλ¬ κ³ λ €νμ¬ κ°λ°νλ μ΅κ΄μ λ€μ¬μΌκ² λ€κ³ μκ°νλ€.
+
+
+------
+
+### μ°Έκ³ μλ£
+
+- https://www.w3.org/WAI/fundamentals/accessibility-intro/
+- https://jae04099.tistory.com/entry/HTML-CSS-μΉ-μ κ·Όμ±-μΉ-νμ€-μΉ-μ κ·Όμ±μ-μν-κ·μΉλ€
+- https://maxkim-j.github.io/posts/web-accessiblity-virtuous-cycle
+
+
diff --git a/week1/seminar/.DS_Store b/week1/seminar/.DS_Store
new file mode 100644
index 00000000..5008ddfc
Binary files /dev/null and b/week1/seminar/.DS_Store differ
diff --git a/week1/seminar/index.html b/week1/seminar/index.html
new file mode 100644
index 00000000..e953ece4
--- /dev/null
+++ b/week1/seminar/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week1/seminar/style.css b/week1/seminar/style.css
new file mode 100644
index 00000000..60af003c
--- /dev/null
+++ b/week1/seminar/style.css
@@ -0,0 +1,8 @@
+@import url(./subStyle.css);
+body{
+ /* color: blue; */
+}
+
+ul > li{
+ color: blue;
+}
diff --git a/week1/seminar/subStyle.css b/week1/seminar/subStyle.css
new file mode 100644
index 00000000..da46bc93
--- /dev/null
+++ b/week1/seminar/subStyle.css
@@ -0,0 +1,3 @@
+body{
+ color: red;
+}
\ No newline at end of file
diff --git a/week1/todoList/index.html b/week1/todoList/index.html
new file mode 100644
index 00000000..814279f1
--- /dev/null
+++ b/week1/todoList/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+ TODOLIST
+
+
+
+
+
+
+ TOMORROW
+
+
+ - ν¬λ리μ€νΈ κ³Όμ νκΈ°
+
+
+ - 벨λ‘κ·Έ ν΄λ‘ μ½λ© κ³Όμ νκΈ°
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week1/todoList/logo.png b/week1/todoList/logo.png
new file mode 100644
index 00000000..e7abfeca
Binary files /dev/null and b/week1/todoList/logo.png differ
diff --git a/week1/todoList/reset.css b/week1/todoList/reset.css
new file mode 100644
index 00000000..0fc4482d
--- /dev/null
+++ b/week1/todoList/reset.css
@@ -0,0 +1,130 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol,
+ul {
+ list-style: none;
+}
+
+blockquote,
+q {
+ quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/week1/todoList/style.css b/week1/todoList/style.css
new file mode 100644
index 00000000..172c11f2
--- /dev/null
+++ b/week1/todoList/style.css
@@ -0,0 +1,181 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Inter", sans-serif;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+.header {
+ position: relative;
+}
+
+/* .header-title {
+ height: 50px;
+
+ margin: 15px;
+
+ display: flex;
+ justify-content: left;
+ align-items: center;
+
+ font-size: 2rem;
+ font-weight: 900;
+} */
+
+.header-logo {
+ width: 150px;
+
+ margin: 20px;
+
+ display: flex;
+ justify-content: left;
+ align-items: center;
+}
+
+.header__nav {
+ height: 50px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+}
+
+.header__nav-button {
+ border: 0;
+
+ padding: 10px;
+
+ font-size: 1rem;
+ font-weight: 600;
+
+ color: #B6BEC9;
+ background-color: white;
+}
+
+.header__nav-button:hover {
+ color: black;
+ text-decoration : underline;
+
+}
+
+/* ---------------------------------- */
+
+.box {
+ height: 500px;
+ margin: 20px;
+ padding: 15px;
+
+ display: flex;
+ flex-direction: column;
+ /* justify-content: space-around; */
+ flex-wrap: wrap;
+
+ position: relative;
+
+ /* box-shadow : x y blur spread color */
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
+}
+
+.box .todolist-line {
+ border: 0;
+ height: 1px;
+
+ margin: 15px 0px;
+
+ background-color : #E3E6EA;
+}
+
+.box .todolist__footer {
+ width: 90%;
+ height: 50px;
+
+ position: absolute;
+ bottom: 10px;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+/* ---------------------------------- */
+
+.todolist {
+ display: flex;
+}
+
+.todolist-title {
+ font-weight: 900;
+}
+
+.todolist__today {
+ display: flex;
+ flex: 1;
+}
+
+.todolist__tomorrow {
+ display: flex;
+ flex: 1;
+}
+
+.todolist__lists {
+}
+
+.todolist__item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 5px;
+ margin: 5px;
+}
+
+.todolist__item:not(:last-child) {
+ border-bottom: 1px solid #efefef;
+}
+
+
+/* ---------------------------------- */
+
+.todolist__input {
+ height: 30px;
+
+ display: block;
+ flex-grow: 1;
+
+ border: 1px solid #efefef;
+}
+
+.todolist__add-button {
+ width: 30px;
+ height: 30px;
+
+ border: 0;
+
+ font-size: 1rem;
+ font-weight: 600;
+
+ color: #B6BEC9;
+ background-color: white;
+
+}
+
+.todolist__delete-button {
+ width: 30px;
+ height: 30px;
+
+ border: 0;
+
+ font-size: 1rem;
+ font-weight: 600;
+
+ color: #B6BEC9;
+ background-color: white;
+
+}
\ No newline at end of file
diff --git a/week1/velog/img/profile.jpeg b/week1/velog/img/profile.jpeg
new file mode 100644
index 00000000..732a96db
Binary files /dev/null and b/week1/velog/img/profile.jpeg differ
diff --git a/week1/velog/img/thumb.png b/week1/velog/img/thumb.png
new file mode 100644
index 00000000..d40c7e12
Binary files /dev/null and b/week1/velog/img/thumb.png differ
diff --git a/week1/velog/index.html b/week1/velog/index.html
new file mode 100644
index 00000000..8e3fa77f
--- /dev/null
+++ b/week1/velog/index.html
@@ -0,0 +1,210 @@
+
+
+
+
+
+
+
+
+
+
+ hyeonlog
+
+
+
+
+
+
+
+
+ 
+ μ λͺ©μ λͺ©μ λͺ©
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+
+ λ΄μ©μ¬λ½λ΄μ
+ λ΄μ©μ¬λ½λ΄μ
+
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+
+ λ΄μ©μ¬λ½λ΄μ
+ λ΄μ©μ¬λ½λ΄μ
+ λ΄μ©μ¬λ½λ΄μ
+
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©μ¬μ§μμ
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+ μ λͺ©μ λͺ©μ λͺ©
+ λ΄μ©μ¬λ½λ΄μ
+ 2022λ
9μ 29μΌ Β· 10κ°μ λκΈ
+
+
+
+
+
\ No newline at end of file
diff --git a/week1/velog/reset.css b/week1/velog/reset.css
new file mode 100644
index 00000000..0fc4482d
--- /dev/null
+++ b/week1/velog/reset.css
@@ -0,0 +1,130 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol,
+ul {
+ list-style: none;
+}
+
+blockquote,
+q {
+ quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/week1/velog/style.css b/week1/velog/style.css
new file mode 100644
index 00000000..f8db4f21
--- /dev/null
+++ b/week1/velog/style.css
@@ -0,0 +1,344 @@
+* {
+ position: relative;
+ box-sizing: border-box;
+ background-color: #f8f9fa;
+}
+
+body {
+ max-width: 1024px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+}
+
+/* ----------------- header ----------------- */
+
+.header {
+ height: 64px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header > h1 {
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+.header > h1:hover {
+ cursor: pointer;
+}
+.header__setting {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header__lightmode,
+.header__search {
+ padding: 10px;
+ border-radius: 25px;
+}
+
+.header__lightmode:hover,
+.header__search:hover {
+ background-color: #E3E6EA;
+ cursor: pointer;
+}
+
+.header__write {
+ padding: 5px 15px;
+ margin-left: 10px;
+
+ border: 0.5px solid black;
+ border-radius: 25px;
+
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.header__write:hover {
+ color: white;
+ background-color: black;
+ cursor: pointer;
+}
+
+.header__profile {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ padding-left: 20px;
+}
+
+.header__profile:hover {
+ cursor: pointer;
+}
+
+.header__image {
+ width: 40px;
+ height: 40px;
+
+ border-radius: 25px;
+}
+
+.header__dropdown {
+ color: gray;
+}
+
+.header__dropdown:hover {
+ color: black;
+}
+
+/* ----------------- nav ----------------- */
+
+.nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ margin-top: 20px;
+}
+
+.nav__wrapper {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.nav__list {
+ display: flex;
+}
+
+.nav__list li {
+ display: flex;
+ place-items: center;
+ padding: 10px 20px;
+ gap: 5px;
+ font-size: 1.2rem;
+}
+
+.nav__list li:hover {
+ cursor: pointer;
+}
+
+.nav__trending {
+ border-bottom: 2px solid;
+}
+
+.nav__recent {
+ color: gray;
+}
+
+.nav__dropdown {
+ height: 30px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ padding: 5px 10px;
+
+ background-color: white;
+ border: none;
+ border-radius: 5px;
+}
+
+.nav__dropdown > span {
+ background-color: white;
+
+ font-size: 0.9rem;
+ font-weight: 400;
+}
+
+.nav__dropdown:hover {
+ cursor: pointer;
+}
+
+.nav__more {
+ padding-right: 5px;
+ color: gray;
+}
+
+.nav__more:hover {
+ cursor: pointer;
+}
+
+/* ----------------- card section ----------------- */
+
+.section {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ margin: 20px auto;
+}
+
+.card {
+ width: 25%;
+ margin: 15px;
+
+ display: flex;
+ flex-direction: column;
+
+ background-color: white;
+ text-decoration: none;
+ color: #444;
+ box-shadow: 0 0 10px 1px rgba(0,0,0,0.05);
+
+ position: relative;
+ top: 0;
+ transition: all .25s ease-in;
+
+}
+
+.card:hover {
+ top: -10px;
+ box-shadow: 0 0 15px 3px rgba(0,0,0,0.1);
+}
+
+.card__thumbnail {
+ width: 100%;
+ height: 45%;
+ background-color: white;
+}
+
+.card__title {
+ padding: 15px;
+ font-weight: 700;
+ background-color: white;
+}
+
+.card__description {
+ padding: 0 15px;
+ color: gray;
+ font-size: 0.9em;
+ font-weight: 400;
+ line-height: 1.3rem;
+ background-color: white;
+ margin-bottom: auto;
+
+}
+
+.card__info {
+ padding: 15px;
+ background-color: white;
+ font-size: 0.8rem;
+ color: darkgray;
+}
+
+.card__footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 15px;
+
+ border-top: 1px solid #E3E6EA;
+ font-weight: 700;
+ background-color: white;
+}
+
+.card__user {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ background-color: white;
+ font-size: 0.8rem;
+}
+
+.card__user > span{
+ font-weight: 200;
+ background-color: white;
+}
+
+.user__image {
+ width: 25px;
+ height: 25px;
+
+ border-radius: 25px;
+}
+.user__name {
+ background-color: white;
+}
+
+.card__like {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ background-color: white;
+}
+
+.card__like > span {
+ font-size: 0.8rem;
+ font-weight: 400;
+ background-color: white;
+}
+
+
+/* ---------------------------------- */
+
+@font-face {
+ font-family: 'Material Icons';
+ font-style: normal;
+ font-weight: 400;
+ src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
+ src: local('Material Icons'),
+ local('MaterialIcons-Regular'),
+ url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
+ url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
+ url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px; /* Preferred icon size */
+ display: inline-block;
+ line-height: 1;
+ text-transform: none;
+ letter-spacing: normal;
+ word-wrap: normal;
+ white-space: nowrap;
+ direction: ltr;
+
+ /* Support for all WebKit browsers. */
+ -webkit-font-smoothing: antialiased;
+ /* Support for Safari and Chrome. */
+ text-rendering: optimizeLegibility;
+
+ /* Support for Firefox. */
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Support for IE. */
+ font-feature-settings: 'liga';
+}
+
+@media (min-width:1445px){
+ body{
+ max-width: 1444px;
+ }
+
+ .card{
+ width:22%;
+ }
+}
+
+@media (min-width: 1025px) and (max-width: 1444px) {
+ .card{
+ width:30%;
+ }
+}
+
+@media (min-width: 660px) and (max-width: 1024px) {
+ .card{
+ width:45%;
+ }
+}
+
+@media (max-width: 660px){
+ .card{
+ width:100%;
+ }
+}
+
+ 
+
+