Это видео недоступно.
Сожалеем об этом.
Exercise 3 - Design this Card | Sigma Web Development Course - Tutorial #29
HTML-код
- Опубликовано: 23 окт 2023
- 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!
►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 😉😉
Bhupendra Jogi
@codewithharry pls explain the roadmap we are going to follow.
US mai Kahan kahan gye hai aap name bataiye
"Bhupendra Jogi " 🤣🤣🤣
Naam batao😂
Harry sir sachi batau to aisa course kisi ne nahi provide kiya just like you aisa lagata hai hamlogo se jaya aap mehnat kr rahe ho ak dam aisa lag raha hai ki koi ghar ki family ke padha rahe ho
us me kaha kaha gye h
Harry bhai do not get distracted from what people are saying about this course or about you. Just keep doing your work and we will also support you in this. And remember one thing that actions speaks louder than words.
.box{
border: 2px solid black;
margin: 726px;
padding: 32px;
border-radius: 15px;
}
.first,.second{
border: 2px solid black;
border-radius: 10px;
width: 10vw;
display: inline;
margin-right: 10px;
}
div >ul{
list-style: none;
display: flex;
font-weight: 200;
}
.list >ul>li{
display: inline-block;
border: 2px solid black;
border-radius: 100px;
padding: 9px;
margin:20px;
font-weight: 200;
margin-left: -6px;
font-size: 20px;
}
.hh2{
font-weight: 100;
opacity: 0.5;
}
.list2{
font-size: 18;
border: 2px solid black;
border-radius: 100px;
width: 9vw;
margin-left: 82px;
color: blue;
background-color: rgb(46, 135, 186);
}
div >img{
margin-left: -7px;
border: 1px solid black;
border-radius: 15px;
height: 310px;
width: 373px;
}
Nature
Lake
Lorem, ipsum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, laudantium nihil, maiores laboriosam est accusantium asperiores rem, possimus distinctio beatae dignissimos quibusdam fugit.
Read More
#HTML
Harry bhai i wasn't able to make an exact accurate card it was lacking many things but after putting my all and viewing the solution later i was able to clear a lot of my concept thanks for this exercise it helped a lot!
5:40 Don't worry Harry bhai , jo log kuch naya krte h , ye to unke liye normal si baat h ,hota h log accept hi nahi kr paate itna bada change or ye to poori industy me ek revolution h students ke liye, jo sachme kuch seekhna chahte h . You're doing such a great job Harry bhai Keep it up, We all are with you, ❤❤
#HTML
Give so much time to complete the card design
Exercise - 3 - Design the Card
.box {
height: 560px;
width: 355px;
border: 3px solid silver;
border-radius: 12px;
}
img {
height: 230px;
width: 335px;
border-radius: 25px;
padding: 9.5px;
}
a {
text-decoration: none;
color: silver;
font-weight: 600;
border: 1px solid silver;
border-radius: 25px;
padding: 3px;
margin: 7px;
}
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
/* font-size: large; */
padding: 2px;
margin: 10px;
}
p {
padding: 3px;
margin: 13px;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 1.3;
font-size: large;
font-weight:500;
}
.box1 {
border: 1px solid skyblue;
color: blue;
background-color: lightblue;
border-radius: 45px;
height: 33px;
width: 105px;
padding: 7px;
text-align: center;
margin: 20px;
margin-left: 95px;
font-weight: 800;
justify-content: center;
justify-items: center;
}
.red {
height: 35px;
margin-top: 10px;
}
Nature
Himalaya
Himalaya Range
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error molestiae assumenda quam veniam accusamus.
Voluptas odio accusantium impedit?
Read More
Best Video of you'r Channel, You are giving free course better than premium courses and your lectures are not borring also. Love you Sir!
@codewithharry u are simply awesome .. itni simplicity seh inta complicated content sikhana is not easy ... big fan
Mash Allah Outstanding Course
Harry bhai i feel same like what you said iam joined one of the Institute in hyd in that institute and the cost of that course was approx 20k and i feel shattered while watching your lectures and he cannot explain deep like you thanks bhai #sigmawebdevelopmentop
One of the best tutorial right now !
mai to hamesha koshish karta hu kai aap kai sary challenges complete kiya kru.
Great HARRY BHAI🤩
Harry Bhai kya kamal ka experience raha hai abhi tak... Thank u Harry Bhai
Thik hai Samaj Gaya Harry Bhai. Love From Bangladesh 😍😍😍😍
Thanks for making this course free and for providing an excellent content of web development on RUclips.
🎯 Key Takeaways for quick navigation:
00:00 📈 *Level of difficulty increases in Exercise 3, focusing on real-world implementation for web development.*
01:24 🚀 *Challenge to design a card using HTML and CSS based on a provided card.png image.*
02:17 📐 *Pay attention to image aspect ratio, dimensions, and color code to avoid disqualification.*
03:13 🛠️ *Discussion on creating the card using divs, image, captions, headings, and a centered button.*
04:38 🎉 *Share your solutions with the hashtag **#html** for a chanceto get a shoutout in upcoming videos.*
Made with HARPA AI
Thought exercise was impossible for me but after you explained it and I performed it i was able to create the card properly!
Challenge Accepted!! and completed it too!!
Tried to be as accurate as possible!😀
thank you soo much Harry Bhai!
5:34 kon he ye log😂 bhai course bohat mast he 10 on 10 he yr , mujhe kaafi kuchh seekhne mil rah he and maine bhi atleast websites ka layout banana to seekh hi lia he . Lots of love harry bhai 💝💝
Guys!! If you are confused to follow this course. I am telling you this type of course is worth it. don't confuse just follow this course.
Sigma batch OP
Proud to be Sigma Army.
Bhaiya kaafi sexy exercise thi! Abhi tak jo padhaya sb revise ho gya acche se. Thank you! ❤❤❤
challenge accepted and completed. Thanks Harry bhaiya, this one was fun
This course is useful than any paid course out there....
display: flex;
justify-content: center;
position: relative;
bottom: 150px;
width: auto;
height: auto;
/* border: solid; */
}
button{
border: 2px solid rgba(161, 161, 206, 0.771);
border-style: dashed;
border-radius: 20px;
background-color: rgba(161, 161, 206, 0.771);
padding: 7px;
text-align: center;
position: relative;
bottom: 35vw;
left: 20vh;
}
Bhai tell me what changes has to be done
Challenge accepted Harry bhai 🎉😊😊😊❤ 5:42
Challenge Accepted #html
* {
margin: 0;
padding: 0;
}
body {
background-color: #EBEEF1;
}
.main {
background-color: white;
width: 50vw;
min-height: 50vh;
margin: 30px 30px 0px 30px;
padding: 30px;
border: 1px solid black;
border-radius: 20px;
}
.main img{
border-radius: 20px;
height: 50vh;
}
.list ul li {
display: inline-block;
padding-right: 20px;
text-align: left;
margin-top: 20px;
font-size: 20px;
border: 1px solid rgb(110, 110, 110);
border-radius: 20px;
padding: 5px 15px;
}
}
.btn button{
margin-top: 20px;
background-color: #ABBFCC;
color: #437dc0;
border: none;
border-radius: 20px;
padding: 10px 20px 10px 20px;
text-transform: capitalize;
}
.text{
margin-top: 20px;
}
Nature
Lake
This is Dummy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In numquam
quo consectetur similique impedit. Cupiditate illum cumque pariatur
atque temporibus earum eveniet voluptatem.
Read more
.btn button{
position:absolute;
top: 88%;
left: 25%;
}
☝☝☝☝☝☝yeah or lg jaye toh maja ajayega
Document
* {
margin: 0;
padding: 0;
}
body {
background-color: #EBEEF1;
}
.container {
margin-left: 30vb;
position: relative;
top: 15vh;
left: 20vb;
}
.main {
background-color: white;
width: 30vw;
min-height: 0vh;
margin: 30px 30px 0px 30px;
padding: 30px;
border: 1px solid black;
border-radius: 20px;
}
.main img {
border-radius: 20px;
height: 100%;
width: 100%;
object-fit: cover;
}
.list ul li {
display: inline-block;
padding-right: 20px;
text-align: left;
margin-top: 20px;
font-size: 20px;
border: 1px solid rgb(110, 110, 110);
border-radius: 20px;
padding: 5px 15px;
}
.btn button {
margin-top: 20px;
background-color: #ABBFCC;
color: #437dc0;
border: none;
border-radius: 20px;
margin-left: 18vb;
padding: 10px 20px 10px 20px;
text-transform: capitalize;
}
.text {
margin-top: 20px;
}
Nature
Lake
This is Dummy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In numquam
quo consectetur similique impedit. Cupiditate illum cumque pariatur
atque temporibus earum eveniet voluptatem.
Read more
Theek hai Samajh gaya aur challenge bhi accept kar liya. Complete karke update karta hu aapko.
Done...
you are a good teacher.
Challange Accepted
Thik Hai smjha gaya
Challenge Accepted
Thik Hai smjha gaya
One question sir, what is the benefit in becoming a member of your channel sir?
nothing you can just show some support to him by paying
Thanku harry bhai itne ache se explain karne ke liye ❤
Harry bhaiya is the best or jo unki burai kre wo hai waste 😂
#HTML
Took me some time but after getting some help I was able to create it :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
width: 30vw;
background-color: rgb(253, 251, 243);
border-radius: 5%;
border: 1px solid chartreuse;
margin: 50px;
}
.card img {
height: 420px;
width: 420px;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 10px;
}
.btn {
margin-left: 15px;
}
.btn button {
background-color: rgb(128, 255, 0);
border-radius: 200px;
padding: 5px 9px;
margin: 10px;
border: 0.5px solid rgb(250, 7, 250);
cursor: pointer;
}
.topping {
margin-left: 18px;
}
.topping p {
color: deepskyblue;
}
.btn2 {
margin: 30px 170px;
}
.btn2 a {
background-color: #19f206;
padding: 10px 10px;
border-radius: 20px;
color: blueviolet;
font-weight: 200;
}
Dog
Cat
Dog
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
saepe iure, ex atque, possimus neque, consequuntur dolorum in amet
veritatis nesciunt tempore architecto!
read more..
Challenge Accepted...theek he samj gya😂
0:27 nailed it bro!🤣🤣
Just want to be capable enough financially and mentally so that I have the guts to spread this level of high quality premium content for free❤
Thank you Harry Bhai for inspiring everyday ❤
#SigmaBatchOP❤
Is coding important for electrical engineering?
YES
Challenge and accepted and completed.
Sir challenge accepted and done already
Harry...
You Creates Many Courses On Web So Can You Also Make Web3 Based Course......?
Hyy Harry....
Can You Make Course On Web3 Technology Because Your Audience and Me Wants To Up To Date On Technology....
And By The Way Alpha Name Should Be Best for Web3 😅
.button {
text-align: center;
}
.button button {
padding: 3px 10px;
border-radius: 10px;
background-color: rgb(198, 248, 250);
font-size: 13px;
color: rgb(68, 160, 200);
border: none;
font-weight: bold;
cursor: pointer;
}
.button button:hover {
background-color: rgb(55, 180, 184);
color: rgb(68, 160, 200);
}
.content h2 {
font-size: 24px;
}
.cap span {
font-size: 13px;
border: 2px solid gray;
border-radius: 9px;
padding: 3px 7px;
}
.cap {
padding: 0px 34px 0px 14px;
}
.content {
padding: 5px;
}
.content p {
font-size: 13px;
}
body {
background-color: rgb(202, 228, 236);
padding: 180px;
}
.box1 {
background-color: whitesmoke;
height: 344px;
width: 194px;
border-radius: 9px;
}
.imeg {
padding: 4px;
}
.imeg img {
border-radius: 8px;
}
Nature
Boat
Manas
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non accusantium vero sequi repellat ipsum
accusamus laudantium cumque harum tempore quod?
Read more
challenge accepted sir! . my website is not complete replica of it but is almost similar to it ! thank you for making this course .
Areyy harry Bhai ke Aage koi bol sakte hai Kya..harry bhaaiiii😂 (Arey harry Bhai pin kardo na)
Arrey bhai
Idar nahii
Voo toda chapri type lagta hai
Apna Harry bhai ko nahi. He is gem ❤😊
😂
Challenge Accepted
done
#HTML
Exercise 3: A card design
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d8cece;
}
.card {
width: 320px;
background-color: #fff;
border-radius: 15px;
border: 1px solid rgb(179, 168, 168);
margin: 60px;
}
.card img {
height: 200px;
border-radius: 10px;
margin-left: 9px;
margin-top: 9px;
margin-bottom: 17px;
}
.btn{
margin-left: 29px;
margin-bottom: 17px;
}
.btn button{
background-color: white;
border-radius: 10px;
border: 0.5px solid rgb(179, 168, 168)
;
padding:4px 8px;
cursor: pointer;
}
.heading{
margin-left: 9px;
}
.heading h2{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.heading p{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #ada5a5;
line-height: 19px;
margin-top: 10px
}
.btn2{
margin: 40px 110px;
}
.btn2 a{
background-color: #d8cece;
padding:8px 10px;
border-radius: 20px;
text-decoration: none;
color: blueviolet;
font-weight: 600;
}
Nature
Lake
A beautiful Lake.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam neque id ad magnam iusto totam
nulla, fuga deleniti repudiandae rerum! Porro, amet eius accusantium similique ullam adipisci
illum quaerat id!
read more
Great work bhai. Keep it up 💪
Where from you bro?
bro can you explain me y you used anchor tag inside button if button has already a property to redirect it
#HTML
CSS :-
* {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
height: 100vh;
width: 100vw;
background-color: azure;
display: flex;
align-items: center;
justify-content: center;
}
.card {
height: 60vh;
width: 20vw;
background-color: white;
border: 2px solid rgb(127, 126, 126);
border-radius: 10px;
display: flex;
justify-content: center;
padding: 10px;
flex-direction: column;
}
.img {
height: 40%;
width: 100%;
margin-bottom: 10px;
}
.img img {
height: 100%;
width: 100%;
border-radius: 10px;
}
.content {
margin-top: 10px;
height: 55%;
width: 100%;
}
.smlbtn {
padding: 5px;
font-size: 10px;
margin: 0 5px;
color: rgb(127, 126, 126);
border-radius: 10px;
border: transparent;
cursor: pointer;
}
div h2 {
margin: 10px 3px;
}
div p {
margin: 0 3px;
margin-bottom: 10px;
color: rgb(127, 126, 126);
}
.button {
display: flex;
justify-content: center;
}
.btn {
background-color: #93abd8;
padding: 7px;
font-size: 15px;
margin: 0 5px;
color: rgb(3 0 213);
border-radius: 10px;
border: transparent;
cursor: pointer;
}
HTML:-
Nature
Lake
Lorem ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, nisi. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Provident excepturi quo, autem harum pariatur
Read More
It is Amazing Bro.Keep It Up❤
halki si designig mai kami h thodi si..read more ka button card se baahar jaarha h baaki NICE CODE...
Hari bhai sirf frontend krwayege ya backend bhi
@@kuchbhikhilayo7963 Both.
@@kuchbhikhilayo7963backend bhi hoga bro just wait
Harry bhai ka bat hi alag he 😂😂
challenge accepted harry bhai
#HTML
ex-3(a) create a card by html css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d8cece;
}
.card {
width: 320px;
background-color: #fff;
border-radius: 05px;
border: 1px solid rgb(179, 168, 168);
margin: 60px;
}
.card img {
height: 195px;
border-radius: 20px;
margin-left: 27.5px;
margin-top: 12px;
margin-bottom: 17px;
}
.btn{
margin-left: 29px;
margin-bottom: 17px;
}
.btn button{
background-color: rgba(69, 13, 13, 0.638);
border-radius: 10px;
border: 0.5px solid rgb(231, 188, 188)
;
padding:4px 8px;
cursor: pointer;
}
.heading{
margin-left: 9px;
}
.heading h2{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.heading p{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #4a3b3b;
line-height: 20px;
margin-top: 10px
}
.btn2{
margin: 40px 110px;
}
.btn2 a{
background-color: #d8cece;
padding:8px 10px;
border-radius: 20px;
text-decoration: none;
color: blueviolet;
font-weight: 600;
}
Programming
Love
Love only programming
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam neque id ad magnam iusto totam
nulla, fuga deleniti repudiandae rerum! Porro, amet eius accusantium similique ullam adipisci
illum quaerat id!
read more..
#solution
.parent {
border: 2px solid rgb(222, 222, 225);
position: relative;
/* padding: 11px; */
width: 334px;
height: 630px;
border-radius: 20px;
margin: auto;
}
/* .box{
border: 2px solid black;
} */
.box img {
border-radius: 20px;
display: block;
position: absolute;
left: -25px;
}
.box1 {
position: absolute;
top: 8px;
left: 32px;
}
.box2 {
border: 2px solid rgb(222, 222, 225);
width: 40px;
height: 40px;
position: relative;
top: 336px;
padding: 0px 27px;
margin: 1px 26px;
border-radius: 28px;
background-color: rgb(227, 253, 218);
}
.box3 {
border: 2px solid rgb(222, 222, 225);
width: 35px;
height: 40px;
position: relative;
top: 292px;
padding: 0px 27px;
margin: 1px 29px;
left: 104px;
border-radius: 28px;
background-color: rgb(227, 253, 218);
}
.box4 h1 {
/* border: 2px solid black; */
width: 237px;
height: 77px;
padding: 0px 27px;
display: block;
position: relative;
top: 275px;
}
.box4 p {
/* border: 2px solid black; */
width: 290px;
height: 111px;
padding: 0px 30px;
display: block;
position: relative;
top: 262px
}
footer {
border: 2px solid rgb(222, 222, 225);
position: relative;
top: 251px;
width: 74px;
left: 113px;
height: 22px;
color: rgb(5 30 249);
border-radius: 28px;
padding: 8px;
background-color: rgb(207, 205, 205);
}
Nature
Lakes
Nature is the real beauty
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis temporibus impedit cumque nemo itaque harum
illo, reiciendis Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, accusamus dolor.
porro rerum incidunt debitis? Hic, voluptates.
Read More
Challenge Accepted
Maine bna Li ye exercise ❤ thank you Harry bhai jaan
theeek hai smjh gya hun
#haris bhai
#html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ced8cf;
}
.card {
width: 320px;
background-color: #fff;
border-radius: 15px;
border: 1px solid RGB(127, 126, 147);
margin: 60px;
}
.card img {
height: 200px;
border-radius: 10px;
margin-left: 9px;
margin-top: 9px;
margin-bottom: 20px;
}
.btn {
margin-left: 30px;
margin-bottom: 18px;
}
.btn button {
background-color: RGB(193, 178, 193);
border-radius: 15px;
border: 0.5px solid RGB(82, 167, 163);
padding: 6px 9px;
cursor: pointer;
}
.heading {
margin-left: 20px;
}
.heading h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.heading p {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #476a6c;
line-height: 20px;
margin-top: 10px
}
.btn2 {
margin: 50px;
text-align: center;
}
.btn2 a {
background-color: #d8cece;
padding: 9px 10px;
border-radius: 100px;
text-decoration: none;
color: RGB(61, 46, 110);
font-weight: 700;
} */
Nature
Lake
Check kro HarryBhai.
The lake was as silver as diamond flame and the atmosphere was convent quiet. Even the depths were vodka-clear. It was soothing and yogi still. Freckled trout were leaping for flies and thinking on its surface. The rising sun caused a division of armed flies to swarm into the air. The scene was so glorious that I had a lightning bolt moment.
My Blog
bhai papers ki wja se late ho gia tha sorrrryyyyyy
bro your code helps me a lot thanks
Challenge Accepted
done
#HTML
card
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(226, 226, 226);
}
.card {
width: 321px;
background-color: #fff;
border-radius: 15px;
border: 1px solid rgb(179, 168, 168);
margin: 60px;
}
.card img {
width: 300px;
border-radius: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 17px;
}
.btn {
margin-left: 30px;
margin-bottom: 20px;
}
.btn button {
border-radius: 10px;
background-color: #fff;
padding: 3px 8px;
margin-top: -40px;
margin-left: 5px;
cursor: pointer;
}
.btn button:hover {
background-color: white;
color: black;
}
.heading {
margin-left: 20px;
margin-bottom: 10px;
}
.heading h2 {
padding-bottom: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.heading p {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #645f5f;
line-height: 19px;
margin-top: 10px
}
.btn2 {
margin: 30px 110px;
}
.btn2 a {
background-color: #bebaba;
color: purple;
text-decoration: none;
border-radius: 20px;
padding: 8px 10px;
font-weight: 600;
}
nature
hills
This is the hills.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, distinctio odio debitis assumenda, possimus
accusantium corrupti rerum sequi veniam a ratione. Harum, blanditiis consequuntur? Placeat accusamus unde
molestias, deleniti magnam deserunt neque assumenda distinctio...
read more
Challenge accepted!
Sigma Batch Op ❤
Challenge accepted
bhai best course hai aapka we are always with you bro
Sigma Batch Op #August2024
Challenge Accepted
#Html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(228, 230, 233);
}
span button{
background-color: rgb(223, 236, 250);
border-radius: 15px;
border: 1px solid rgb(66, 71, 71);
padding: 6px 9px;
cursor: pointer;
}
.card {
margin: 20px;
padding: 10px;
border: 3px solid rgb(179, 166, 166);
border-radius: 15px;
background-color: white;
width: 200px;
height: 410px;
}
.card img {
border: 2px blue;
border-radius: 10px;
width: 100%;
}
#button{
border: 2px solid gray;
border-radius: 100px;
margin: 10px;
padding: auto;
width:10vw ;
text-align: center;
text-decoration: none;
background-color: #d8cece;
color: rrgb(155, 129, 243)
}
Nature
Lake
Mars Rover
The Mars Reconnaissance Orbiter (MRO) has captured a stunning image of the Martian terrain in high
resolution for the
Read More
you helped me buddy to make it better thanks
@@ashvalekh Pleasure :)
Can u tell why u # in ahref in place of link
@@sanketjain8288 I didn't have the link so just wrote the #.. to make the button work as per task requirement.
@@sanketjain8288 yup y not it's just Caz I haven't design the next page so this will direct u to blank pg till I add the new pg link 👍
Bro read more button use karne se uske bada bala content hide nahi ho raha taki readmore use karke dekh sake
Sigma batch op
ChallengeAccepted
samajh aa geya bhai😎
.parent {
position: relative;
}
.box {
border: 2px solid black;
height: 450px;
width: 40vh;
border-radius: 15px;
background-color: rgb(226, 226, 226);
box-shadow: 10px 10px 10px lightgray;
margin: 10px;
padding: 15px;
}
#pic {
position: relative;
top: 1px;
/* padding: 20px; */
/* right: 23px;
left: 23px; */
height: 160px;
width: 100%;
border-radius: 15px;
}
.order {
font-family:Arial, Helvetica, sans-serif;
list-style: none;
display: inline-flex;
text-align: center;
font-size: small;
}
.order li {
align-items: center;
margin-left: 3px;
padding-right: 0px;
padding: 8px;
padding: 2px 15px;
border: 2px solid gray;
border-radius: 20px;
background-color: lightgray;
}
h2 {
text-transform: capitalize;
padding: 0px;
}
.ReadMore{
align-items: center;
color: rgb(4, 0, 253);
background-color: #225cc7;
}
.readmore-container{
display: flex inline;
justify-content: center;
/* margin-top: 13px; */
}
Home
Contact
The mountian resort
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, debitis? Sit deleniti laudantium
atque blanditiis nulla eaque laboriosam doloribus necessitatibus adipisci aperiam consequatur iste
sequi a delectus, temporibus debitis sed!
ReadMore
great sir 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Thankyou for this course harry bhai😊
You are the real HERO
Your content is awesome!!!
Full support Harry bhai Sigma batch op
Challenge Accepted 🤘
Harry bhai ki video kitni useful hai ke vo paid course wale bhi inhi se seekh ke apni bana rahe hai lakadbhaage sab
Sigma batch op❤
#html
.parent {
border: 2px solid rgb(222, 222, 225);
position: relative;
/* padding: 11px; */
width: 334px;
height: 630px;
border-radius: 20px;
margin: auto;
}
/* .box{
border: 2px solid black;
} */
.box img {
border-radius: 20px;
display: block;
position: absolute;
left: -25px;
}
.box1 {
position: absolute;
top: 8px;
left: 32px;
}
.box2 {
border: 2px solid rgb(222, 222, 225);
width: 40px;
height: 40px;
position: relative;
top: 336px;
padding: 0px 27px;
margin: 1px 26px;
border-radius: 28px;
background-color: rgb(227, 253, 218);
}
.box3 {
border: 2px solid rgb(222, 222, 225);
width: 35px;
height: 40px;
position: relative;
top: 292px;
padding: 0px 27px;
margin: 1px 29px;
left: 104px;
border-radius: 28px;
background-color: rgb(227, 253, 218);
}
.box4 h1 {
/* border: 2px solid black; */
width: 237px;
height: 77px;
padding: 0px 27px;
display: block;
position: relative;
top: 275px;
}
.box4 p {
/* border: 2px solid black; */
width: 290px;
height: 111px;
padding: 0px 30px;
display: block;
position: relative;
top: 262px
}
footer {
border: 2px solid rgb(222, 222, 225);
position: relative;
top: 251px;
width: 74px;
left: 113px;
height: 22px;
color: rgb(5 30 249);
border-radius: 28px;
padding: 8px;
background-color: rgb(207, 205, 205);
}
Nature
Lakes
Nature is the real beauty
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis temporibus impedit cumque nemo itaque harum
illo, reiciendis Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, accusamus dolor.
porro rerum incidunt debitis? Hic, voluptates.
Read More
sigma batch op
thanks you so much sir
so so so s so so so so so so so so so so so so so much
Sigma batch op 🗿🗿❤️❤️❤️
thk he smj gya bamjayega
thik hai samajh gya
Haary bhai, Challenge completed, it was impossible at beginning, but later i completed it.
sir position absolute karke
display:flex;
justify-content:centre;
kaam kyu nhi karta????
samaj gya g
thik hai samajh gya
challenge accepteed
challenge accepted harry bhai #SigmaBatchOp . samjh gaye bhai 😂
sab samaj gaya sir
Theek hy, smjh gya!
Challege Accepted ❤🎉
Thank YOU!!
THANK YOU!
thank you!!
Challenge accepted Sir 🎉
thanks for course.
Challenge Accepted, Theek hai smjh gya
Love from Pakistan ❤❤
Challenge Accepted #SigmaBatchOP Love you Harry Bhai
challenge accepted and completed also bhaiya
samjh gya
accepted and dusted 🔥🔥😎😎😎😎
Challenge Accepted ❤
Ab ham dikhayenge apna dum
CHALLANGE ACCEPTED 🔥🔥🔥
#html
Card creation
.box{
border: 2px solid rgb(248, 244, 244);
height: 70vh;
width: 25vw;
margin: 500px;
margin-top: 100px;
padding: 0px;
}
nav ul li{
margin: 7px;
padding: 5px;
list-style: none;
border: 2px double rgb(244, 242, 242);
border-radius: 20px 20px 20px 20px;
letter-spacing:normal;
list-style-position: inside;
}
img{
margin: 7px;
border-radius: 20px 20px 20px 20px;
}
h2{
/* font-style:bold; */
margin: 10px;
}
p{
margin: 10px;
}
button{
border-radius: 20px 20px 20px 20px;
margin-left: 135px;
padding: 10px;
background-color:lightblue;
color: blue;
}
Nature
Lake
Natural Lakes
Natural lakes are lakes that form as a result of rainwater and dry up throughout the summer. Natural lakes provide a valuable supply of water for drinking, agriculture, fishing, and recreational purposes.
Read More
thik hai....samajh gya
Theek hai samajh gaya
thanlk you harrya dad
samjh gyaaa 🤡
Thek hai smjh gya
Challenge accepted harry bhai
............
*{Padding:0;
Margin:0;
}
Body{
Background colour: black;}
.card { width:320px;
Background:url;
Border-radius:14px;
Border : 1px solid black ;
Margin legt:560px;
Margin top:100px;
}
.card img{
Height : 200px;
Margin left: 15px;
Margin top: 9px;
Margin bottom :20px;
}
.btn{
Border radius : 10px;
Margin: 10px 5px;
Padding :3px;
Margin -top:9px;
Margin left: 70px;
Margin bottom:10px;
}
.....
........