Exercise 3 - Solution | Sigma Web Development Course - Tutorial #32

Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/Cod...
➡️ Notes and CheatSheets: www.codewithha...
➡️ English Subtitles are now up for all the videos!
Download UltraEdit Trial for Free: bit.ly/UltraEd...
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
Download UltraEdit Trial for Free: bit.ly/UltraEd...
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithha...
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉

[@HashimAli258]

Harry Bhai God bless you,
I want to inform you that you can use 'm0' for margin or 'p0' for padding instead of 'm:0' or 'p:0'

[@M_R_H_Rokib]

yah i use it too

[@user-pe5cs5gb2w]

nice tip

[@CodeWithHarry]

Wow nice! I honestly didn't know about 'm0' and 'p0'.
It's always great for me to pick up new tricks daily that make coding more efficient. Appreciate it!

[@shadowslayer2115]

I know about this trick 😏

[@UpgradingNepal]

Use m0+p0 😂😂

[@nealkumar8070]

#SIGMABATCH0P
PLZ DO NOT STOP THIS COURSE ..... IT IS A+++++ COURSE . LOVE YOU HARRY BHAI

[@billionairem4fia]

we r waiting for javascript

[@nealkumar8070]

@@billionairem4fia yup

[@manoyal]

How will this sigma batch Javascript portion differ from Ultimate javascript playlist? Is it better to learn js from this one, or go through Ultimate Js???@@billionairem4fia

[@ShakeelAhmad-xg8or]

Congratulations 🎉🎉 all for 32 days consistency ❤❤❤

[@harshithar1647]

Harry Bhai ke samne koi bol sakta hai kya Harry bhaiiiiiiiiiiiiiii

[@bhaveshjoshi5234]

Bhai ne history likh di hai.....
Down to earth Banda hai down to earth..... Harry bhai....... Aeeeeeee..😂😂

[@saugaat3239]

Mai

[@jogendrajangidBarmer]

Ek no. Bhai 😝

[@sayantan2.1shorts50]

#SigmaBatchOP

[@CodeWithAnbi]

😂😂😂ayyyyyy

[@myaccount3062]

Today I have completed 100 videos of python ,and I am very happy for that.
I learned a lot from these videos, so code with Harry, salute to your passion.🎉

[@sultanurrahmanshuvo9921]

bro does this python course includes data science topics? I know harry vai is a genius and I am about to start but in confusion because I need a course where i can learn data science topics

[@user-fw3ff2tj5z]

@@sultanurrahmanshuvo9921I am also on his python course but its not based on data science...I also need a playlist from harry vai related to data science ...Lets insist him requestly...

[@firenub]

@@sultanurrahmanshuvo9921no

[@Hafijur0211]

🎯 Key Takeaways for quick navigation:
00:00 🏆 *The instructor praises viewers for their solutions in Exercise 3, expressing pride and appreciation.*
01:18 🎨 *The instructor starts designing a card in HTML and CSS, focusing on background colors, dimensions, and border radius.*
03:37 🖌️ *The card design involves capsules, content, and styling, with an emphasis on avoiding the use of flexbox in the challenge.*
07:41 🧰 *The instructor demonstrates adjusting padding, font size, and styling details to achieve the desired card layout.*
11:55 🌐 *The video covers creating a button with styling, hover effects, and cursor settings.*
16:36 🚀 *The instructor showcases creating multiple cards using display flex and encourages viewers to experiment and customize designs.*
17:58 📢 *Shoutouts are given to viewers who successfully solved the exercise, emphasizing the importance of functional code.*
Made with HARPA AI

[@bhavishyamusaddi9433]

Sigma Batch Op ❤. Many Thanks and well wishes Harry Bhai.

[@muhammadsulemanmarfanikiba4136]

waqai bht zabardust bhai bht achy aur asaan tareeky sy ap ny card bna diya aur ap jese coding kr rhe thi na mujhe bht indar sy khushi ho rhi thi

[@TejasWasnik]

Tutorial 32 done.✅
SIGMA BATCH OP!

[@aamish.iqbal01]

Harry sir It's my humble request that shoutout should be given to those who solve the exercise not to those who only comment "Challenge Accepted" and did not solve the exercise .😞

