Видео

------ HTML CODE --------- <h2 class="timeline-heading">Journey of WSTech</h2> <p class="timeline-subheading">Starting from Year 2020</p> <div class="timeline"> <div class="timeline-item"> <div class="timeline-icon"></div> <div class="timeline-content"> <h3>2020: Inception</h3> <p>WSTech was founded in 2020 with a vision to deliver cutting-edge software solutions. The team started with a small group of passionate developers.</p> </div> </div> <div class="timeline-item"> <div class="timeline-icon"></div> <div class="timeline-content"> <h3>2021: First Major Project</h3> <p>Secured our first major project: a custom CRM solution for a multinational client, establishing WSTech as a reliable partner in software development.</p> </div> </div> <div class="timeline-item"> <div class="timeline-icon"></div> <div class="timeline-content"> <h3>2022: Team Expansion</h3> <p>Expanded the team to 50+ employees, including developers, designers, and project managers. Introduced new technologies like React.js and Node.js.</p> </div> </div> <div class="timeline-item"> <div class="timeline-icon"></div> <div class="timeline-content"> <h3>2023: Global Reach</h3> <p>Opened our first international office and started catering to clients worldwide, including the USA and Europe, enhancing our global footprint.</p> </div> </div> </div> ----------------------------------- CSS CODE --------- .timeline-heading { text-align: center; font-size: 28px; margin-bottom: 10px; font-weight: bold; } .timeline-subheading { text-align: center; font-size: 18px; margin-bottom: 30px; color: #555; } .timeline { position: relative; margin: 0 auto; padding: 20px 0; width: 100%; } .timeline::before { content: ''; position: absolute; width: 4px; background-color: #ddd; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); } .timeline-item { position: relative; margin: 20px 0; padding-left: 60px; width: 50%; } .timeline-item:nth-child(odd) { left: 0; } .timeline-item:nth-child(even) { left: 50%; } .timeline-icon { position: absolute; top: 10px; left: -30px; width: 20px; height: 20px; background-color: #d7272a; /* Adjust this color as needed */ border-radius: 50%; } .timeline-content { padding: 15px 20px; background-color: white; border: 1px solid #ddd; border-radius: 8px; } .timeline-content h3 { margin-top: 0; font-size: 20px; color: #333; } .timeline-content p { margin: 0; color: #666; } @media screen and (max-width: 768px) { .timeline { padding: 10px 0; } .timeline-item { width: 100%; padding-left: 40px; margin-left: 0; } .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; } .timeline::before { left: 20px; } .timeline-item .timeline-icon { left: 10px; } .timeline-content { text-align: left; margin-top: 10px; } } ---------------------

It’s really easy to use. Thanks!! 🙏🏻

---------- Simple Custom CSS and JS- Plugin ---------- Copy & Paste the Code as it is- ---------------- HTML Code: <!-- HTML --> <div class="social-media-bar"> <a href="facebook.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/pngtree-facebook-icon-facebook-logo-png-image_3566129.png" alt="Facebook"> </a> <a href="twitter.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/x.avif" alt="Twitter"> </a> <a href="instagram.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/instagram.jpg" alt="Instagram"> </a> <a href="linkedin.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/LinkedIn.png" alt="LinkedIn"> </a> </div> ---------------- <!-- CSS --> .social-media-bar { position: fixed; top: 50%; right: 20px; /* Distance from the right edge */ transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; /* Space between icons */ z-index: 1000; /* Ensure it stays on top */ } .social-media-bar .social-link { display: block; transition: transform 0.3s ease; /* Smooth hover effect */ } .social-media-bar .social-link img { width: 40px; /* Adjust icon size */ height: 40px; } .social-media-bar .social-link:hover { transform: scale(1.1); /* Slightly enlarge on hover */ } @media (max-width: 768px) { .social-media-bar { right: 10px; /* Slightly inwards on smaller screens */ } } /* You can remove the below lines of code if you want to display it on all devices */ @media (max-width: 480px) { .social-media-bar { display: none; /* Hide on very small screens . */ } } --------------------------

----------- /* Target small screens (768px or below) */ @media (max-width: 768px) { /* Assuming columns have classes .column1 and .column2 */ .elementor-row { display: flex; /* Ensure flexbox layout */ flex-direction: column; /* Stack columns vertically */ } .column1 { order: 2; /* Moves the first column to the second position */ } .column2 { order: 1; /* Moves the second column to the first position */ } } ``` *Please Note:* You can define more than one breakpoint as needed; in this example, we have used 768px. *Classes Used:* - .elementor-row - .column1 - .column2 ---

This made popups easy 🤩 thank you 😊

Helped a lot, thanks 👍

So simple, love it! 😊

Great tutorial, very clear! ...Thanks

---------- Simple Custom CSS and JS- Plugin ---------- Copy & Paste the Code as it is- ---------------- HTML Code: <!-- HTML --> <div class="social-media-bar"> <a href="facebook.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/pngtree-facebook-icon-facebook-logo-png-image_3566129.png" alt="Facebook"> </a> <a href="twitter.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/x.avif" alt="Twitter"> </a> <a href="instagram.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/instagram.jpg" alt="Instagram"> </a> <a href="linkedin.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/LinkedIn.png" alt="LinkedIn"> </a> </div> ---------------- <!-- CSS --> .social-media-bar { position: fixed; top: 50%; right: 20px; /* Distance from the right edge */ transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; /* Space between icons */ z-index: 1000; /* Ensure it stays on top */ } .social-media-bar .social-link { display: block; transition: transform 0.3s ease; /* Smooth hover effect */ } .social-media-bar .social-link img { width: 40px; /* Adjust icon size */ height: 40px; } .social-media-bar .social-link:hover { transform: scale(1.1); /* Slightly enlarge on hover */ } @media (max-width: 768px) { .social-media-bar { right: 10px; /* Slightly inwards on smaller screens */ } } /* You can remove the below lines of code if you want to display it on all devices */ @media (max-width: 480px) { .social-media-bar { display: none; /* Hide on very small screens . */ } } --------------------------

---------- Simple Custom CSS and JS- Plugin ---------- Copy & Paste the Code as it is- ---------------- HTML Code: <!-- HTML --> <div class="social-media-bar"> <a href="facebook.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/pngtree-facebook-icon-facebook-logo-png-image_3566129.png" alt="Facebook"> </a> <a href="twitter.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/x.avif" alt="Twitter"> </a> <a href="instagram.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/instagram.jpg" alt="Instagram"> </a> <a href="linkedin.com" target="_blank" class="social-link" rel="noopener"> <img src="demo.wstech.in/wp-content/uploads/2024/09/LinkedIn.png" alt="LinkedIn"> </a> </div> ---------------- <!-- CSS --> .social-media-bar { position: fixed; top: 50%; right: 20px; /* Distance from the right edge */ transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; /* Space between icons */ z-index: 1000; /* Ensure it stays on top */ } .social-media-bar .social-link { display: block; transition: transform 0.3s ease; /* Smooth hover effect */ } .social-media-bar .social-link img { width: 40px; /* Adjust icon size */ height: 40px; } .social-media-bar .social-link:hover { transform: scale(1.1); /* Slightly enlarge on hover */ } @media (max-width: 768px) { .social-media-bar { right: 10px; /* Slightly inwards on smaller screens */ } } /* You can remove the below lines of code if you want to display it on all devices */ @media (max-width: 480px) { .social-media-bar { display: none; /* Hide on very small screens . */ } } -------------------------- ---------------

Thank you this fixed my problem.

Great job! The solution worked perfectly with just one click. Thanks a ton! Waiting for more. Stay blessed!"

It's working. It's a one-click solution. Thanks, it really helped. Please make more videos like this. God bless!

Hey everyone, thanks for watching this how to duplicate a page in wordpress video. Don't forget to like and subscribe!

Hey everyone, thanks for watching this How to Change Your Logo on Scroll with Elementor video. Don't forget to like and subscribe! Enjoy!

---------- Pro elements URL: proelements.org/ Simple Custom CSS and JS- Plugin ---------- Copy & Paste the Code as it is- ---------------- HTML Code: <div class="header1"> <img src="demo.wstech.in/wp-content/uploads/2024/08/Flutter-1-removebg-preview.png" class="logo1" alt="Logo 1"> <!-- Replace Your own images paths --> <img src="demo.wstech.in/wp-content/uploads/2024/08/Angular__1_-removebg-preview.png" class="logo2" alt="Logo 2"> </div> ---------------------- CSS section. Path->Edit container->Advance tab-> Custom CSS. CSS CODE: ---------------------- .header1 { background-color: transparent; transition: background-color 0.3s ease; height: 80px; /* Adjust this value to control the header height */ line-height: 80px; /* Aligns content vertically */ display: flex; align-items: center; justify-content: space-between; /* Ensure space between logo and menu */ padding: 0 20px; /* Optional: Add padding for spacing */ } .header1.sticky { background-color: black; /* Change to black on scroll */ height: 50px; /* Adjust the height on scroll if needed */ line-height: 50px; } .header1 img { height: 100%; /* Ensures the logo scales with the header height */ } .logo2 { display: none; } .header1.sticky .logo1 { display: none; } .header1.sticky .logo2 { display: inline-block; } .header1.sticky { background-color: black; /* Change header background color on scroll */ } ---------------------------- JS Code. window.onscroll = function() { var header = document.querySelector('.header1'); if (window.pageYOffset > 0) { header.classList.add('sticky'); } else { header.classList.remove('sticky'); } }; --------------------------

Bahaut aach

,👍👍👍👍

Thanks for creating such informative videos, looking forward for more 👍

---------- Path: Wordpress Dashboard -> Customizer -> Additional CSS ---------- Copy & Paste the Code as it is- ---------- /* To make full screen(responsive) through css */ html, body { max-width: 100% !important; overflow-x: hidden !important; } ----------

Great !! Very helpful video! Thanks 😊

Its really easy, Its working, Thank you so much

Eid Mubarak

Happy Yoga Day

No ❤❤

🕉️🛕🙏

🤗 "PromoSM"

*promo sm*

💖 *promo sm*