Part 2 : How to Make Website Responsive | Starbucks Landing Page Website Design using Html CSS & Javascript
Watch This : https://youtu.be/HXKNedyDbNE
——————
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D
Another Course : Build Complete Real World Responsive Websites from Scratch
https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E
——————
Join Our Channel Membership And Get Source Code of My New Video’s Everyday!
Join : https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/join
——————
Patreon : https://www.patreon.com/onlinetutorials
Facebook Page : https://www.facebook.com/onlinetutorialsYT
Instagram : https://www.instagram.com/onlinetutorials_youtube
Twitter : https://twitter.com/OnlineTutoria16
Website : http://www.onlinetutorialsweb.com
Buy Me A Coffee : https://www.buymeacoffee.com/onlineTutorials
——————
give proper credit if you repost this on other social media platform
——————
image source & Attribution
————-
Img 1 : https://freepngimg.com/png/77325-frappuccino-drink-chocolate-starbucks-matcha-white
Img 2 : https://freepngimg.com/png/62115-tea-coffee-drink-starbucks-latte-free-download-image
Img 3 : https://freepngimg.com/png/62120-coffee-frappuccino-drink-latte-starbucks-unicorn
Image Download Link : https://drive.google.com/drive/folders/1OOjAy4cfM5tDKceT8-bEI5M78_98iRLV?usp=sharing
——————
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
source
Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1
its working. thank you
Really outstanding effort ❣❣❣
Nice tutorial!! How can I make this responsive?
im stuck in javascript T_T
Keren
This tutorial is just the best but I’m having a little challenge with the JS, seems the code is not working. Please can you help look up to this?
What is that application name
12.53
Deu quase tudo certo! kkk
Excelente Tutorial <3
_______________________
Não conseguir executar de forma automática a parte do javescrip!
Ao passar o mouse em cima dos copos no rodapé, não há troca automática das imagens e cores do circulo.
Já revisei todo o código é não consigo entender o porquê não ter dado certo!
Se alguém puder me ajudar agradeço demais!!!
no me funciona la ultima parte que cambia las fotos alguno sabrá la razón?
el codigo:
<section>
<div class="circle"></div>
<div class="barra">
<header>
<a href="inicio.html"class="logo"><img class="logoo" src="logo.JPG"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Buils</a></li>
<li><a href="#">Tecnic</a></li>
<li><a href="#">Reddit</a></li>
</ul>
</header>
</div>
<div class="content">
<div class="textBox">
<h2>No es solo un juego<br>Es <span>Minecraft</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<a href="#">Learn more</a>
</div>
<div class="imgBox">
<img src="steve.png" class="stevet">
</div>
</div>
<ul class="thumb">
<li><img onclick="imgSlide('steve.png')" class="stevee" src="steve.png" height="100px" width="100px"></li>
<li><img onclick="imgSlide('alex.png')" src="alex.png" height="100px" width="100px"></li>
</ul>
<div class="redes">
<ul class="sci">
<li><a href="#"><img src="ig.png" height="40px" width="40px"></a></li>
<li><a href="#"><img class="im" src="face.png" height="35px" width="35px"></a></li>
<li><a href="#"><img class="im" src="tw.png" height="35px" width="35px"></a></li>
</ul>
</div>
</section>
<script type="text/javascript">
function imgSlider(anything){
Document.querySelector('.stevet').src = anything;
}
</script>
graciaas
Hello I tried this code for webpage but somewhere it is giving me error in javascript 'cannot set properties of null(setting src) at imgSlider' this is the error msg while coding in onclick function…I tried to solve but I am not able to solve plzz solve this query
Music name please ?
I love how the page turned out!! I’d use semantics more though. It’s a bit messy with all the divs.
You are tough and deadly
why my starbucks pic wont change i already do the imgSlider??
awsome
So cool, Thanks!
thanks man!
Thanks bro 👍
Wonderful tutorial
This is so good!!
awesome video!
.
.
.
.
.
7:00
Love the mexican track
Viva México !