diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c119b7d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,15 @@ +{ + "cSpell.words": [ + "Brownlee", + "Caet", + "Kadane's", + "Markiplier", + "Pichai", + "Shoutout", + "Sundar", + "supersimple", + "Toks", + "Veritasium", + "youtube" + ] +} diff --git a/archive/button-challenges.html b/archive/button-challenges.html new file mode 100644 index 0000000..f70bfb2 --- /dev/null +++ b/archive/button-challenges.html @@ -0,0 +1,336 @@ + + + + + + + Testing + + + + + + + + + +
+ +

1

+

2

+

3

+

4

+

5

+ +
+ + + + + + + diff --git a/archive/button-practice.html b/archive/button-practice.html new file mode 100644 index 0000000..4588b49 --- /dev/null +++ b/archive/button-practice.html @@ -0,0 +1,79 @@ + + + + + + + Testing! + + + + +

This is a paragraph!!

+ + + Hello Word! + Today I wrote this paragraph + +

Back to Amazon

+

Nike black running shoes

+

39$ - in stock

+

Free delivery tomorrow

+ + + + diff --git a/archive/buttons.html b/archive/buttons.html new file mode 100644 index 0000000..7ba6970 --- /dev/null +++ b/archive/buttons.html @@ -0,0 +1,38 @@ + + + + + + + Challenges + + + + + + diff --git a/archive/css-grid-practice.html b/archive/css-grid-practice.html new file mode 100644 index 0000000..c627a7f --- /dev/null +++ b/archive/css-grid-practice.html @@ -0,0 +1,24 @@ + + + + + + + CSS Grid + + +
+
Div 1
+
+ Div 2 +

text

+
+ +
Div 1
+
+ Div 2 +

text

+
+
+ + diff --git a/archive/css-position-challenges.html b/archive/css-position-challenges.html new file mode 100644 index 0000000..cbe263d --- /dev/null +++ b/archive/css-position-challenges.html @@ -0,0 +1,290 @@ + + + + + + + CSS Position Challenges + + + +
+
+ Profile Picture +

Oliver Cat

+
+ +
+ + +
+
+ +
+ Profile Picture + + Profile Picture + + Profile Picture +
+ +
+
+

INFO

+ +
+ +

# new-videos

+

# updates

+

# faq

+
+ + + +
+ +

+ 0:29 +

+
+ +
+ Product Picture +

+ 20% OFF +

+ +
+ +
+
+ + diff --git a/archive/css-position-practice.html b/archive/css-position-practice.html new file mode 100644 index 0000000..4d8201d --- /dev/null +++ b/archive/css-position-practice.html @@ -0,0 +1,114 @@ + + + + + + + CSS Position Practice + + + +
+ header +
+
+ sidebar +
+
+ div 1 +
+
+ div 2 +
+ +
+ bottom-right +
+ +
+ right sidebar +
+ +
+
+

Modal Title

+

This is a modal

+ +
+
+ + diff --git a/archive/flexbox-challenges.html b/archive/flexbox-challenges.html new file mode 100644 index 0000000..a141d24 --- /dev/null +++ b/archive/flexbox-challenges.html @@ -0,0 +1,222 @@ + + + + + + + Flexbox Practice + + + +
+

ALL INBOXES

+
+ + + + + +
+
+ +
+ Profile Picture + +
+

+ supersimple.dev @SuperSimpleDev +

+ +

+ What is backend web development? A complete overview. New video is up! +

+ +
+
+
+

youtube.com

+ +

+ Backend web development - a complete overview (2021) +

+
+
+
+
+ + diff --git a/archive/flexbox-practice.html b/archive/flexbox-practice.html new file mode 100644 index 0000000..aff42c0 --- /dev/null +++ b/archive/flexbox-practice.html @@ -0,0 +1,456 @@ + + + + + + + Flexbox Practice + + + +
+
div 1 text
+
+ div 2 +

text

+
+
+ +
+
100px
+
+ flex: 1 +

text

+
+
+
+
div 1 text
+
+ div 2 +

text

+
+
+ +
+
100px
+
+ flex 1 +

text

+
+
flex 2
+
+ +
+
100px
+
100 px
+
100px
+
+ +
+
100px
+
100 px
+
100px
+
+ +
+
100px
+
100 px
+
100px
+
+ +
+
200px
+
75px
+
+ +
+
item1
+
item2
+
item3
+
+ +
+
item1
+
item2
+
item3
+
item4
+
+ +
+
item1
+
item2
+
+ +
+
+

