Creating an Animated & Responsive Movie Website Landing Page | HTML, CSS & javaScript, Carousel

Поделиться
HTML-код
  • Опубликовано: 30 окт 2024

Комментарии • 116

  • @rutesouza4055
    @rutesouza4055 Год назад +18

    You have the best tutorials ever! Easy to understand and even more to follow. Now I'm addicted to all your projects 😆 Thanks for your amazing work 👍

    • @DStudioTechnology
      @DStudioTechnology  Год назад +2

      Thank you so much for your kind words! I'm thrilled to hear that you're enjoying my tutorials and finding them easy to follow. It's wonderful to know that my projects have sparked your interest and enthusiasm. Your support means a lot to me! Keep up the great work and happy crafting! 👍😊

  • @easywebsolution7044
    @easywebsolution7044 7 месяцев назад +3

    Great Carousel Slider. I tried and it work fine. Thanks.

  • @DStudioTechnology
    @DStudioTechnology  Год назад +7

    Hi everyone, I put the image source in the description, you could download them if you like to code along~
    Images used in the video:
    drive.google.com/drive/folders/1acLszq2fWG4icbcFJ9lRH4qxaLdeOkSl?usp=sharing

    • @SmartHustleMedia
      @SmartHustleMedia 5 месяцев назад

      Sir can this website be approved by adsense ?
      if so
      Can u make a tutorial on how to link the website to adsense and be able to place ad break on the movies....
      I'll be waiting for your reply sir..

  • @SasiKumar-be1yq
    @SasiKumar-be1yq 7 месяцев назад +1

    Nice and wonderful tutorial ❣️💫

  • @funboy2154
    @funboy2154 4 месяца назад +1

    Thanks Bro just now I am learning css your video helps me to learn more and more

  • @carlosarielhuampoplatero5914
    @carlosarielhuampoplatero5914 7 месяцев назад

    Excellent tutorial, you are a genius brow... I followed all the steps and there is nowhere to get lost, excellent... but sorry you didn't include the responsive one, could you help me, please try to do it my way but I can't do it, please help me.

  • @ogechiochonogor7078
    @ogechiochonogor7078 9 месяцев назад +3

    hi, i have an issue. when i introduce carousel to my code it displaces the positioning of the nav bar and search bar and i dont know why nor how to resolve it

    • @aliftawfiquealif
      @aliftawfiquealif 5 месяцев назад

      same bro

    • @aliftawfiquealif
      @aliftawfiquealif 5 месяцев назад

      Dude do this .
      search-bar input{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color: #ffffff;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.5);
      outline: none;
      border-radius: 4px;
      padding: 0 10px 0 45px !important;

  • @rodrigodesousa7160
    @rodrigodesousa7160 8 месяцев назад +1

    Amazing!!! Thanks!!

  • @janiosouza759
    @janiosouza759 5 месяцев назад +1

    Acabou de ganhar mais um escrito no canal.🇧🇷🇧🇷🇧🇷

  • @classicdrumpercussion1608
    @classicdrumpercussion1608 6 месяцев назад +2

    very beautiful

  • @_LeHuynhDuyKhai
    @_LeHuynhDuyKhai 3 месяца назад +1

    nice video

  • @ai-bloggers
    @ai-bloggers 6 месяцев назад +1

    Thank you very much. Very cool!

  • @Chamber-w8j
    @Chamber-w8j 5 месяцев назад +1

    what is the title in javascript for?
    where is to elemet for title in html?

  • @lvovich_biz
    @lvovich_biz 6 месяцев назад +1

    It is great🎉

  • @ნიკოლეონიძე

    Do you know why jquery and cdnjs don't work?

  • @mutofytech6193
    @mutofytech6193 6 месяцев назад +1

    This amazing ❤

  • @Algoritimo-vg4sq
    @Algoritimo-vg4sq 11 месяцев назад +1

    Fantastic

  • @ghulamahmadabdillahroyan1867
    @ghulamahmadabdillahroyan1867 4 месяца назад

    i have issue,when i code why home and search symbol didnt appear,i code same like u

  • @henr2000
    @henr2000 4 месяца назад

    great tutorial, I have a question is there any way you can use and embed video from youtube with ?

  • @gerardopacheco9521
    @gerardopacheco9521 Год назад +1

    very nice bro!!👍👍👍👍👍

  • @CodingW3
    @CodingW3 Год назад +1

    Wow! 😊

  • @Darshanpatil-t7i
    @Darshanpatil-t7i Год назад +3

    oh man thank you this is what i was looking for 😍

  • @Desperate_lad
    @Desperate_lad 7 месяцев назад

    bro can you plz tell me what you did in last those classes you gave each content what are those for and how do i use forEach() function

  • @victoro3321
    @victoro3321 Год назад +1

    Nice tutorial, would've love if it's complete.

    • @DStudioTechnology
      @DStudioTechnology  Год назад +1

      Hey Bro, thanks for the support, you could check the complete movie web built by React.js here:
      ruclips.net/video/0mdjgQdQF1k/видео.html

  • @jkwilliams7148
    @jkwilliams7148 Год назад

    I think if you slowed this down it would be easier for me to follow along. I liked the project though. Good job!

  • @NCS8331
    @NCS8331 Год назад +1

    vera level bro 🥰

  • @imuhammadfit1898
    @imuhammadfit1898 Год назад

    heavy ❤

  • @BatalhaDiRAP
    @BatalhaDiRAP 7 месяцев назад

    Dude do you don't have the responsive part about this jobs ??

  • @gyanprakash-l3t
    @gyanprakash-l3t 7 месяцев назад

    i have ever seen that like project on you tube yet. this is very informative project of landing page and i enjoyed the project,i have finished overall done in all project but i have some issue in this project actually movie name not matched with carousel anyone help me how could we fix that

  • @fightforfitness2256
    @fightforfitness2256 Год назад

    Wow nice project. Thanks a lot.

  • @surge0613
    @surge0613 6 месяцев назад

    for some reason the other banners dont apear on mine blur square its wierd, i should go to sleep and see that tomorrow its 4 in the morning for me

  • @shadyhumourtv2503
    @shadyhumourtv2503 11 месяцев назад

    Im having trouble in doing exactly what you've just did. Once i put in the images to create fhe carousel on the right, it doesn't show at all but every other thing works...pls help.

    • @gyanprakash-l3t
      @gyanprakash-l3t 7 месяцев назад

      .banner .carousel-box{
      position: relative;
      min-width: 950px;
      display: flex;
      justify-content: center;
      align-items: center;

  • @Petrushev1000
    @Petrushev1000 5 месяцев назад

    When scrolling through the slider and reaching Ariel's picture, the left column is lost. class active

  • @MuhannadAhmed-ofl
    @MuhannadAhmed-ofl 3 месяца назад

    Software used?

  • @iamkaafir_
    @iamkaafir_ 8 месяцев назад +1

    Please try to create more landing page tutorial using html, css and js only.

    • @DStudioTechnology
      @DStudioTechnology  8 месяцев назад

      Hey bro, thanks for the feedback, please check out more landing pages with html, css and js at:
      ruclips.net/p/PLnICNFdxWbz6fo0vPGQl6bTNVmJbkZgM1

  • @ellenenriquez7282
    @ellenenriquez7282 7 месяцев назад

    Hi, How to edit or change the "watch trailer" videos for each movies? Btw i like your project!

  • @arijitchakraborty5605
    @arijitchakraborty5605 Год назад +1

    pls be continued this projects i really love this

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      Hi Bro, I did finalis the complete project but using React.js, because there are too many data mapping in the project. Check this out: ruclips.net/video/0mdjgQdQF1k/видео.html

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      Also, thanks a lot for the support~

  • @taiwodamilola6541
    @taiwodamilola6541 3 месяца назад

    I want to know if it is compulsory to link jquery

  • @AlexScaldaferri
    @AlexScaldaferri Год назад +2

    I've just purchased your code, nice work!
    Is it possible to play a different video trailer for each movie?

    • @DStudioTechnology
      @DStudioTechnology  Год назад +1

      Thanks for your support bro! Yes, there is way to do trailer for each movie, you need to prepare five trailer videos, and map the video data in html and javascript like how we map the movie description data in the content part, for example, giving each trailer video a class name that matches the movie name..., In the future videos, I will incur more advanced javaScript mapping functions to illustrate this, so keep watching and happy coding!

  • @AbdO-qf2sk
    @AbdO-qf2sk Год назад

    Bro please
    Why, when I click on the image, the background does not change?
    I think I wrote the codes by mistake. I did not understand their explanation. Is there a solution?

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      Hey bro, please double check if there are any potential typo in the code, for example, there could be missing period in the QuerySelector, or to see if the class name in the javaScript matches those in the html file~

  • @bloodyfanggaming6547
    @bloodyfanggaming6547 Год назад

    fabulous bro

  • @ARUNKARTHICKRAAJAKRSLCS
    @ARUNKARTHICKRAAJAKRSLCS 2 месяца назад

    Where i will get the javascript code

  • @sidakvats693
    @sidakvats693 8 месяцев назад +1

    Plz make the same project using react and tailwind

    • @DStudioTechnology
      @DStudioTechnology  8 месяцев назад +1

      Thanks for feedback, will try in the future project

  • @edpriceent
    @edpriceent 3 месяца назад

    can you create one that also has TV Series with Episodes??

  • @jjjjj...
    @jjjjj... 6 месяцев назад

    whats this scrolling effect type?

  • @adriandev6516
    @adriandev6516 Год назад

    Super 😊

  • @aniswatukhairani3729
    @aniswatukhairani3729 10 месяцев назад

    my carousel box position is below the movie info. how to make it in the rigt?

    • @devbyveritech
      @devbyveritech 9 месяцев назад

      Use
      .banner{
      display: flex;
      justify-content: space-between;
      }
      it'll do the work

  • @amanmangla5391
    @amanmangla5391 Год назад

    how can i get dropdown header menu in this template please help me in that?

  • @Newsroom180
    @Newsroom180 9 месяцев назад

    Why don't the movies play?

  • @ameeralhello
    @ameeralhello 8 месяцев назад +1

    I want this template . How can I get it ?

    • @DStudioTechnology
      @DStudioTechnology  8 месяцев назад

      Hi bro, source code links are in the description

  • @bargway5490
    @bargway5490 Год назад

    Movie to movie my background image is not changing only black background is displayed and other text image paragraph is also not displayed how to fix this problem plzz help😢

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      Please double check if you have included your script.js file in your index.html

    • @bargway5490
      @bargway5490 Год назад +1

      Okay everything is fine but it's is not responsive how to make it responsive plzz help🥺

    • @DStudioTechnology
      @DStudioTechnology  Год назад +1

      Hey mate, good to know you have solved the problem, you could try @media (max-width: 600px) {}, to set up the responsive design, and adjust paddings and flex direction to make it look good on mobile~~

  • @Sir_Ojimaojo
    @Sir_Ojimaojo 6 месяцев назад

    I really appreciate... I am trying to clone it
    please can I get a link to videos in the asset used in the code i.e star.mp4

  • @mikhaildolgov
    @mikhaildolgov 6 месяцев назад +1

    More )

  • @arslanliaqat1720
    @arslanliaqat1720 8 месяцев назад +1

    we need audio explanation , step by step !

    • @DStudioTechnology
      @DStudioTechnology  8 месяцев назад

      Sure bro, I realised that, so my recent videos are all with audio, check this out: ruclips.net/video/0mdjgQdQF1k/видео.html

  • @ErfanEbrahimi-i3v
    @ErfanEbrahimi-i3v 12 дней назад

    Ineed so

  • @Paul_Promise
    @Paul_Promise Год назад

    I can't find the Asset

  • @Modassarislamk
    @Modassarislamk 2 месяца назад

    provide some demo to test

  • @malithamalshan8390
    @malithamalshan8390 Год назад

    how to get your last copy paste js code

  • @batuGF
    @batuGF 10 месяцев назад

    Wordpress kurulum istiyorum olmuyor help

  • @preethi2128
    @preethi2128 2 месяца назад

    I loved it. But its not responsive

  • @ibrahimbelfakir5731
    @ibrahimbelfakir5731 Год назад

    Hey Bro How do I convert Templates html to be a website ?

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      Hey bro! Converting HTML templates to a website generally involves:
      Organize Files: Arrange your HTML, CSS, JS, and media files.
      Link CSS/JS: Connect CSS/JS files to HTML using and .
      Adjust Paths: Update image paths in HTML/CSS.
      Add Pages: Duplicate and rename HTML for different pages.
      Navigation: Update links for menus.
      Forms: Set up a backend for form handling.
      Testing: Check site on different browsers.
      Responsive: Use media queries for different devices.
      Hosting: Get domain, web hosting, upload files.
      This is a basic overview. Depending on your template and requirements, additional steps might be needed. Good luck, and have fun creating your website! 😊🌐

  • @vicecitytowersakyi5929
    @vicecitytowersakyi5929 Год назад

    please my contents are not changing but the background is

  • @Darkdevilintelugu
    @Darkdevilintelugu 9 месяцев назад

    I want movies website with admin panel

  • @debrune6888
    @debrune6888 Год назад

    How much you want to create one for me bro?

  • @AksharBhadja
    @AksharBhadja Год назад

    bro where did you find cdn js link??

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      You mean the Carousel? here it is: materializecss.com/getting-started.html

  • @ALWINDONALD
    @ALWINDONALD Год назад +1

    bro give a @media for all devices ,i have update how to give sepeate trailer for each movie

    • @DStudioTechnology
      @DStudioTechnology  Год назад

      Hey bro, glad you did it, also check out ruclips.net/video/mlQbYMrhul0/видео.html, it is about animated video bg~

    • @anshitasharma6415
      @anshitasharma6415 11 месяцев назад

      can u tell me how u give separate trailer for each movie

  • @jihaskb2009
    @jihaskb2009 6 месяцев назад

    Can you please do a website using html and css only which is not responsive. I am currently in a need of that . Pleaseeeeeeee 🙂🙂🙂🙂

  • @kaungyankaung3315
    @kaungyankaung3315 Год назад

    I writing code like u but it does not work .why?😢

    • @DStudioTechnology
      @DStudioTechnology  Год назад +1

      Hey bro, Double check, if the script.js file has been included at the end of html, also see if there are any potential typos, or missing period in the queryselectors.

    • @kaungyankaung3315
      @kaungyankaung3315 Год назад

      Oh sir,I found a mistake in the img title.THANK U SO MUCH.❤

    • @kaungyankaung3315
      @kaungyankaung3315 Год назад

      No Responsive? Sir

  • @harshitapanwar
    @harshitapanwar 4 месяца назад +4

    Sir actually I am facing a lot of issues. My background images doesn't change and also the video is not visible when i click watch button I also dm you on your Instagram id please help me

    • @theshaliniv
      @theshaliniv 3 месяца назад

      me too same problem i think javascript code is not applying but the code is fine i dont know hoe to solve this

  • @NP-gz2jc
    @NP-gz2jc Год назад +1

    Hi, I'm facing a problem in content and carousel box size and spacing between them... can you please help I even messaged in your Instagram account. I shared screenshots. please help😥😥this part 20:40

    • @DStudioTechnology
      @DStudioTechnology  Год назад +1

      Hey bro, I didn't receive any message at my ins account. If you encounter issues of sizing, it's probably because the web page looks different on different size of screen. easy way is to adjust padding and margins to make it look properly.

    • @NP-gz2jc
      @NP-gz2jc Год назад

      @@DStudioTechnology thank you. I will adjust padding and margins. Thanks again for this wonderful tutorial.