[@nareshbohara35]

Tutorial - 32 Done✅
#Sigma Batch OP
Really amazing Course❤‍🔥
Watching from Nepal
Lots of Love Harry Bhai 💚

[@mohdtanveeralam3000]

17:50 💗💗
Thanks Harry Bhai for Shout out

[@prajwalpoojary3324]

Mujhe Diya hi nahii 😢😢😢😢

[@prajwalpoojary3324]

#HTML


Exercise 03-Card design

* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
padding: 12px;
}
h1 {
text-align: center;
padding: 12px;
}
.card {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
padding: 12px;
background-color: transparent;
width: 20%;
margin: auto;
border-radius: 8px;
}
.img {
background-color: transparent;
border-radius: 8px;
overflow: hidden;
}
.img img {
width: 100%;
box-shadow: rgba(21, 22, 22, 0.5) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.main {
margin-top: 10px;
height: 55%;
width: 100%;
position: relative;
}
.btns1 {
padding: 2px;
}
.btn1 {
padding: 2px 15px;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
.margin {
padding: 0px 9px;
}
.head h2 {
padding: 10px 0px;
}
.btn1_2 {
border-radius: 4px;
background-color: #f0f0ed;
}
.btn2 {
color: rgb(46, 35, 134);
padding: 2px 10px;
}
.btns2 {
text-align: center;
margin-top: 10px;
}

The card design






Nature
Lake



Beauty of nature


Lorem ipsum dolor sit amet, consectetur adipisicing elit. At repellat quibusdam totam molestiae corrupti, fugit saepe voluptatibus quas odio provident ipsum qui in fugiat aspernatur aliquid quaerat eaque dolore animi nemo consectetur! Aliquid aut velit modi porro quasi expedita sed, molestias quisquam officiis harum illum quo magnam exercitationem sapiente consequatur dolorum est nam quam qui accusantium commodi fuga! Doloribus dolor accusamus, quo ratione adipisci laudantium nam vero aperiam! Illum similique accusantium quos, maxime eius ullam voluptatem magnam optio.




Read more

[@prajwalpoojary3324]

Bhai tell me how it looks 🙂😊

[@user-uq2qo1ml5v]

Harry bhaiya aap best ho❤

[@SigmaCoder.]

Sigma Harry Bhai ke sath
Sigma batch aur
Sigma web dev course
Kya baat hai yaar maja aa gaya..
#SigmaBatchOP..❤️🔥

[@vigneshn9050]

1 week 31 videos completed😊Entering 32nd video, best course ever taught by harry bhai

[@Mohit...990]

Bhai excersice se bhut help ho rhi hai

[@HackingandhackApplication]

Best course in the world ⭐⭐⭐⭐⭐

[@aamish.iqbal01]

At 18:35 and 18:49, my comment is there. I solved the exercise with full hopes that I will get a shoutout, but it was given to those who just commented, "Challenge accepted." This is not fair.😞😞

[@HarshDeswalJaat]

Bro, Don't be Sad. If you learn something that is important. 😊

[@aamish.iqbal01]

@@HarshDeswalJaat Thank you bro❤

[@tps8470]

Amazing

[@timus03]

Bro mene 2 year pahale aapka ka hi video dekha kar shikha huaa tha HTML & CSS
but Tora ab janng lag gaya tha but ab aapki video dekha kar oh janng nikhal raha hai so THANKS 😎🤏 Bro

[@HarshDeswalJaat]

Good Bro, Our country really needs you 😂😂 And also whole developer community

[@shivamverma2370]

It ggave me new approach to this problem

[@arthur_bell]

18:53 Bhai sharma gaye comment parh ke😅😅
Sigma Batch OP

[@ShubhVerma-CSE-ENGR]

And complete your Exercise Sir, thank you so much❤ aap ese hi exercise kerva te rheye Sir.... ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

[@swataheavenonearth8584]

Mashaa Allah great harry bhai❤❤

[@sameerpatel001]

congo for new chair

[@Debojyoti_Saha]

learnt a lot from the mistake love

[@sample__1099]

Harry Bhai Ka System hai Harry Bhaiiiiiiiiiiiiiiiiiiiiiiiiii

[@ManishKushwaha36]

0:19 Sigma Batch op.

[@SayantanOfficial-jq4mo]

Best course ever!!!

[@Its__AnkitSahu]

Sigma Batch is really OP

[@khabar_abtak]

awesome course

[@dcsalim4384]

Sigma batch OP! 🔥

[@Hey.parthhh]

harry bhai sach mei aap bahut acche teacher hoo app

[@mayanksharma_WebDeveloper]

Sigma Batch OP.

[@mohdtanveeralam3000]

Sigma Batch is OP 🔥🔥

[@ShubhVerma-CSE-ENGR]

Sigma Batch OP❤❤

[@hiphop861]

#SigmaBatchOp
Thank you harry sir for this course.

[@Void_V0rtex]

Harry Bhai Small Request..Please could you release the videos a bit sooner during the day? Because late at night it might become uncertain and not feasible..you might have your reasons but it's just my request 🙏
#SigmaBatchOP

[@user-mw1pt9xg3p]

Yes, me too, but he may have more work to do since he is also a developer so he may need to carry out his day-to-day activities.

[@prohegde006]

Sigma Batch OP
Harry Bhai OP

[@jamberkam282]

i have also done exercise three and trying to make it responsive now

[@sameershahidbutta]

Sigma Batch OP! Tutorial 32 done.

[@rahulbajwa430]

my mental health right now
someone : - harry bhai se coding sikhi hai kya
me :- no ... harry bhai se coding sikhi hai

[@praveshbhatt7042]

#SigmaBatchOP🔥🔥🔥🔥

[@saymarizvi6481]

Good course !!! more practical :D

[@kpworld422]

i love this course . respect harry bhai

[@muhammadsuhaibraza784]

Harry Bhai ap wordpres par latest course in one video bano. Bohot help ho gi ham sab ki jo WordPress Mai naye hain.

[@ezeslucky]

Harry bhai Java ki DSA viedo banaoo na

[@siddheshdatkhile2106]

Ram ram bhai saryane ,🙏
Sigma webdevelopment day 32 me apka swagat he ❤🎉
Thank you harry bhai ❤
#SigmaBatchOp

[@GAMER-os2jb]

Sigma Batch OP
❤❤

[@varadcg_01]

Sigma Batch Op 👍👍👍👍

[@patiljitendra2272]

Sigma batch op❤❤❤

[@diamondmindexclusive]

Best teacher ever🎉

[@Asim_Ali4857]

Thanks a lot sir for uploading such amazing content on RUclips

[@AbhijeetJaiswal_27]

It took me 3 hrs
and u did it in 15 minutes
now I am not feeling good about it

[@animeshbera658]

harry bhai on fire

[@m-series0001]

15:00 bhai badiya explain 😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂

[@LogicArena01]

Salute to your hardwork..sigma batch op🎉🎉

[@user-vw9lv2hu5m]

Sir I am not watching this tutorial on web developement but I found it is the best place to post this comment because you may be active on seeing the comments of I am requesting you from the core of my heart to please make a big tutorial on M.L. which will cover the topics of supervise, unsupervised and most importantly REINFORCEMENT in a vast manner

[@nitinsaxena3082]

❤ I solve it Harry bhaiya
Aapne shout out Diya but code nahi check Kiya 😊

[@rahulagravat5030]

Muje short out bhi nai mila
Me bhi card banaya tha😢

[@HarshDeswalJaat]

Bro I make card and mai tum dukhi atama ko dekh kar enjoy kar rha hu. Jo iss bat se dukhi hai ki Harry ne shout out nhi diya. Kya aap log janam se chutiya ho ya bad me ho gye

[@rahulagravat5030]

@@HarshDeswalJaat bas tumhari mammy se puchh lena

[@sahilmaharjan4010]

Sigma Batch OP⭐⭐⭐⭐⭐

[@sajjadbinshawoon8075]

Yeh sab toh thik hain but computer hi nehi hain , mobile se Koshish kar Raha hoon😂 par lagta nehi hoga mobile se😅 BTW ❤ from 🇧🇩

[@Metheeboss]

Harry bhai is real sigma

[@MamtaKumari-tg9jl]

Thank you 🙏🙏

[@coffeebooks7110]

Back after 7 days break.
Sigma batch OP☆

[@LetsCode12046]

i am late but consistency maintained || I am watching now 32no. video

[@user-vt7ky6xm9m]

Awesome Content !!!

[@nishil795]

very simple approach :

[@BulkeshSinhmar7]

how to run code and browser simultaneously in vs code please tell me this will help me so much

[@LearnEnglishMM]

Hello bro,
I hope you are doing well.
I am Mufeedullah Mamozai, from Afghanistan.
I watch your coding videos on Java and html and have accessed the playlists.
Bro, please try to avoid using long subtitles because they block the entire screen; we can’t see anything then.
I hope you get it.
Thanks bro!

[@strugglerbuddy9063]

sigma op but harry bhai is super op

[@codewith_s.k]

Sigma batch op 🎉🎉

[@Sabach993]

Sigma batch op ❤

[@XGamer-unknown]

SIGMA BATCH OP ❤❤❤❤

[@MAD2ON_Talkroaster]

Harry bhai is emotion ❤
Harry bhai ke aage koi bole sakta hai kya...
Harry bhia 😂

[@user-wu4bc7ox5o]

harry bhai you showed me my potential power

[@kusummehra-]

Sigma batch OP😍

[@malik_official_78]

your are great harry bro

[@Ashish...114]

Dhanki accepted 🙂💝 Harry bhai ❤️‍🔥

[@Stark7_World]

Sigma batch op❤

[@aaravdb1035]

Sigma batch OP 🔥!

[@rjraj5512]

I use to design this without watching solution i used position everywhere display flex and many more thing that increase my CSS code

[@sabirpathan430]

Sigma batch OP
Jai ho Harry bhai ❤

[@user-dr4sy8vd4u]

Sigma Batch OP 🔥

[@probaadshah1542]

Sigma Batch OP

[@NOT_OFFICIAL325]

#Doubt U explained about web vitals in earlier videos but u didn't told how to fix them. Can u dedicate a video about it.
#SigmaCourseOP

[@Rizwan12203]

body{
background-color: rgb(150, 189, 223);
}
.box{
background-color: white;
align-items: center;
margin-left: 200px;
margin-top: 25px;
margin-right: 67%;
border-radius: 25px;
}
.box img{
margin-left: 22px;
margin-top: 20px;
border-radius: 20px;
}
.box h1{
margin-left: 25px;
}
.box p{
margin-left: 25px;
}
.box button{
color: blue;
background-color: skyblue;
border-radius: 20px;
margin-left: 80px;
margin-top: 34px;
margin-bottom: 25px;

}



Lago di breies
Lorem ipsum dolor sit amet
Read More

[@deepnamdev4740]

it took me 2 days to make this 🥺

[@parvezahmad4210]

good
very good

[@maria.mehwish]

mujhe to shout out mila nhi
khair
Sigma Batch Op

[@Muhammadkamran-lp1ig]

Sigma batch is op❤

[@altamash_sayz]

#sigmaBatchop🎉 HARRY BHAI 😊

[@ranatariq8638]

Always great 👍👍👍

[@Ravimandal952]

Sigma batch is op❤❤❤

[@42ankitakri.sharma58]

Big fan #sigmabatchop

[@muhammadasad2184]

Sigma Batch OP ❤

[@Gayatri_shejule]

Thank you sir 😊

[@ujjwalssharma8149]

Harry bhai plz yeh bta do , ki agar padding vagera ki jagah simply position ko relative krke elements idhar udhar krde toh koi problem hai ?? I mean aisa krna se mera kaam jaldi hojata hai aur easily bhi , suppose iss exercise me jo read more vala button tha , usko beech me lana kaafi easy hogaya position badalne se comparatively padding vagera badalne se

[@Abhishek12762]

Sigma batch op 😊❤️

[@coders-heaven]

harry bhai please give me a source code to build a fully functional 3by 3 by 3 rubix cube in html css javascript

[@nomaanrizvi6561]

sigma batch op🔥