diff --git a/1-exercise-solutions/lesson-16/16d/youtube.html b/1-exercise-solutions/lesson-16/16d/youtube.html index bf84852..36cb1bb 100644 --- a/1-exercise-solutions/lesson-16/16d/youtube.html +++ b/1-exercise-solutions/lesson-16/16d/youtube.html @@ -1,163 +1,175 @@ ... - -
- ... -
-
-
- - - -
- -
-
- Marques Brownlee -
-
- 15M subscribers -
-
+ + + + + + + Document + + +
+ ... +
+
+
+ + + +
+ +
+
+ Marques Brownlee +
+
+ 15M subscribers
- ...
+ ... +
+
... -
- ... -
-
-
- - - -
- -
-
- Markiplier -
-
- 30M subscribers -
-
+
+ ... +
+
+
+ + + +
+ +
+
+ Markiplier +
+
+ 30M subscribers
- ...
+ ... +
+
... -
- ... -
-
-
- - - -
- -
-
- SSSniperWolf -
-
- 31M subscribers -
-
+
+ ... +
+
+
+ + + +
+ +
+
+ SSSniperWolf +
+
+ 31M subscribers
- ...
+ ... +
+
... -
- ... -
-
-
- - - -
- -
-
- veritasium -
-
- 11.5M subscribers -
-
+
+ ... +
+
+
+ + + +
+ +
+
+ veritasium +
+
+ 11.5M subscribers
- ...
+ ... +
+
... -
- ... -
-
-
- - - -
- -
-
- CS Dojo -
-
- 1.79M subscribers -
-
+
+ ... +
+
+
+ + + +
+ +
+
+ CS Dojo +
+
+ 1.79M subscribers
- ...
+ ... +
+
... -
- ... -
-
-
- - - -
- -
-
- MrBeast -
-
- 90.6M subscribers -
-
+
+ ... +
+
+
+ + + +
+ +
+
+ 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 + + + + + \ 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 + + + + + + \ 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

+ + + \ 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 +

Oliver

+
+ +

2 mutual friends

+
+ + +
+
+ Mimi +

Mimi

+
+ +

3 mutual friends

+
+ +
+
+ Rex +

Rex

+
+ +

4 mutual friends

+
+ +
+ + \ 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 +

Oliver

+
+ +

2 mutual friends

+
+ + +
+
+ Mimi +

Mimi

+
+ +

3 mutual friends

+
+ +
+
+ Rex +

Rex

+
+ +

4 mutual friends

+
+ +
+ + \ 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 + + +
+ + + \ 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 + + +
+ Oliver cat +
+

Sophie

+ The Graceful Cat +
+ +
+
+ Oliver cat +
+

Oliver

+ The cat popular +
+ +
+
+ Oliver cat +
+

Grizzly

+ The Gentle Giant +
+ +
+
+ Oliver cat +
+

Bruno

+ The Adventurous Bear +
+ +
+
+ Oliver cat +
+

Lego Joe

+ The Builder Extraordinaire +
+ +
+ + \ 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 + + +
+
+ cat +
+ +
+ + \ 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

+ +
+
+ + \ 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 + + +
+
+ +

Elyas Sharifi

+
+
+ + +
+
+ + \ 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
+
+ +
+
+ + \ 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 + + +
+
5:43
+
X
+
+ + \ 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.

+ + + + \ 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 + + + + + + + + + + + + + + + + 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.

+ + + + + + + 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 + + + + + + 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 + + + + + \ 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 + + + + + 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 + + + + + + + \ 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 + + + + + \ 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 + + + + 1 + 2 + 3 + 4 + 5 + + + \ 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

+ +
+ + \ 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 @freeCodeCamp1h

+

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.

+ +
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.

+ +
+ + \ 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! + + +
+ + + +
+ + \ 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

+ + +
+ + +
+
+ + \ 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 + + +
+ + +
+ + +
+
+ + \ 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 +

Oliver

+

2 mutual friends

+ +
+
+ Mimi +

Mimi

+

3 mutual friends

+ +
+
+ Rex +

Rex

+

4 mutual friends

+ +
+ + \ 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! + + +
+ + + +
+ + \ 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