Home

+

+ 14 +

+
+
+

Notifications

+

+ 3 +

+
+
+

Messages

+

+ 5 +

+
+
+ +
+
+ Profile Picture +
+

Grey

+

Happy Cat

+

Popular

+
+ +
+
+ Profile Picture +
+

Mimi

+

Sleepy Cat

+

Popular

+
+ +
+
+ Profile Picture +
+

Caet

+

the cat

+

Popular

+
+ +
+
+ +
+

+ Home +

+ +
+ +
+
+

item1

+
+
+
row1
+
+
row2
+
row2
+
+
+
+ +
+
+
+
row1
+
+
row2
+
row2
+
+
+
+ + diff --git a/archive/grid-challenges.html b/archive/grid-challenges.html new file mode 100644 index 0000000..30dcba4 --- /dev/null +++ b/archive/grid-challenges.html @@ -0,0 +1,131 @@ + + + + + + + Grid Challenge + + + +
+
+ Profile Picture +

Caet

+
+ Friend Image +

2 mutual friends

+
+ +
+
+ Profile Picture +

Mimi

+
+ Friend Image +

3 mutual friends

+
+ +
+
+ Profile Picture +

Grey

+
+ Friend Image +

4 mutual friends

+
+ +
+
+ + diff --git a/archive/grid-practice.html b/archive/grid-practice.html new file mode 100644 index 0000000..c884e08 --- /dev/null +++ b/archive/grid-practice.html @@ -0,0 +1,49 @@ + + + + + + + Grid Practice + + + +
+
200px
+
75px
+
+
+
col1
+
col2
+
col3
+
+
+
col1
+
col2
+
col3
+
col4
+
col5
+
col6
+
col7
+
col8
+
+ + diff --git a/archive/input-div-practice.css b/archive/input-div-practice.css new file mode 100644 index 0000000..e6ba8ee --- /dev/null +++ b/archive/input-div-practice.css @@ -0,0 +1,316 @@ +input.search-box { + border-radius: 3px; + border-width: 1px; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 5px; + font-size: 12px; + border-color: rgb(190, 190, 190); + border-style: solid; +} + +input.google-search-box { + width: 500px; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35); + border: none; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 10px; + border-radius: 15px; +} + +p { + font-family: Arial; + margin-bottom: 0px; + margin-top: 0px; +} + +p.email { + font-size: 12px; + margin-bottom: 6px; +} + +input.email-box { + border-width: 1px; + width: 250px; + border-radius: 4px; + height: 20px; + margin-bottom: 12px; +} + +p.agree { + font-size: 10px; + margin-bottom: 8px; +} + +button.agree { + border: none; + border-radius: 15px; + width: 280px; + height: 40px; + background-color: rgb(0, 125, 209); + color: white; +} + +div.image-container { + margin-top: 40px; + display: flex; + align-items: center; /* Align items vertically in the container */ + margin-bottom: 40px; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), -1px -1px 1px rgba(0, 0, 0, 0.25); + padding-left: 15px; + padding-top: 15px; + padding-bottom: 15px; + padding-right: 20px; + width: 300px; + border-radius: 15px; +} + +img.search-image { + height: 30px; + width: 30px; + border-radius: 15px; + object-fit: cover; + object-position: center; +} + +input.twitter-text-box { + border: none; + margin-left: 10px; /* Adjust the margin as needed */ + width: 245px; +} + +button.tweet { + border: none; + border-radius: 12px; + background-color: rgb(57, 148, 209); + color: white; + padding-right: 12px; + padding-left: 12px; + padding-top: 6px; + padding-bottom: 6px; + font-weight: bold; +} + +input.email { + display: block; + margin-top: 6px; + margin-bottom: 40px; +} + +p.p1 { + width: 250px; + display: inline-block; + vertical-align: middle; + margin-bottom: 40px; +} + +button.yes, +button.no { + vertical-align: middle; + margin-right: 3px; +} + +img.google-logo { + width: 200px; +} + +input.first-name { + margin-right: 3px; + margin-bottom: 8px; +} + +input.email-input { + display: block; + margin-bottom: 8px; + padding-right: 187px; +} + +input.first-name, +input.last-name, +input.email-input { + padding-left: 15px; + padding-top: 12px; + padding-bottom: 12px; + border-width: 1px; + border-radius: 8px; + border-color: rgb(185, 185, 185); + border-style: solid; +} + +button.sign-up { + background-color: rgb(60, 135, 255); + color: white; + border: none; + border-radius: 5px; + padding-left: 160px; + padding-right: 157px; + padding-bottom: 15px; + padding-top: 15px; + font-weight: bold; +} + +p.request { + font-size: 40px; + font-family: Arial; + margin-top: 40px; + margin-bottom: 24px; +} + +input.location, +input.destination { + border: none; + background-color: rgb(235, 235, 235); + padding-left: 20px; + padding-top: 15px; + padding-bottom: 15px; + padding-right: 220px; + margin-bottom: 5px; + display: block; +} + +input.destination { + margin-bottom: 30px; +} + +button.request, +button.later { + border: none; + color: white; + background-color: black; + padding-top: 10px; + padding-bottom: 10px; + padding-right: 15px; + padding-left: 15px; + margin-right: 20px; +} + +button.later { + background-color: rgb(235, 235, 235); + color: black; +} + +div.test-div { + display: inline-block; +} + +div.red-box { + background-color: red; + display: block; + width: 300px; + height: 300px; + color: red; + margin-top: 40px; +} + +div.green-circle { + background-color: green; + display: block; + width: 300px; + height: 300px; + color: green; + margin-top: 40px; + border-radius: 150px; + margin-bottom: 100px; +} + +div.question { + border-color: rgb(185, 185, 185); + border-style: solid; + display: inline-block; + padding-top: 20px; + padding-left: 20px; + padding-bottom: 20px; + padding-right: 175px; +} + +button.answer-yes, +button.answer-no { + margin-right: 5px; + margin-top: 15px; +} + +div.install-youtube-music { + background-color: rgb(32, 32, 32); + padding-top: 20px; + padding-left: 15px; + padding-right: 20px; + padding-bottom: 20px; + margin-top: 40px; + width: 380px; + margin-bottom: 50px; +} + +p.title { + color: white; + font-weight: bold; +} + +p.info { + color: rgb(190, 190, 190); + width: 360px; + margin-top: 10px; +} + +img.funny-cat { + width: 200px; + height: 200px; + object-fit: cover; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} + +div.cat-container { + display: inline-block; + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); + margin-right: 12px; + border-radius: 3px; +} + +p.cat-name { + font-weight: bold; + font-size: 16px; + margin-left: 4px; +} + +p.cat-friends { + margin-left: 4px; + color: rgb(192, 192, 192); + margin-bottom: 9px; + font-size: 13px; +} + +button.add-cat { + color: white; + border: none; + border-radius: 3px; + background-color: rgb(0, 125, 209); + margin-bottom: 9px; + margin-left: 4px; + padding-left: 22px; + padding-right: 22px; + padding-top: 8px; + padding-bottom: 8px; +} + +div.google-search-box, +div.google-logo { + text-align: center; +} + +button.google-search-feeling-lucky { + border: none; + padding-left: 15px; + padding-right: 15px; + padding-top: 11px; + padding-bottom: 11px; + margin-right: 5px; + margin-left: 5px; + font-weight: 550; +} + +div.google-search-feeling-lucky { + text-align: center; + margin-top: 28px; +} diff --git a/archive/input-div-practice.html b/archive/input-div-practice.html new file mode 100644 index 0000000..26bba82 --- /dev/null +++ b/archive/input-div-practice.html @@ -0,0 +1,103 @@ + + + + + + + YouTube + + + + +

