-
-
-
- MrBeast
-
-
- 90.6M subscribers
-
-
+
...
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1a.Click.html b/4-Exercises/Lesson-1/1a.Click.html
new file mode 100644
index 0000000..5e6027a
--- /dev/null
+++ b/4-Exercises/Lesson-1/1a.Click.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
Button
+
+
+
Click
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1b.buttons.html b/4-Exercises/Lesson-1/1b.buttons.html
new file mode 100644
index 0000000..e65bcfc
--- /dev/null
+++ b/4-Exercises/Lesson-1/1b.buttons.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
Buttons
+
+
+
Elyas
+
Beans
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1c.Hello,world.html b/4-Exercises/Lesson-1/1c.Hello,world.html
new file mode 100644
index 0000000..f07400b
--- /dev/null
+++ b/4-Exercises/Lesson-1/1c.Hello,world.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
Paragraph
+
+
+
Hello, World!
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1d.p-and-p.html b/4-Exercises/Lesson-1/1d.p-and-p.html
new file mode 100644
index 0000000..bd5ec78
--- /dev/null
+++ b/4-Exercises/Lesson-1/1d.p-and-p.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
Paragraphs
+
+
+
Hello, World!
+
Today, I did some amazing things
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1e.googlelink.html b/4-Exercises/Lesson-1/1e.googlelink.html
new file mode 100644
index 0000000..4c154e6
--- /dev/null
+++ b/4-Exercises/Lesson-1/1e.googlelink.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
Google
+
+
+
Search with Google
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1g.backtoamazan.html b/4-Exercises/Lesson-1/1g.backtoamazan.html
new file mode 100644
index 0000000..5b6a908
--- /dev/null
+++ b/4-Exercises/Lesson-1/1g.backtoamazan.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
Amazone
+
+
+
Back to Amazon
+
Nick Black Running Shoes
+
$39-in stock
+
Free delivery tomorrow
+
Add to cart Buy now
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-10/Twitter Cards/index.html b/4-Exercises/Lesson-10/Twitter Cards/index.html
new file mode 100644
index 0000000..c8b47a3
--- /dev/null
+++ b/4-Exercises/Lesson-10/Twitter Cards/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
Cards
+
+
+
+
+
Oliver
+
+
+
2 mutual friends
+
+
Add Friend
+
+
+
+
+
Mimi
+
+
+
3 mutual friends
+
+
Add Friend
+
+
+
+
Rex
+
+
+
4 mutual friends
+
+
Add Friend
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-10/Twitter Cards/style.css b/4-Exercises/Lesson-10/Twitter Cards/style.css
new file mode 100644
index 0000000..ab35f76
--- /dev/null
+++ b/4-Exercises/Lesson-10/Twitter Cards/style.css
@@ -0,0 +1,68 @@
+.contianer {
+ display: inline-block;
+ width: 200px;
+ height: 400px;
+ margin: 10px;
+ border-radius: 10px;
+ box-shadow: 1px 1px 20px gray;
+ transition: width 1s;
+}
+.contianer:hover {
+ width: 210px;
+}
+img {
+ width: 200px;
+ height: 200px;
+ object-fit: cover;
+ transition: width 1s;
+}
+img:hover {
+ width: 210px;
+ cursor: pointer;
+}
+
+h3 {
+ font-weight: 900;
+ margin: 8px 0 0 10px;
+ font-size: 28px;
+}
+div.channel {
+ display: flex;
+ flex-direction: row;
+ margin-top: 10px;
+ vertical-align: middle;
+ margin-left: 8px;
+
+}
+.channel-picture {
+ height: 40px;
+ width: 40px;
+ border-radius: 50px;
+ vertical-align: bottom;
+}
+.channel-picture:hover {
+ width: 40px;
+}
+p {
+ margin: 2px 0 0 10px;
+ font-size: 16px;
+ color: rgb(53, 52, 52);
+ font-family: tahoma;
+ vertical-align: bottom;
+}
+button {
+ margin: 20px 0 2px 10px;
+ padding: 10px 20px;
+ border-radius: 5px;
+ border: none;
+ color: white;
+ background: rgb(31, 31, 219);
+ cursor: pointer;
+ font-size: 22px;
+ font-weight: 100;
+ transition: background 1s, padding 1s;
+}
+button:hover {
+ background: green;
+ padding: 15px 20px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/1/index.html b/4-Exercises/Lesson-11/Grid/1/index.html
new file mode 100644
index 0000000..e7f5711
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/1/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
Grid
+
+
+
+ 200px
+ 75px
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/1/style.css b/4-Exercises/Lesson-11/Grid/1/style.css
new file mode 100644
index 0000000..86c65a2
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/1/style.css
@@ -0,0 +1,10 @@
+.container {
+ display: grid;
+ grid-template-columns: 200px 75px;
+}
+.px {
+ background: blue;
+}
+.pxs {
+ background: pink;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/2/index.html b/4-Exercises/Lesson-11/Grid/2/index.html
new file mode 100644
index 0000000..e04d56d
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/2/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
Grid
+
+
+
+ col1
+ col2
+ col3
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/2/style.css b/4-Exercises/Lesson-11/Grid/2/style.css
new file mode 100644
index 0000000..51ba8d3
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/2/style.css
@@ -0,0 +1,10 @@
+div.container {
+ display: grid;
+ grid-template-columns: 50px 1fr 75px;
+}
+.col {
+ background: blue;
+}
+.cols {
+ background: pink;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/3/index.html b/4-Exercises/Lesson-11/Grid/3/index.html
new file mode 100644
index 0000000..af00ef4
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/3/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
Grid
+
+
+
+ col1
+ col2
+ col3
+ col4
+ col1
+ col2
+ col3
+ col4
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/3/style.css b/4-Exercises/Lesson-11/Grid/3/style.css
new file mode 100644
index 0000000..463f2d7
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/3/style.css
@@ -0,0 +1,9 @@
+div {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ column-gap: 20px;
+ row-gap: 10px;
+}
+span {
+ background: pink
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Twitter Cards/index.html b/4-Exercises/Lesson-11/Twitter Cards/index.html
new file mode 100644
index 0000000..090f763
--- /dev/null
+++ b/4-Exercises/Lesson-11/Twitter Cards/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
Cards
+
+
+
+
+
Oliver
+
+
+
2 mutual friends
+
+
Add Friend
+
+
+
+
+
Mimi
+
+
+
3 mutual friends
+
+
Add Friend
+
+
+
+
Rex
+
+
+
4 mutual friends
+
+
Add Friend
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Twitter Cards/style.css b/4-Exercises/Lesson-11/Twitter Cards/style.css
new file mode 100644
index 0000000..8d05d09
--- /dev/null
+++ b/4-Exercises/Lesson-11/Twitter Cards/style.css
@@ -0,0 +1,64 @@
+body {
+ display: grid;
+ grid-template-columns: 200px 200px 200px;
+ column-gap: 20px;
+ row-gap: 20px;
+
+}
+.contianer {
+ border-radius: 10px;
+ box-shadow: 1px 1px 20px gray;
+}
+img {
+ height: 200px;
+ width: 200px;
+ object-fit: cover;
+ transition: height 1s;
+}
+img:hover {
+ cursor: pointer;
+ border-radius: 5px;
+ height: 210px;
+}
+h3 {
+ font-weight: 900;
+ margin: 8px 0 0 10px;
+ font-size: 28px;
+}
+div.channel {
+ display: grid;
+ grid-template-columns: 40px 1fr;
+ margin-top: 10px;
+ margin-left: 8px;
+
+}
+.channel-picture {
+ height: 40px;
+ width: 40px;
+ border-radius: 50px;
+}
+.channel-picture:hover {
+ width: 40px;
+}
+p {
+ margin: 10px 0 0 10px;
+ font-size: 16px;
+ color: rgb(53, 52, 52);
+ font-family: tahoma;
+}
+button {
+ margin: 20px 0 5px 10px;
+ padding: 10px 20px;
+ border-radius: 5px;
+ border: none;
+ color: white;
+ background: rgb(31, 31, 219);
+ cursor: pointer;
+ font-size: 22px;
+ font-weight: 100;
+ transition: background 1s, padding 1s;
+}
+button:hover {
+ background: green;
+ padding: 15px 20px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html b/4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html
new file mode 100644
index 0000000..e461cf7
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
Flex-Box-Exercise
+
+
+
+ 200px
+ 75px
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
new file mode 100644
index 0000000..99b45b5
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
@@ -0,0 +1,11 @@
+.flex{
+ display: flex;
+}
+.two {
+ background: pink;
+ width: 200px;
+}
+.seven{
+ background: skyblue;
+ width: 75px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
new file mode 100644
index 0000000..244d551
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
Flex-Box-Exercise
+
+
+
+ item1
+ item2
+ item3
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
new file mode 100644
index 0000000..5fbd8b4
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
@@ -0,0 +1,15 @@
+.flex {
+ display: flex;
+}
+.one {
+ background: skyblue;
+ width: 50px;
+}
+.two {
+ background: pink;
+ flex: 1;
+}
+.three {
+ background: skyblue;
+ width: 75px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
new file mode 100644
index 0000000..6f138d2
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
Flex-Box-Exercise
+
+
+
+ Item1
+ Item2
+ Item3
+ Item4
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
new file mode 100644
index 0000000..dbca4c6
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
@@ -0,0 +1,9 @@
+.flex {
+ display: flex;
+ justify-content: space-between;
+}
+span {
+ background: blue;
+ width: 50px;
+ color: white;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
new file mode 100644
index 0000000..6281f79
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
Flex-Box-Exercise
+
+
+
+ Item 1
+ Item 2
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
new file mode 100644
index 0000000..eb8a07b
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
@@ -0,0 +1,11 @@
+.flex {
+ display: flex;
+ padding: 20px 0;
+ margin: 5px 5px;
+ border: 1px solid gray;
+ justify-content: space-between;
+}
+span {
+ background: pink;
+ width: 50px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
new file mode 100644
index 0000000..c284c8c
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
Modern Search
+
+
+
+ Home
+
+ Download
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
new file mode 100644
index 0000000..68f2095
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
@@ -0,0 +1,31 @@
+.flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 520;
+ font-size: 20px;
+ padding: 0 20px;
+ height: 60px;
+ margin: 5px 5px;
+ color: white;
+ background: rgb(120, 82, 178);
+ font-family: tahoma;
+}
+
+input {
+ height: 30px;
+ width: 500px;
+ font-size: 20px;
+ border-radius: 30px;
+ border: none;
+ padding-left: 25px;
+}
+button {
+ padding: 8px 15px;
+ font-weight: 500;
+ background: transparent;
+ border: 1px solid white;
+ font-size: 20px;
+ color: white;
+
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html b/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
new file mode 100644
index 0000000..9121cc8
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
Twitter Design
+
+
+
+
+ Home
+ 14
+
+
+ Notifications
+ 3
+
+
+ Messages
+ 5
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Setting/style.css b/4-Exercises/Lesson-12/Flex-box/Setting/style.css
new file mode 100644
index 0000000..0d68576
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-box/Setting/style.css
@@ -0,0 +1,50 @@
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+}
+.flexContainer {
+ height: 230px;
+ width: 380px;
+ border: 2px solid rgb(209, 205, 205);
+ Border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 0 5px;
+ font-family: helvetica;
+}
+.first-row {
+ display: flex;
+ padding: 10px;
+ padding-bottom: 10px;
+ justify-content: space-between;
+ margin: 10px;
+ vertical-align: middle;
+ border-bottom: 2px solid rgb(230, 225, 225);
+ border-bottom-right-radius: 30px;
+ border-bottom-left-radius: 30px;
+}
+.home {
+ font-size: 20px;
+ transition: font-size 1s;
+}
+.home:hover {
+ font-size: 25px;
+ cursor: pointer;
+}
+.num {
+ background: blue;
+ color: white;
+ padding: 5px 16px;
+ font-size: 20PX;
+ font-weight: 700;
+ border-radius: 30px;
+ text-align: center;
+ cursor: pointer;
+ transition: padding 1s, font-size 1s;
+}
+.num:hover {
+ padding: 5px 20px;
+ font-size: 23px;
+}
diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
new file mode 100644
index 0000000..575870c
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
Twitter Follow up page
+
+
+
+
+
+
Sophie
+ The Graceful Cat
+
+
Follow
+
+
+
+
+
Oliver
+ The cat popular
+
+
Follow
+
+
+
+
+
Grizzly
+ The Gentle Giant
+
+
Follow
+
+
+
+
+
Bruno
+ The Adventurous Bear
+
+
Follow
+
+
+
+
+
Lego Joe
+ The Builder Extraordinaire
+
+
Follow
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
new file mode 100644
index 0000000..fcb0b77
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
@@ -0,0 +1,71 @@
+body {
+ margin: 20px;
+ font-family: Arial;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.flex {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ border-radius: 5px;
+ width: 500px;
+ padding: 5px;
+ transition: background 0.8s;
+ margin-bottom: 20px;/*Hint*/
+}
+.flex:hover {
+ background: rgb(224, 219, 219);
+}
+button {
+ padding: 10px 20px;
+ font-size: 19px;
+ color: white;
+ font-weight: 700;
+ background: blue;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: opacity 0.5s;
+}
+button:hover {
+ opacity: 0.8;
+}
+
+img {
+ margin-right: 20px;
+ width: 50px;
+ height: 50px;
+ object-fit: cover;
+ border-radius: 35px;
+}
+.secondFlex {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+}
+h4 {
+ margin-bottom: 8px;
+ margin-top: 0;
+ font-weight: 800;
+}
+span {
+ margin: 0;
+ font-size: 15px;
+ font-style: italic;
+ color: rgb(112, 102, 102);
+}
+/* @media (min-width: 0) and (max-width: 350px) {
+ .secondFlex {
+ width: 15%;
+ }
+ button {
+ height: 50px;
+ }
+}
+@media (min-width: 351px) and (max-widht: 500px) {
+ .secondFlex {
+ width: 20%;
+ }
+} */
\ No newline at end of file
diff --git a/4-Exercises/Lesson-13/Twiiter-Message-Section/index.html b/4-Exercises/Lesson-13/Twiiter-Message-Section/index.html
new file mode 100644
index 0000000..3d7d733
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twiiter-Message-Section/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
Twitter Post Section
+
+
+
+
+
+
+
+
+
Elyas Sharifi
+ @elyasAhsharifi
+
+
+
What is backend web development? A complete overview. New video is up
+
+
+
+
+
youtube.com
+
+ Backend web development - a complete overview (2024)
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-13/Twiiter-Message-Section/style.css b/4-Exercises/Lesson-13/Twiiter-Message-Section/style.css
new file mode 100644
index 0000000..fe34a3a
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twiiter-Message-Section/style.css
@@ -0,0 +1,79 @@
+.container {
+ margin: 20px;
+ color: black;
+ display: flex;
+ font-family: Arial;
+ font-size: 20px;
+ width: fit-content;
+}
+img {
+ width: 70px;
+ height: 70px;
+ object-fit: cover;
+ border-radius: 35px;
+ align-items: center;
+ margin-right: 15px;
+ cursor: pointer;
+}
+.postInfo {
+ display: flex;
+ flex-direction: column;
+ font-weight: 100;
+}
+.posterInfo {
+ display: flex;
+ flex-direction: row;
+}
+.posterName {
+ margin: 0;
+}
+.posterUserName {
+ color: rgb(122, 117, 117);
+ margin: 0;
+ font-size: 17px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+.posterUserName:hover {
+ color: blue;
+ text-decoration: underline;
+}
+.message-section {
+ margin-top: 13px;
+ font-size: 16px;
+ font-weight: 500;
+}
+.message {
+ margin: 0;
+ line-height: 20px;
+ width: 400px;
+}
+.video-section {
+ display: flex;
+ border: 1px solid rgb(214, 212, 212);
+ border-radius: 8px;
+ margin-top: 13px;
+ margin-left: 5px;
+ width: 400px;
+}
+.video-section:hover {
+ cursor: pointer;
+ opacity: 0.9;
+}
+.video {
+ border-right: 1px solid rgb(214, 212, 212);
+ width: 150px;
+ background: rgb(214, 212, 212);
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+}
+.videoInfo {
+ margin: 20px 5px 20px 10px;
+ font-size: 17px;
+}
+.video-link {
+ color: rgb(165, 162, 162);
+}
+.video-Info {
+ margin: 5px 0 0 0;
+}
diff --git a/4-Exercises/Lesson-13/Twitter-Inboxes/index.html b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
new file mode 100644
index 0000000..1caff3b
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
Twitter Inboxes
+
+
+
+
ALL INBOXES
+
+
+
+
Chewy Promotions
+
Biggest sales of the year!
+
Hey there, We're writing to tell you about our...
+
+
4:58 PM
+
+
+
+
+
Best Buy
+
Your Best Buy Receipt
+
Thank you for shoping at Best Buy, here is...
+
+
8:35 AM
+
+
+
+
+
Netflix
+
Here's what coming soon to Netflix
+
Brand new movies and shows, old favorites...
+
+
9:00 PM
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-13/Twitter-Inboxes/style.css b/4-Exercises/Lesson-13/Twitter-Inboxes/style.css
new file mode 100644
index 0000000..b598cde
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twitter-Inboxes/style.css
@@ -0,0 +1,54 @@
+body {
+ margin: 20px;
+ padding: 0;
+ font-family: Arial;
+ font-size: 15px;
+}
+.flex {
+ width: 490px;
+ color: rgb(136, 134, 134);
+ padding: 14px;
+ border-radius: 5px;
+ box-shadow: 0 0 5px;
+}
+.flex span {
+ margin-top: 10px;
+ margin-left: 8px;
+}
+.flexItems {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 15px 0;
+ margin-bottom: 5px;
+ width: fit-content;
+}
+img {
+ width: 60px;
+ height: 60px;
+ border-radius: 30px;
+ object-fit: cover;
+ margin-right: 15px;
+}
+
+.info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+h2 {
+ color: black;
+ margin: 0 0 2px 0;
+ font-size: 20px;
+}
+p{
+ margin: 0;
+ margin-top: 8px;
+ font-size: 17px;
+}
+.time {
+ align-self: flex-start;
+ justify-self: flex-end;
+ font-size: 15px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Discord Side bar/index.html b/4-Exercises/Lesson-14/Discord Side bar/index.html
new file mode 100644
index 0000000..e26d3a4
--- /dev/null
+++ b/4-Exercises/Lesson-14/Discord Side bar/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
Discord
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ INFO
+ +
+
+
+ # ask-elyas
+ # updates
+ # faq
+ # general
+ # self-promo
+ # networking
+ # new-videos
+ # help!
+ # pets
+ # jobs
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Discord Side bar/style.css b/4-Exercises/Lesson-14/Discord Side bar/style.css
new file mode 100644
index 0000000..374fca8
--- /dev/null
+++ b/4-Exercises/Lesson-14/Discord Side bar/style.css
@@ -0,0 +1,108 @@
+body {
+ height: 3000px;
+}
+
+.first-side {
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 95px;
+ background: rgb(33, 33, 33);
+ overflow-y: scroll;
+}
+
+.hoverImages {
+ padding: 10px 15px 0 15px;
+ border-radius: 10px;
+ transition: background-color 200ms ease;
+}
+
+.hoverImages:hover{
+ background-color: rgb(54, 53, 53);
+}
+
+img {
+ width: 50px;
+ height: 50px;
+ border-radius: 30px;
+ object-fit: cover;
+ margin-bottom: 10px;
+ cursor: pointer;
+ border: none;
+ transition: border-radius 200ms ease ;
+}
+
+.hoverImages:hover img{
+ border-radius: 10px;
+}
+
+.second-side {
+ background: rgb(55, 55, 55);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 95px;
+ width: 160px;
+ padding: 20px 20px 0 15px;
+ font-family: Arial;
+}
+
+.title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: white;
+}
+
+.title span + span {
+ font-size: 30px;
+ color: gray;
+ cursor: pointer;
+ transition: border-radius 200ms, width 200ms, text-align 200ms, background 200ms;
+}
+
+.title span + span:hover {
+ background: rgb(99, 97, 97);
+ text-align: center;
+ width: 30px;
+ border-radius: 50px;
+}
+
+div.channels {
+ display: flex;
+ flex-direction: column;
+ font-size: 18px;
+ padding: 10px 0 0 0;
+ color: gray;
+}
+
+div.channels span {
+ margin-bottom: 13px;
+ cursor: pointer;
+ padding: 8px;
+ border-radius: 8px;
+ transition: background 200ms;
+}
+
+div.channels span:hover {
+ background: rgb(99, 97, 97);
+}
+
+/*SCROOL BAR STYLE*/
+::-webkit-scrollbar {
+ width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgb(108, 108, 109);
+ height: 10px;
+ border: 1px solid transparent;
+ border-radius: 10px;
+ background-clip: padding-box;
+ cursor: pointer;
+
+}
+::-webkit-scrollbar-track {
+ border-radius: 5px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Error/index.html b/4-Exercises/Lesson-14/Error/index.html
new file mode 100644
index 0000000..542aae3
--- /dev/null
+++ b/4-Exercises/Lesson-14/Error/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
Error
+
+
+
+
+
+
Modal Title
+
This is a model
+
Close
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Error/style.css b/4-Exercises/Lesson-14/Error/style.css
new file mode 100644
index 0000000..848d2f2
--- /dev/null
+++ b/4-Exercises/Lesson-14/Error/style.css
@@ -0,0 +1,35 @@
+body {
+ height: 3000px;
+}
+.right-sidebar {
+ background: rgb(6, 199, 6);
+ color: white;
+ position: fixed;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 200px;
+ text-align: center;
+}
+.overlay {
+ background: rgba(0, 0, 0, 0.5);
+ position: fixed;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ top: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.model {
+ background: white;
+ width: 350px;
+ height: 150px;
+ border-radius: 8px;
+ padding: 8px 0 0 18px;
+ font-family: Arial;
+}
+p {
+ font-weight: 550;
+}
diff --git a/4-Exercises/Lesson-14/Header/index.html b/4-Exercises/Lesson-14/Header/index.html
new file mode 100644
index 0000000..48f1dec
--- /dev/null
+++ b/4-Exercises/Lesson-14/Header/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Header/style.css b/4-Exercises/Lesson-14/Header/style.css
new file mode 100644
index 0000000..c601972
--- /dev/null
+++ b/4-Exercises/Lesson-14/Header/style.css
@@ -0,0 +1,48 @@
+body {
+ height: 3000px;
+}
+.header {
+ margin: 0;
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ font-family: Helvetica;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px 40px;
+}
+.one {
+ display: flex;
+}
+img {
+ width: 50px;
+ height: 50px;
+ object-fit: cover;
+ border-radius: 30px;
+ cursor: pointer;
+}
+h3 {
+ margin-left: 15px;
+ font-size: 15px;
+ font-weight: 600;
+}
+.button {
+ display: flex;
+}
+button {
+ padding: 8px 12px;
+ color: white;
+ background: blue;
+ border: none;
+ border-radius: 5px;
+ font-weight: 600;
+ cursor: pointer;
+ margin-right: 8px;
+}
+.message {
+ background: rgb(230, 230, 230);
+ color: black;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-15/Store-Example/index.html b/4-Exercises/Lesson-15/Store-Example/index.html
new file mode 100644
index 0000000..558da76
--- /dev/null
+++ b/4-Exercises/Lesson-15/Store-Example/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
STORE
+
+
+
+
+
20% OFF
+
+
+ Add to Cart
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-15/Store-Example/style.css b/4-Exercises/Lesson-15/Store-Example/style.css
new file mode 100644
index 0000000..116dd19
--- /dev/null
+++ b/4-Exercises/Lesson-15/Store-Example/style.css
@@ -0,0 +1,45 @@
+body {
+ height: 3000px;
+}
+.container {
+ position: relative;
+ left: 5px;
+ top: 5px;
+ background: rgb(202, 199, 199);
+ width: 300px;
+ height: 300px;
+ font-family: arial;
+}
+img {
+ width: 300px;
+ height: 300px;
+ object-fit: cover;;
+}
+.price {
+ position: absolute;
+ top: 20px;
+ right: 0;
+ background: black;
+ color: white;
+ padding: 10px;
+ font-size: 20px;
+ font-weight: 500;
+}
+.adding {
+ background: rgba(255, 255, 255, 0.8);
+ position: absolute;
+ top: 200px;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+button {
+ padding: 10px 15px;
+ color: black;
+ background: white;
+ border: 1px solid black;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-15/Vedio-Example/index.html b/4-Exercises/Lesson-15/Vedio-Example/index.html
new file mode 100644
index 0000000..beac8bf
--- /dev/null
+++ b/4-Exercises/Lesson-15/Vedio-Example/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
Video-Example
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-15/Vedio-Example/style.css b/4-Exercises/Lesson-15/Vedio-Example/style.css
new file mode 100644
index 0000000..4757dc7
--- /dev/null
+++ b/4-Exercises/Lesson-15/Vedio-Example/style.css
@@ -0,0 +1,40 @@
+body{
+ height: 3000px;
+}
+.container {
+ position: fixed;
+ height: 180px;
+ width: 300px;
+ background: rgb(160, 158, 158);
+ right: 20px;
+ bottom: 20px;
+}
+.video-time {
+ background: black;
+ color: white;
+ font-size: 20px;
+ padding: 5px;
+ font-family: Arial;
+ position: absolute;
+ right: 13px;
+ bottom: 13px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.close {
+ background: black;
+ border-radius: 30px;
+ position: absolute;
+ left: -20px;
+ top: -20px;
+ cursor: pointer;
+ color: white;
+ font-size: 20px;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/4-Exercises/Lesson-16/tool-tip/index.html b/4-Exercises/Lesson-16/tool-tip/index.html
new file mode 100644
index 0000000..4c3e4aa
--- /dev/null
+++ b/4-Exercises/Lesson-16/tool-tip/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
ToolTip-Example
+
+
+
+
+ mic
+
+
Search With Voice
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-16/tool-tip/style.css b/4-Exercises/Lesson-16/tool-tip/style.css
new file mode 100644
index 0000000..0e7a595
--- /dev/null
+++ b/4-Exercises/Lesson-16/tool-tip/style.css
@@ -0,0 +1,61 @@
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 200px;
+}
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ font-size: 50px;
+}
+.material-symbols-outlined {
+ font-family: 'Material Symbols Outlined';
+ font-weight: 900;
+ font-style: normal;
+ font-size: 60px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ -webkit-font-feature-settings: 'liga';
+ -webkit-font-smoothing: antialiased;
+}
+span.mic {
+ cursor: pointer;
+}
+p.tooltip {
+ position: absolute;
+ top: -70px;
+ background: black;
+ color: white;
+ font-size: 20px;
+ padding: 10px;
+ border-radius: 10px;
+ white-space: nowrap;
+ transform: translateY(20deg);
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 200ms;
+}
+p::before {
+ content: '';
+ position: absolute;
+ top: 43px;
+ left: 72px;
+ height: 0;
+ width: 0;
+ border-right: 10px solid transparent;
+ border-left: 10px solid transparent;
+ border-top: 10px solid black;
+}
+div:hover p.tooltip{
+ opacity: 1;
+}
+
diff --git a/4-Exercises/Lesson-17/CSS-comments/style.css b/4-Exercises/Lesson-17/CSS-comments/style.css
new file mode 100644
index 0000000..b46edc9
--- /dev/null
+++ b/4-Exercises/Lesson-17/CSS-comments/style.css
@@ -0,0 +1,11 @@
+
+
+/* This is a CSS comment*/
+
+/*
+
+ This is a multi line CSS comment
+
+
+*/
+
diff --git a/4-Exercises/Lesson-17/HTML-comments/index.html b/4-Exercises/Lesson-17/HTML-comments/index.html
new file mode 100644
index 0000000..fe83409
--- /dev/null
+++ b/4-Exercises/Lesson-17/HTML-comments/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/4-Exercises/Lesson-2/challenge.html b/4-Exercises/Lesson-2/challenge.html
new file mode 100644
index 0000000..477ed4f
--- /dev/null
+++ b/4-Exercises/Lesson-2/challenge.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
Challenge Exercise
+
+
+
Back to Amazon
+
Nike Black Running Shoes
+
$39 - in stock.
+
Free delivery tomorrow.
+
Add to Cart
+
Buy now
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-2/popular.buttons.html b/4-Exercises/Lesson-2/popular.buttons.html
new file mode 100644
index 0000000..0823017
--- /dev/null
+++ b/4-Exercises/Lesson-2/popular.buttons.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+
Popular Butttons
+
+
+
+ Request now
+
+
+
+ Add to Cart
+
+
+
+ Sing up
+
+
+ Get started
+
+
+ Download
+
+
+
+ Apply on company website
+
+
+ Save
+
+
+
+
+
diff --git a/4-Exercises/Lesson-3/challenge-exercise.html b/4-Exercises/Lesson-3/challenge-exercise.html
new file mode 100644
index 0000000..937c188
--- /dev/null
+++ b/4-Exercises/Lesson-3/challenge-exercise.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
Challenge Exercise
+
+
+
Back to Amazon
+
Nike Black Running Shoes
+
$39 - in stock.
+
Free delivery tomorrow.
+
Add to Cart
+
Buy now
+
+
+
+
+
diff --git a/4-Exercises/Lesson-3/opacity.html b/4-Exercises/Lesson-3/opacity.html
new file mode 100644
index 0000000..b56681c
--- /dev/null
+++ b/4-Exercises/Lesson-3/opacity.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
CSS opacity
+
+
+
Request now
+
+
+
diff --git a/4-Exercises/Lesson-3/shadow.html b/4-Exercises/Lesson-3/shadow.html
new file mode 100644
index 0000000..e438a30
--- /dev/null
+++ b/4-Exercises/Lesson-3/shadow.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
CSS Shadow
+
+
+
Sign up
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-4/Click.html b/4-Exercises/Lesson-4/Click.html
new file mode 100644
index 0000000..cd7d43b
--- /dev/null
+++ b/4-Exercises/Lesson-4/Click.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
CSS Shadows
+
+
+
Shadow
+
+
diff --git a/4-Exercises/Lesson-4/Number.html b/4-Exercises/Lesson-4/Number.html
new file mode 100644
index 0000000..0d946e2
--- /dev/null
+++ b/4-Exercises/Lesson-4/Number.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
Numbers
+
+
+
One
+
Two
+
Three
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-4/Stretch.html b/4-Exercises/Lesson-4/Stretch.html
new file mode 100644
index 0000000..16fcf61
--- /dev/null
+++ b/4-Exercises/Lesson-4/Stretch.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
Stretch button
+
+
+
Stretch
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-4/pagination.html b/4-Exercises/Lesson-4/pagination.html
new file mode 100644
index 0000000..d01fb81
--- /dev/null
+++ b/4-Exercises/Lesson-4/pagination.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
Pagination
+
+
+
Back
+
1
+
2
+
3
+
4
+
5
+
Next
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Challenges/Purchase.html b/4-Exercises/Lesson-5/Challenges/Purchase.html
new file mode 100644
index 0000000..bc1a6d1
--- /dev/null
+++ b/4-Exercises/Lesson-5/Challenges/Purchase.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
Purchase form
+
+
+
+
New
+
MacBook Pro
+
Supercharged for pros.
+
From $2000
+
Buy
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Challenges/freeCodeCamp.html b/4-Exercises/Lesson-5/Challenges/freeCodeCamp.html
new file mode 100644
index 0000000..beea67d
--- /dev/null
+++ b/4-Exercises/Lesson-5/Challenges/freeCodeCamp.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
FreeCodeCamp
+
+
+
+
freeCodeCamp.org @freeCodeCamp 1h
+
As a web developer. you'll want to make your project easy to use and navigate around.
+
Here @chp_it outlines the top skills new developers should have.
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Challenges/simple-conversion.html b/4-Exercises/Lesson-5/Challenges/simple-conversion.html
new file mode 100644
index 0000000..29376cf
--- /dev/null
+++ b/4-Exercises/Lesson-5/Challenges/simple-conversion.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
Simple-Convertor
+
+
+
+
1,049.61 USD
+
+20.05(1.75%) today
+
After hours 1,048.00 - 1.61 (0.15%)
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Verdana.html b/4-Exercises/Lesson-5/Verdana.html
new file mode 100644
index 0000000..66ff2a5
--- /dev/null
+++ b/4-Exercises/Lesson-5/Verdana.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
Courses Example
+
+
+
HTML CSS Courses
+
Beginner to Pro
+
In this course, we'll learn the skills you need to become a developer.
+
Get Started
+
Other Font-Family Modles
+
+ This is Tahoma Font Mode
+ This is the Arial Font Mode
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-6/index.html b/4-Exercises/Lesson-6/index.html
new file mode 100644
index 0000000..5d05d62
--- /dev/null
+++ b/4-Exercises/Lesson-6/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
Model 3
+
+
+
+
+
+
+
+
Model 3
+
Order online for Touchless Delivery
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-6/style.css b/4-Exercises/Lesson-6/style.css
new file mode 100644
index 0000000..6592a33
--- /dev/null
+++ b/4-Exercises/Lesson-6/style.css
@@ -0,0 +1,18 @@
+.container {
+ margin: 0;
+ font-family: "Montserrat", serif;
+ font-weight: 500;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+h1 {
+ margin: 5px 0 0 0;
+ margin-top: 10px;
+}
+.link {
+ color: rgb(7, 42, 87);
+ text-decoration: underline;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/LinkedIn/linkedIn.css b/4-Exercises/Lesson-7/LinkedIn/linkedIn.css
new file mode 100644
index 0000000..83e1992
--- /dev/null
+++ b/4-Exercises/Lesson-7/LinkedIn/linkedIn.css
@@ -0,0 +1,54 @@
+.container {
+ margin-top: 10px;
+ border: 2px solid rgb(1, 8, 1);
+ border-radius: 5px;
+ height: 200px;
+ width: 500px;
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+/* .container:hover {
+ border: none;
+} */
+.mail {
+ display: block;
+ font-weight: 500;
+ color: rgb(99, 98, 98);
+ margin: 8px;
+ margin-left: 10px;
+}
+#Email {
+ margin-left: 10PX;
+ width: 350px;
+ padding: 5px 2px;
+ box-shadow: 1px 1px 5px gray;
+ border-radius: 5px;
+ padding-left: 20px;
+ border-color: gray;
+ cursor: pointer;
+}
+#Email::Placeholder {
+ color: rgb(82, 81, 81);
+}
+p {
+ margin-left: 12PX;
+ color: rgb(82, 81, 81);
+}
+button {
+ cursor: pointer;
+ padding: 10px 130px;
+ color: white;
+ font-size: 20px;
+ background-color: blue;
+ font-family: tahoma;
+ font-weight: 500;
+ border: none;
+ margin-left: 12px;
+ border-radius: 30px;
+}
+button:hover {
+ opacity: 0.7;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/LinkedIn/linkedIn.html b/4-Exercises/Lesson-7/LinkedIn/linkedIn.html
new file mode 100644
index 0000000..e15fc6e
--- /dev/null
+++ b/4-Exercises/Lesson-7/LinkedIn/linkedIn.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
LinkedIn sign up
+
+
+
+
Email:
+
+
By clicking Agree & Join, you agree the Privacy Policy.
+
Agree & Join
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/Twitter/index.html b/4-Exercises/Lesson-7/Twitter/index.html
new file mode 100644
index 0000000..90c4ebf
--- /dev/null
+++ b/4-Exercises/Lesson-7/Twitter/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
Twitter Text box!
+
+
+
+
+
+
Tweet
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/Twitter/style.css b/4-Exercises/Lesson-7/Twitter/style.css
new file mode 100644
index 0000000..f475702
--- /dev/null
+++ b/4-Exercises/Lesson-7/Twitter/style.css
@@ -0,0 +1,33 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+img {
+ width: 50px;
+ border-radius: 50px;
+ margin: 10px;
+}
+input {
+ border: none;
+ padding: 20px 70px;
+ padding-left: 15px;
+ font-size: 20px;
+ outline: none;
+}
+input::placeholder{
+ font-size: 20px;
+ font-family: tahoma;
+}
+button {
+ height: 40px;
+ width: 100px;
+ border-radius: 30px;
+ color: white;
+ background: blue;
+ font-weight: 700;
+ border: none;
+ cursor: pointer;
+ margin-left: 5px;
+ margin-right: 5px;
+}
diff --git a/4-Exercises/Lesson-8/Googe-Search/index.html b/4-Exercises/Lesson-8/Googe-Search/index.html
new file mode 100644
index 0000000..8bdbf46
--- /dev/null
+++ b/4-Exercises/Lesson-8/Googe-Search/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
Google Search
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/style.css b/4-Exercises/Lesson-8/Googe-Search/style.css
new file mode 100644
index 0000000..8ebc2e7
--- /dev/null
+++ b/4-Exercises/Lesson-8/Googe-Search/style.css
@@ -0,0 +1,34 @@
+.container {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 100px;
+}
+img {
+ width: 400px;
+ height: 150PX;
+ object-fit: cover;
+}
+input {
+ border-radius: 30px;
+ box-shadow: 1px 3px 5px gray;
+ height: 50px;
+ width: 500px;
+ font-size: 16px;
+ padding: 0 15px;
+ cursor: pointer;
+ outline: none;
+ transition: height 1s;
+ border: none;
+}
+input:hover {
+ height: 100px;
+}
+input::Placeholder {
+ padding-left: 15px;
+ font-size: 16px;
+}
+input:active {
+ height: 200px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Request form/index.html b/4-Exercises/Lesson-8/Request form/index.html
new file mode 100644
index 0000000..483506c
--- /dev/null
+++ b/4-Exercises/Lesson-8/Request form/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
Uber Form
+
+
+
+
Request a ride now
+
+
+
+ Request now
+ Schedule for later
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Request form/style.css b/4-Exercises/Lesson-8/Request form/style.css
new file mode 100644
index 0000000..5830825
--- /dev/null
+++ b/4-Exercises/Lesson-8/Request form/style.css
@@ -0,0 +1,60 @@
+.container {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100vh;
+ margin: 5px;
+ color: black;
+ border-radius: 5px;
+ border: 2px solid rgb(10, 8, 8);
+}
+h1 {
+ font-size: 40px;
+ font-weight: 500;
+ font-family: arial;
+ margin: 0;
+}
+.fInput {
+ padding: 12px 170px;
+ padding-left: 20px;
+ margin-top: 30px;
+ font-size: 20px;
+ border: none;
+ background: rgb(231, 229, 229);
+ outline-color: black;
+}
+.sInput {
+ margin-top: 10px;
+}
+.containertwo {
+ display: flex;
+ flex-direction: row;
+ margin-top: 50px;
+ column-gap: 30px;
+}
+.request {
+ font-size: 18px;
+ padding: 12px 25px;
+ border: none;
+ color: white;
+ background: black;
+ cursor: pointer;
+ transition: padding-right 1s, padding-left 1s, opacity 1s;
+}
+.hover:hover {
+ opacity: 0.8;
+ padding-right: 30px;
+ padding-left: 30px;
+}
+.whitehover {
+ background: rgb(231, 229, 229);
+ color: black;
+
+}
+.whitehover:hover {
+ opacity: 0.9;
+ padding-right: 30px;
+ padding-left: 30px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Sign up form/index.html b/4-Exercises/Lesson-8/Sign up form/index.html
new file mode 100644
index 0000000..278510b
--- /dev/null
+++ b/4-Exercises/Lesson-8/Sign up form/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
Sign up form
+
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Sign up form/style.css b/4-Exercises/Lesson-8/Sign up form/style.css
new file mode 100644
index 0000000..8936443
--- /dev/null
+++ b/4-Exercises/Lesson-8/Sign up form/style.css
@@ -0,0 +1,52 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+}
+.twocheckbox {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ column-gap: 6px;
+}
+.fName {
+ padding: 10px 0;
+ padding-left: 10px;
+ border-radius: 5px;
+ border: 2px solid rgb(221, 219, 219);
+ outline-color: black;
+ font-size: 17px;
+}
+.fName::Placeholder {
+ font-size: 17px;
+ padding-left: 10px;
+}
+.grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ width: 100%;
+}
+.email {
+ margin-top: 12px;
+}
+button {
+ padding: 10px 0;
+ font-size: 20px;
+ color: white;
+ background: rgb(73, 73, 230);
+ font-weight: 700;
+ border: none;
+ border-radius: 5px;
+ margin-top: 14px;
+ cursor: pointer;
+}
+button:hover {
+ opacity: 0.8;
+}
diff --git a/4-Exercises/Lesson-9/Googel Search/index.html b/4-Exercises/Lesson-9/Googel Search/index.html
new file mode 100644
index 0000000..1c9206a
--- /dev/null
+++ b/4-Exercises/Lesson-9/Googel Search/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
Google Search
+
+
+
+
+
+
+ Google Search
+ I'm Feeling Lucky
+
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Googel Search/style.css b/4-Exercises/Lesson-9/Googel Search/style.css
new file mode 100644
index 0000000..8f9931b
--- /dev/null
+++ b/4-Exercises/Lesson-9/Googel Search/style.css
@@ -0,0 +1,52 @@
+.container {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 100px;
+}
+img {
+ width: 400px;
+ height: 150PX;
+ object-fit: cover;
+}
+input {
+ border-radius: 30px;
+ box-shadow: 1px 3px 5px gray;
+ height: 50px;
+ width: 700px;
+ font-size: 16px;
+ padding: 0 15px;
+ cursor: pointer;
+ outline: none;
+ transition: height 1s;
+ border: none;
+}
+input:hover {
+ height: 100px;
+}
+input::Placeholder {
+ padding-left: 15px;
+ font-size: 16px;
+}
+input:active {
+ height: 200px;
+}
+.button {
+ display: flex;
+ flex-direction: row;
+ column-gap: 13px;
+ margin-top: 40px;
+}
+button {
+ padding: 10px 15px;
+ border: none;
+ font-size: 15px;
+ cursor: pointer;
+ font-weight: lighter;
+ height: 40px;
+ transition: height 1s;
+}
+button:hover {
+ height: 50px;
+}
diff --git a/4-Exercises/Lesson-9/Twitter Cards/index.html b/4-Exercises/Lesson-9/Twitter Cards/index.html
new file mode 100644
index 0000000..fe352f5
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter Cards/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
Cards
+
+
+
+
+
Oliver
+
2 mutual friends
+
Add Friend
+
+
+
+
Mimi
+
3 mutual friends
+
Add Friend
+
+
+
+
Rex
+
4 mutual friends
+
Add Friend
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Twitter Cards/style.css b/4-Exercises/Lesson-9/Twitter Cards/style.css
new file mode 100644
index 0000000..3b253ae
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter Cards/style.css
@@ -0,0 +1,49 @@
+.contianer {
+ display: inline-block;
+ width: 200px;
+ height: 350px;
+ margin: 10px;
+ border-radius: 10px;
+ box-shadow: 1px 1px 20px gray;
+ transition: width 1s;
+}
+.contianer:hover {
+ width: 210px;
+}
+img {
+ width: 200px;
+ height: 200px;
+ object-fit: cover;
+ transition: width 1s;
+}
+img:hover {
+ width: 210px;
+ cursor: pointer;
+}
+h3 {
+ font-weight: 900;
+ margin: 8px 0 0 10px;
+ font-size: 28px;
+}
+p {
+ margin: 2px 0 0 10px;
+ font-size: 20px;
+ color: rgb(53, 52, 52);
+ font-family: tahoma;
+}
+button {
+ margin: 20px 0 2px 10px;
+ padding: 10px 20px;
+ border-radius: 5px;
+ border: none;
+ color: white;
+ background: rgb(31, 31, 219);
+ cursor: pointer;
+ font-size: 22px;
+ font-weight: 100;
+ transition: background 1s, padding 1s;
+}
+button:hover {
+ background: green;
+ padding: 15px 20px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Twitter/index.html b/4-Exercises/Lesson-9/Twitter/index.html
new file mode 100644
index 0000000..90c4ebf
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
Twitter Text box!
+
+
+
+
+
+
Tweet
+
+
+
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Twitter/style.css b/4-Exercises/Lesson-9/Twitter/style.css
new file mode 100644
index 0000000..e7cb466
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter/style.css
@@ -0,0 +1,39 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
+ box-shadow: 3px 3px 10px gray;
+ width: 35%;
+ border-radius: 5px;
+ margin-left: 10px;
+ background: rgb(255, 255, 255);
+}
+img {
+ width: 50px;
+ border-radius: 50px;
+ margin: 10px;
+}
+input {
+ border: none;
+ padding: 20px 70px;
+ padding-left: 15px;
+ font-size: 20px;
+ outline: none;
+}
+input::placeholder{
+ font-size: 20px;
+ font-family: tahoma;
+}
+button {
+ height: 40px;
+ width: 100px;
+ border-radius: 30px;
+ color: white;
+ background: blue;
+ font-weight: 700;
+ border: none;
+ cursor: pointer;
+ margin-left: 5px;
+ margin-right: 5px;
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 6c088c4..7f756be 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
+
+
+
HTML and CSS Exercise Done!
+
By Leo Nexus
+
Powerd By HTML and CSS
## HTML and CSS Course Materials
📚 Watch the course here: https://youtu.be/G3e-cpL7ofc