diff --git a/00-intro.mp4 b/00-intro.mp4
index 0247738..f1d9811 100644
Binary files a/00-intro.mp4 and b/00-intro.mp4 differ
diff --git a/01-analogies.mp4 b/01-analogies.mp4
index 13d5281..80bbb5f 100644
Binary files a/01-analogies.mp4 and b/01-analogies.mp4 differ
diff --git a/02-principles.mp4 b/02-principles.mp4
index 6f86043..eb80a55 100644
Binary files a/02-principles.mp4 and b/02-principles.mp4 differ
diff --git a/03-faq.mp4 b/03-faq.mp4
index a9153c0..0833602 100644
Binary files a/03-faq.mp4 and b/03-faq.mp4 differ
diff --git a/index.html b/index.html
index 4da2f91..4682ff1 100644
--- a/index.html
+++ b/index.html
@@ -1,35 +1,87 @@
-
Educational Bitcoin videos
+
+
+
+
+
+
+
+ Educational Bitcoin videos
+
-
-Bitcoin educational videos
-
+ Bitcoin educational videos
+
+
+
+
+
01. Intro
+
+
+
+
+
+
01. Intro
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
02. Analogies
+
+
+
+
03. Principles
+
+
+
+
04. FAQ
+
+
+
+
+
+
+
-
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e02b821
--- /dev/null
+++ b/style.css
@@ -0,0 +1,144 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ text-transform: capitalize;
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+ font-weight: normal;
+}
+body{
+ background: transparent;
+}
+.heading{
+ color: #fff;
+ font-size: 40px;
+ text-align: center;
+ padding: 10px;
+}
+
+.container{
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 15px;
+ align-items: flex-start;
+ padding: 5px 5%;
+}
+.container .main-video{
+ background: white;
+ border-radius: 5px;
+ padding: 10px;
+}
+.container .main-video video{
+ width: 100%;
+ border-radius: 5px;
+
+}
+.container .main-video video .title{
+ color: grey;
+ font-size: 23px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+
+.container .video-list{
+ background: white;
+ border-radius: 5px;
+ height: 520px;
+ overflow-y: scroll;
+
+
+}
+.container .video-list .vid video{
+ width: 100%;
+ border-radius: 5px;
+
+}
+
+
+.container .main-video .title{
+ color: grey;
+ font-size: 23px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+
+.container .video-list{
+ background: white;
+ border-radius: 5px;
+ height: 520px;
+ overflow-y: scroll;
+}
+
+.container .video-list::-webkit-scrollbar{
+ width: 7px;
+}
+.container .video-list::-webkit-scrollbar-track{
+ background: white;
+ border-radius: 50px;
+
+}
+
+.container .video-list::-webkit-scrollbar-thumb{
+ background: grey;
+ border-radius: 50px;
+
+}
+.container .video-list .vid video{
+ width: 100px;
+ border-radius: 5px;
+
+}
+
+
+.container .video-list .vid{
+ display: flex;
+ gap: 15px;
+ background: white;
+ border-radius: 5px;
+ margin: 10px;
+ padding: 10px;
+ border: 1px solid rgba(0, 0, 0, .1);
+ cursor: pointer;
+ flex-direction: column;
+}
+.container .video-list .vid:hover{
+ background: white;
+}
+
+.container .video-list .vid.active{
+ background: #ccc;
+}
+.container .video-list .vid.active.title{
+ color: white;
+}
+
+.container .video-list .vid .title{
+ color: grey;
+ font-size: 17px;
+}
+
+.container .video-list .vid video {
+ width: 100%;
+ border-radius: 5px;
+}
+
+@media(max-width:994px){
+ .container{
+
+ grid-template-columns: 1.5fr 1fr;
+
+ padding: 10px;
+ }
+
+}
+@media(max-width:778px){
+ .container{
+
+ grid-template-columns: 1fr;
+
+ padding: 10px;
+ }
+
+}
+
+