Email

+ +

+ By clicking Agree & Join, you agree to the Privacy Policy. +

+ +
+ search-image + +
+ +

+ Thanks for chatting with our customer support. Would you like to take our + quick survey? +

+ + +
+ +
+
+ +
+ + +

Request a ride now

+ + +
This is a div
+
+
+
+

Satisfied with our service?

+ +
+
+

Install YouTube Music

+

+ Add YouTube Music to your desktop for quick and easy access +

+
+
+ Funny cat +

Caet

+

2 mutual friends

+ +
+
+ Funny cat +

Mimi

+

3 mutual friends

+ +
+
+ Funny cat +

Grey

+

5 mutual friends

+ +
+ + diff --git a/archive/model.css b/archive/model.css new file mode 100644 index 0000000..7289d6d --- /dev/null +++ b/archive/model.css @@ -0,0 +1,20 @@ +p { + font-family: Montserrat; + margin-top: 0px; + margin-bottom: 0px; +} + +p.title { + text-align: center; + font-weight: bold; + font-size: 36px; + margin-bottom: 15px; +} + +p.order { + text-align: center; +} + +span.delivery { + text-decoration: underline; +} diff --git a/archive/model.html b/archive/model.html new file mode 100644 index 0000000..b8c3c40 --- /dev/null +++ b/archive/model.html @@ -0,0 +1,22 @@ + + + + + + + Model 3 + + + + + + +

