diff --git a/actor.css b/actor.css
new file mode 100644
index 0000000..ce21579
--- /dev/null
+++ b/actor.css
@@ -0,0 +1,151 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+:root{
+ --md-dark-color: #1d1d1d;
+ --dark-color: #171717;
+ --light-dark-color: #292929;
+ --yellow-color: #d4aa11;
+}
+
+
+
+#movie-backdrop {
+ width: 100%;
+}
+
+#actors {
+ margin: 24px 16px 0 0;
+}
+.collapsible {
+ /* background-color: #777; */
+ color: white;
+ cursor: pointer;
+ /* padding: 18px; */
+ /* width: 40%; */
+ border: none;
+ text-align: left;
+ outline: none;
+ font-size: 15px;
+ }
+
+ .active, .collapsible:hover {
+ background-color: #555;
+ }
+
+ .collapsible:after {
+ content: '\002B';
+ color: white;
+ font-weight: bold;
+ /* float: right; */
+ margin-left: 5px;
+ }
+
+ .active:after {
+ content: "\2212";
+ }
+
+ .content {
+ padding: 0 40px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ background-color: #f1f1f1;
+ color: #d4aa11;
+ }
+
+body{
+ font-family: 'Inter', sans-serif;
+ background-color: #292929;
+ /* padding-top: 8px; */
+}
+
+
+.actor-poster {
+ max-width: 500px;
+ margin: 0 auto;
+ border: 4px solid #fff;
+}
+
+.actor-info{
+ text-align: center;
+ color: #fff;
+ padding-top: 3rem;
+}
+
+#Actor-name{
+ font-size: 2rem;
+ color: var(--yellow-color);
+}
+
+.actor-misc-info{
+ list-style-type: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 1rem;
+}
+
+.actor-info .actor-birth-date{
+ background-color: var(--yellow-color);
+ padding: 0.4rem;
+ margin: 0 0.4rem;
+ border-radius: 3px;
+ font-weight: 600;
+}
+
+.actor-info .actor-placeofbirth{
+ background-color: var(--yellow-color);
+ padding: 0.4rem;
+ margin: 0 0.4rem;
+ border-radius: 3px;
+ font-weight: 600;
+}
+.actor-info .actor-popularity{
+ background-color: var(--yellow-color);
+ padding: 0.4rem;
+ margin: 0 0.4rem;
+ border-radius: 3px;
+ font-weight: 600;
+}
+.actor-info #bio-head{
+ color:#d4aa11
+}
+
+.actor-info .known for department{
+ color: var(--yellow-color);
+ font-style: italic;
+}
+
+
+@media(min-width: 800px){
+
+ .actor-info{
+ text-align: left;
+ padding-top: 0;
+ }
+ .actor-info .actor-misc-info{
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: 0;
+ }
+}
+
+
+@media(max-width: 450px){
+ .actor-misc-info{
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ .actor-misc-info li:nth-child(2){
+ margin: 0.8rem 0;
+ }
+}
\ No newline at end of file
diff --git a/actor.html b/actor.html
new file mode 100644
index 0000000..5a70f43
--- /dev/null
+++ b/actor.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
+
+
+
+ Movie
+
+
+
+
+
+
+
+
+
+
+