Model 3

+

+ Oder online for Touchless Delivery +

+ + diff --git a/archive/position-practice.html b/archive/position-practice.html new file mode 100644 index 0000000..b8c2073 --- /dev/null +++ b/archive/position-practice.html @@ -0,0 +1,22 @@ + + + + + + + Position Absolute & Relative Practice + + +
+ absolute +
+ + diff --git a/archive/profile-box.css b/archive/profile-box.css new file mode 100644 index 0000000..58326c6 --- /dev/null +++ b/archive/profile-box.css @@ -0,0 +1,72 @@ +div.container { + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35); + border-radius: 4px; +} + +button.add-cat { + border: none; + color: white; + background-color: rgb(34, 155, 255); + padding-right: 17px; + padding-left: 17px; + padding-top: 7px; + padding-bottom: 7px; + border-radius: 4px; + margin-left: 4px; + margin-bottom: 4px; +} + +div { + display: inline-block; +} + +div.cat-info { + display: block; +} + +img.cat-icon { + width: 25px; + height: 25px; + border-radius: 50%; + text-align: center; + align-items: center; + vertical-align: center; + display: inline-block; +} + +p { + font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; + margin-top: 0; + margin-bottom: 0; +} + +p.cat-friends { + display: inline-block; + vertical-align: center; + text-align: center; + align-items: center; + margin-left: 8px; + font-size: 13px; +} + +img.profile-icon { + width: 225px; + height: 225px; + object-fit: cover; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35); +} + +p.cat-name, +p.cat-icon { + margin-left: 4px; +} + +div.cat-friends { + text-align: center; + align-items: center; + vertical-align: center; + display: flex; + margin: 4px 4px; +} diff --git a/archive/profile-box.html b/archive/profile-box.html new file mode 100644 index 0000000..22edb08 --- /dev/null +++ b/archive/profile-box.html @@ -0,0 +1,31 @@ + + + + + + + Challenges + + + +
+ profile-icon +
+

Caet

+
+ cat-icon +

2 mutual friends

+
+
+ +
+ + diff --git a/archive/profile-icons.css b/archive/profile-icons.css new file mode 100644 index 0000000..8d93b13 --- /dev/null +++ b/archive/profile-icons.css @@ -0,0 +1,64 @@ +img.cat-picture { + width: 70px; + height: 70px; + object-fit: cover; + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +p { + margin-top: 0; + margin-bottom: 0; + font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; +} + +p.cat-name { + font-weight: bold; + font-size: 8px; + width: 66px; + margin-left: 4px; +} + +div { + display: inline-block; +} + +img.cat-image { + width: 14px; + height: 14px; + border-radius: 50%; + vertical-align: middle; + object-fit: cover; +} + +p.cat-friends { + display: inline-block; + font-size: 6px; + vertical-align: middle; +} + +button.add-cat { + color: white; + background-color: dodgerblue; + border: none; + border-radius: 2px; + display: block; + font-size: 4px; + padding-left: 6px; + padding-right: 6px; + padding-top: 4px; + padding-bottom: 4px; + margin-left: 4px; + margin-bottom: 4px; +} + +div.cat-container { + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35); + border-radius: 2px; +} + +div.cat-friends { + margin-left: 4px; + margin-bottom: 3px; + padding-top: 0; +} diff --git a/archive/profile-icons.html b/archive/profile-icons.html new file mode 100644 index 0000000..6d7e2cf --- /dev/null +++ b/archive/profile-icons.html @@ -0,0 +1,63 @@ + + + + + + + Challenge + + + +
+ Profile Picture +

Caet

+
+ Cat Picture +

2 mutual friends

+
+ +
+
+ Profile Picture +

Mimi

+
+ Cat Picture +

2 mutual friends

+
+ +
+
+ Profile Picture +

Grey

+
+ Cat Picture +

2 mutual friends

+
+ +
+ + diff --git a/archive/text-practice.css b/archive/text-practice.css new file mode 100644 index 0000000..4130fe3 --- /dev/null +++ b/archive/text-practice.css @@ -0,0 +1,274 @@ + p { + font-family: Roboto; + margin-top: 0px; + margin-bottom: 0px; + } + + p.video-title { + font-weight: bold; + font-size: 18px; + width: 300px; + line-height: 25px; + margin-bottom: 4px; + transition: margin 0.25s; + } + + p.video-title:hover { + margin-bottom: 12px; + } + + p.video-info { + font-size: 13px; + color: #606060; + margin-bottom: 20px; + } + + p.video-author { + color: #606060; + font-size: 14px; + } + + p.video-description { + color: #606060; + font-size: 14px; + margin-top: 18px; + width: 275px; + line-height: 18px; + margin-bottom: 50px; + } + + p.advertisement { + font-size: 18px; + background-color: rgb(227, 65, 64); + padding-top: 20px; + padding-bottom: 20px; + color: white; + text-align: center; + margin-bottom: 0px; + } + + span.shop-now:hover { + text-decoration: underline; + } + + span.video-author { + transition: text-decoration 0.5s, font-size 0.5s; + } + + span.video-author:hover { + text-decoration: underline; + font-size: 18px; + } + + p.tahoma-font { + font-weight: bold; + margin-top: 12px; + font-family: Tahoma; + margin-bottom: 14px; + } + + p.deals { + font-weight: bold; + font-size: 18px; + } + + p.sales-end { + font-style: italic; + color: red; + font-size: 14px; + margin-bottom: 14px; + } + + p.course { + font-family: Verdana; + font-weight: bold; + font-size: 16px; + } + + p.beginner-to-pro { + color: #606060; + font-size: 12px; + margin-bottom: 14px; + font-family: Verdana; + } + + p.course-info { + width: 250px; + font-size: 12px; + font-family: Verdana; + margin-bottom: 10px; + } + + button.get-started { + color: white; + border: none; + border-radius: 4px; + padding-top: 8px; + padding-bottom: 8px; + padding-right: 12px; + padding-left: 12px; + background-color: green; + font-family: Verdana; + transition: box-shadow 0.1s, padding 0.25s, margin 0.25s; + margin-bottom: 14px; + } + + button.get-started:hover { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35); + padding-right: 16px; + padding-left: 16px; + padding-bottom: 12px; + padding-top: 12px; + margin-bottom: 6px; + } + + button.get-started:active { + box-shadow: none; + } + + p.business-shopping { + text-align: center; + font-weight: bold; + font-size: 22px; + margin-bottom: 9px; + } + + p.apple-at-work { + text-align: center; + font-size: 14px; + margin-bottom: 9px; + } + + p.learn-more { + text-align: center; + font-size: 13px; + color: blue; + margin-bottom: 36px; + } + + span.learn-more:hover { + text-decoration: underline; + } + + p.new { + color: red; + text-align: center; + font-size: 14px; + font-weight: bold; + margin-bottom: 5px; + } + + p.macbook-pro { + text-align: center; + font-size: 17px; + font-weight: bold; + margin-bottom: 5px; + } + + p.supercharged { + text-align: center; + font-size: 36px; + font-weight: bold; + margin-bottom: 5px; + } + + p.macbook-price { + text-align: center; + font-size: 14px; + margin-bottom: 6px; + } + + button.buy { + border: none; + border-radius: 12px; + background-color: rgb(98, 98, 255); + padding-left: 12px; + padding-right: 12px; + padding-top: 6px; + padding-bottom: 6px; + color: white; + transition: box-shadow 0.25s; + } + + button.buy:hover { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35); + } + + button.buy:active { + box-shadow: none; + } + + div.button-container { + text-align: center; + margin-bottom: 28px; + } + + p.stock-price { + font-size: 25px; + } + + div.stock-container { + display: flex; + align-items: baseline; + margin-bottom: 2px; + } + + p.stock-currency { + margin-left: 6px; + color: #606060; + font-size: 14px; + } + + p.stock-change { + color: green; + font-size: 16px; + margin-bottom: 2px; + } + + p.stock-after-hours { + font-size: 15px; + color: #606060; + margin-bottom: 14px; + } + + span.stock-after-hours-percentage { + color: red; + } + + p.tweet-author-name { + font-weight: bold; + } + + span.tweet-author-tag { + color: #606060; + font-weight: normal; + } + + p.tweet-content { + font-size: 15px; + width: 470px; + margin-bottom: 10px; + line-height: 18px; + } + + p.tweet-mention { + font-size: 15px; + width: 470px; + } + + span.tweet-mention { + color: rgb(45, 122, 255); + } + + span.tweet-mention-username { + transition: text-decoration 0.5s; + } + + span.tweet-mention-username:hover { + text-decoration: underline; + } + + iframe.discord-widget { + margin-top: 22px; + border: none + } \ No newline at end of file diff --git a/archive/text-practice.html b/archive/text-practice.html new file mode 100644 index 0000000..1f3bd93 --- /dev/null +++ b/archive/text-practice.html @@ -0,0 +1,72 @@ + + + + + + + Text + + + + + + +

+ Talking Tech and AI with Google CEO Sundar Pichai! +

+

3.4M views · 6 months ago

+

Marques Brownlee ✓

+

+ Talking tech and AI on the heels of Google I/O. Also a daily driver phone + reveal from Google's CEO. Shoutout to + Sundar! +

+ +

This is Tahoma Font

+

Biggest Deals of the Year!

+

Sales end Tuesday

+

HTML CSS Course

+

Beginner to Pro

+

+ In this course, we'll learn the skills you need to become a developer. +

+ +

Shopping for your business?

+

See how Apple at Work can help.

+

Learn more >

+

New

+

MacBook Pro

+

Supercharged for pros.

+

From $1999

+
+
+

1,039.61

+

USD

+
+

+18.05 (1.75%) today

+

+ After hours 1,048.00 + -1.61 (0.15%) +

+

+ freeCodeCamp.org @freeCodeCamp 1h +

+

+ As a web developer, you'll want to make your projects easy to use and + navigate around. +

+

+ Here + @chp_it + outlines the top skills new developers should have. +

+ + diff --git a/images/funny-cat-1.png b/images/funny-cat-1.png new file mode 100644 index 0000000..0f32703 Binary files /dev/null and b/images/funny-cat-1.png differ diff --git a/images/funny-cat-2.png b/images/funny-cat-2.png new file mode 100644 index 0000000..da3347d Binary files /dev/null and b/images/funny-cat-2.png differ diff --git a/images/funny-cat-3.png b/images/funny-cat-3.png new file mode 100644 index 0000000..a164669 Binary files /dev/null and b/images/funny-cat-3.png differ diff --git a/images/thumbnail-1.png b/images/thumbnail-1.png new file mode 100644 index 0000000..6823e49 Binary files /dev/null and b/images/thumbnail-1.png differ diff --git a/images/thumbnail-2.png b/images/thumbnail-2.png new file mode 100644 index 0000000..629860f Binary files /dev/null and b/images/thumbnail-2.png differ diff --git a/styles/general.css b/styles/general.css new file mode 100644 index 0000000..c627d5a --- /dev/null +++ b/styles/general.css @@ -0,0 +1,17 @@ +p, +div, +a { + margin-bottom: 0; + margin-top: 0; + text-decoration: none; + color: black; +} + +body { + margin: 0; + padding-top: 80px; + padding-left: 96px; + padding-right: 24px; + background-color: rgb(248, 248, 248); + font-family: Roboto, Arial; /* Font Stack */ +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 0000000..44d73ae --- /dev/null +++ b/styles/header.css @@ -0,0 +1,196 @@ +div.header { + height: 55px; + display: flex; + justify-content: space-between; + flex-direction: row; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: rgb(228, 228, 228); + z-index: 100; +} + +div.right-section { + width: 180px; + display: flex; + align-items: center; + justify-content: space-between; + margin-right: 20px; + flex-shrink: 0; +} + +div.middle-section { + flex: 1; + margin-left: 70px; + margin-right: 35px; + max-width: 500px; + display: flex; + align-items: center; +} + +div.left-section { + display: flex; + align-items: center; +} + +img.hamburger-menu { + height: 26px; + margin-left: 24px; + margin-right: 24px; +} + +img.hamburger-menu:hover { + cursor: pointer; +} + +img.youtube-logo { + height: 20px; +} + +img.youtube-logo:hover { + cursor: pointer; +} + +button.search-icon { + height: 40px; + width: 66px; + background-color: rgb(240, 240, 240); + border-width: 1px; + border-style: solid; + border-color: rgb(192, 192, 192); + margin-left: -1px; + margin-right: 10px; +} + +button.search-icon div.tooltip, +button.voice-search-icon div.tooltip, +div.upload-icon-container div.tooltip, +div.youtube-apps-container div.tooltip, +div.notifications-icon-container div.tooltip { + font-family: Roboto, Arial; + position: absolute; + background-color: gray; + color: white; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 8px; + padding-right: 8px; + border-radius: 2px; + font-size: 12px; + bottom: -30px; + opacity: 0; + transition: opacity 0.15s; + pointer-events: none; + white-space: nowrap; +} + +button.search-icon:hover div.tooltip, +button.voice-search-icon:hover div.tooltip, +div.upload-icon-container:hover div.tooltip, +div.youtube-apps-container:hover div.tooltip, +div.notifications-icon-container:hover div.tooltip { + opacity: 1; +} + +button.search-icon:hover, +button.voice-search-icon:hover, +div.upload-icon-container:hover, +div.youtube-apps-container:hover, +div.notifications-icon-container:hover { + cursor: pointer; +} + +button.search-icon, +button.voice-search-icon, +div.upload-icon-container, +div.youtube-apps-container, +div.notifications-icon-container { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +button.voice-search-icon { + height: 40px; + width: 40px; + border-radius: 20px; + border: none; + background-color: rgb(245, 245, 245); +} + +img.voice-search-icon { + height: 24px; +} + +input.search-box { + flex: 1; + height: 36px; + padding-left: 10px; + font-size: 16px; + + /* Border shorthand */ + /* Width style colour */ + border: 1px solid rgb(192, 192, 192); + + border-radius: 2px; + box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05); + width: 0; +} + +input.search-box:focus { + border: 1px solid rgb(192, 192, 192); + outline: none; +} + +input.search-box::placeholder { + font-family: Roboto, Arial; + font-size: 14px; +} + +img.search-icon { + height: 25px; +} + +img.create-video-icon { + height: 24px; +} + +img.youtube-apps-icon { + height: 24px; +} + +img.notifications-icon { + height: 24px; +} + +div.notifications-icon-container { + position: relative; +} + +div.notifications-count { + position: absolute; + top: -2px; + right: -5px; + background-color: rgb(200, 0, 0); + color: white; + font-size: 11px; + padding-left: 5px; + padding-right: 5px; + padding-top: 2px; + padding-bottom: 2px; + border-radius: 50%; +} + +img.profile-icon { + height: 32px; + border-radius: 50%; +} + +img.profile-icon:hover { + cursor: pointer; +} diff --git a/styles/sidebar.css b/styles/sidebar.css new file mode 100644 index 0000000..5f97e73 --- /dev/null +++ b/styles/sidebar.css @@ -0,0 +1,81 @@ +@media (max-width: 1200px) { + div.sidebar { + position: fixed; + left: 0; + bottom: 0; + top: 55px; + background-color: white; + width: 72px; + z-index: 200; + padding-top: 5px; + } + + div.sidebar-link { + height: 74px; + display: flex; + /* Horizontal Centring */ + justify-content: center; + /* Vertical Centring */ + align-items: center; + /* "Switch" align-items / justify-content properties */ + flex-direction: column; + } + + div.sidebar-link:hover { + background-color: rgb(235, 235, 235); + cursor: pointer; + } + + /* IMPORTANT */ + div.sidebar-link img { + margin-bottom: 5px; + height: 24px; + } + + div.sidebar-link div { + font-size: 10px; + } +} + +@media (min-width: 1200.1px) { + div.sidebar { + position: fixed; + left: 0; + bottom: 0; + top: 55px; + background-color: white; + width: 150px; + z-index: 200; + padding-top: 5px; + } + + div.sidebar-link { + height: 35px; + display: flex; + /* Vertical Centring */ + align-items: center; + /* "Switch" align-items / justify-content properties */ + flex-direction: row; + } + + div.sidebar-link:hover { + background-color: rgb(235, 235, 235); + cursor: pointer; + } + + /* IMPORTANT */ + div.sidebar-link img { + width: 24px; + margin-left: 20px; + } + + div.sidebar-link div { + font-size: 10px; + width: 1fr; + margin-left: 12px; + } + + body { + padding-left: 174px; + } +} diff --git a/styles/video.css b/styles/video.css new file mode 100644 index 0000000..d59340c --- /dev/null +++ b/styles/video.css @@ -0,0 +1,153 @@ +div.thumbnail { + width: 100%; + position: relative; + margin-bottom: 8px; +} + +div.video-time { + background-color: black; + color: white; + position: absolute; + bottom: 8px; + right: 5px; + font-size: 12px; + font-weight: 500; + + /* Padding shortcut */ + /* top right bottom left */ + /* Vertical Horizontal */ + + padding: 4px; + + /* Works with margin as well */ + + border-radius: 2px; +} + +img.channel-picture { + border-radius: 50%; + width: 36px; +} + +div.channel-picture { + width: 38px; + vertical-align: top; + position: relative; + height: 36px; +} + +p.video-title { + font-weight: 500; + font-size: 14px; + line-height: 18px; + margin-bottom: 10px; +} + +img.thumbnail { + width: 100%; +} + +p.video-author, +p.video-info { + font-size: 12px; + color: rgb(96, 96, 96); +} + +p.video-author { + margin-bottom: 4px; +} + +div.video-information-grid { + display: grid; + grid-template-columns: 40px 1fr; +} + +div.video-previews { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 15px; + row-gap: 30px; +} + +/* Border not affected by inheritance, mostly with text properties */ + +@media (max-width: 500px) { + div.video-previews { + grid-template-columns: 1fr; + } +} + +@media (max-width: 750px) { + div.video-previews { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 751px) and (max-width: 999px) { + div.video-previews { + grid-template-columns: 1fr 1fr 1fr; + } +} + +@media (min-width: 1200px) { + div.video-previews { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + + p { + font-size: 14px; + } + + p.video-title { + font-size: 16px; + line-height: 24px; + } +} + +@media (min-width: 2000px) { + p { + font-size: 18px; + } + + p.video-title { + font-size: 20px; + line-height: 28px; + } +} + +div.channel-tooltip-container { + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45); + border-radius: 4px; + width: 250px; + display: flex; + z-index: 300; + background-color: white; + position: absolute; + padding-left: 9px; + padding-right: 18px; + padding-top: 12px; + padding-bottom: 12px; + opacity: 0; + bottom: -85px; + pointer-events: none; + transition: opacity 0.15s; +} + +img.tooltip-channel-picture { + border-radius: 50%; + height: 45px; + margin-right: 6px; +} + +div.channel-picture:hover div.channel-tooltip-container { + opacity: 1; +} + +p.tooltip-channel-name { + font-weight: bold; +} + +p.tooltip-channel-subscribers { + font-size: 13px; + color: rgb(143, 143, 143); +} diff --git a/youtube.html b/youtube.html new file mode 100644 index 0000000..44e9f3f --- /dev/null +++ b/youtube.html @@ -0,0 +1,318 @@ + + + + + + + YouTube + + + + + + + + + + +
+ +
+ +
+
+ Hamburger Menu +
+
+ + + + + +
+
+
+ Create Video Icon +
Create
+
+ +
+ YouTube Apps Icon +
YouTube Apps
+
+ +
+ Notification Icon +
3
+
Notifications
+
+ + Profile Icon +
+
+ +
+
+ Home Icon +
Home
+
+
+ Explore Icon +
Explore
+
+
+ Subscriptions Icon +
Subscriptions
+
+
+ Originals Icon +
Originals
+
+
+ YouTube Music Icon +
YouTube Music
+
+
+ Library Icon +
Library
+
+
+ +
+
+
+ Thumbnail +
14:20
+
+
+
+ channel-picture +
+ Profile Picture +
+

Marques Brownlee

+

15M Subscribers

+
+
+
+
+

+ Talking Tech and AI with Google CEO Sundar Pichai! +

+

Marquees Brownlee

 +

3.4M views · 6 months ago

+
+
+
+
+
+ Thumbnail +
8:22
+
+
+
+ channel-picture +
+
+

Try Not To Laugh Challenge #9

+

Markiplier

+

19M views · 4 years ago

+
+
+
+
+
+ Thumbnail +
9:13
+
+
+
+ channel-picture +
+
+

+ Crazy Tik Toks Taken Moments Before DISASTER +

+

SSSniperWolf

+

12M views · 1 year ago

+
+
+
+
+
+ Thumbnail +
22:09
+
+
+
+ channel-picture +
+
+

+ The Simplest Math Problem No One Can Solve - Collatz Conjecture +

+

Veritasium

+

18M views · 4 months ago

+
+
+
+
+
+ Thumbnail +
11:17
+
+
+
+ channel-picture +
+
+

+ Kadane's Algorithm to Maximum Sum Subarray Problem +

+

CS Dojo

+

519K views · 5 years ago

+
+
+
+
+
+ Thumbnail +
19:59
+
+
+
+ channel-picture +
+
+

+ Anything You Can Fit In The Circle I’ll Pay For +

+

MrBeast

+

141M views · 1 year ago

+
+
+
+
+ +