Exercise 3 – Solution | Sigma Web Development Course – Tutorial #32
Access the Sigma web development course playlist: https://www.youtube.com/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w
➡️ Source Code: https://github.com/CodeWithHarry/Sigma-Web-Dev-Course
➡️ Notes and CheatSheets: https://www.codewithharry.com/notes/
➡️ English Subtitles are now up for all the videos!
Download UltraEdit Trial for Free: https://bit.ly/UltraEdit-CWH
►Checkout my English channel here: https://www.youtube.com/channel/UC7btqG2Ww0_2LwuQxpvo2HQ
►Instagram: www.instagram.com/codewithharry
Download UltraEdit Trial for Free: https://bit.ly/UltraEdit-CWH
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: https://www.youtube.com/playlist?list=PLu0W_9lII9agrsRZjFECeFuWY5ev2pQlk
►Learn in One Video[++]:
Python Course with 5 Projects: https://www.youtube.com/watch?v=fqF9M92jzUo
Python[15 Hr]: https://www.youtube.com/watch?v=gfDE2a7MKjA&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Python Advance[3.5 Hr]: https://www.youtube.com/watch?v=61a7UkDO50s&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Python[1 Hr]: https://www.youtube.com/watch?v=qHJjMvHLJdg&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Python[2 Hr]: https://www.youtube.com/watch?v=ihk_Xglr164&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Python[15 Min]:https://www.youtube.com/watch?v=fr1f84rg4Nw&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
JavaScript[1 Hr]: https://www.youtube.com/watch?v=onbBV0uFVpo&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
C[1.3 Hr]-https://www.youtube.com/watch?v=YXcgD8hRHYY&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
php[1 Hr]: https://www.youtube.com/watch?v=xW7ro3lwaCI&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
php[2.3 Hr]:https://www.youtube.com/watch?v=1SnPKhCdlsU&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
php[Project]- https://www.youtube.com/watch?v=-al2bECumKg&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
HTML[30 Min]:https://www.youtube.com/watch?v=E3ByCRqE7Lo&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
CSS[8.5 Hr]:https://www.youtube.com/watch?v=Edsxf_NBFrw&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
CSS[1.4 Hr]:https://www.youtube.com/watch?v=u5-K_ua9sOw&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Wordpress[3.2 Hr]:https://www.youtube.com/watch?v=GlLRYml8mCY&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Angular[2 Hr]:https://www.youtube.com/watch?v=0LhBvp8qpro&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Java[2.3 Hr]:https://www.youtube.com/watch?v=rV_3Lewxx6o&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Web Scraping[1 Hr]:https://www.youtube.com/watch?v=uufDGjTuq34&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
MongoDB[2 Hr]:https://www.youtube.com/watch?v=oSIv-E60NiU&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Numpy[1 Hr]:https://www.youtube.com/watch?v=Rbh1rieb3zc&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Android Dev[12 Hr]- https://www.youtube.com/watch?v=mXjZQX3UzOs
Linux[1 Hr]:https://www.youtube.com/watch?v=_tCY-c-sPZc&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
JQuery[1.1 Hr]:https://www.youtube.com/watch?v=YFlx1C8XwR0&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
Git and GitHub[1.1 Hr]:https://www.youtube.com/watch?v=gwWKnnCMQ5c&list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7
►Complete course :
React: https://www.youtube.com/playlist?list=PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt
Python-https://www.youtube.com/playlist?list=PLu0W_9lII9agICnT8t4iYVSZ3eykIAOME
OOP Python-https://www.youtube.com/playlist?list=PLu0W_9lII9ahfRrhFcoB-4lpp9YaBmdCP
Java:https://www.youtube.com/playlist?list=PLu0W_9lII9agS67Uits0UnJyrYiXhDS6q
JavaScript- https://www.youtube.com/playlist?list=PLu0W_9lII9ajyk081To1Cbt2eI5913SsL
PHP-https://www.youtube.com/playlist?list=PLu0W_9lII9aikXkRE0WxDt1vozo3hnmtR
C-https://www.youtube.com/playlist?list=PLu0W_9lII9aiXlHcLx-mDH1Qul38wD3aR
C++-https://www.youtube.com/playlist?list=PLu0W_9lII9agpFUAlPFe_VNSlXW5uE0YL
Git & GitHub-https://www.youtube.com/playlist?list=PLu0W_9lII9ahVQekD7ePHmnirTePXwIln
Android Dev- https://www.youtube.com/playlist?list=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd
Python GUI- https://www.youtube.com/playlist?list=PLu0W_9lII9ajLcqRcj4PoEihkukF_OTzA
Web Development- https://www.youtube.com/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg
Python Django:https://www.youtube.com/playlist?list=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9
Projects Using HTML, CSS & Javascript- https://www.youtube.com/playlist?list=PLu0W_9lII9aiQiOwthuSvinxoflmhRxM3
Data Structure and Algo:https://www.youtube.com/playlist?list=PLu0W_9lII9ahIappRPN0MCAgtOu3lQjQi
Follow Me On Social Media
►Website (created using Django Rest & Angular): https://www.codewithharry.com
►Facebook: https://www.facebook.com/CodeWithHarry
►Instagram: https://www.instagram.com/codewithharry/
Twitter: https://twitter.com/CodeWithHarry
Comment “#HarryBhai” if you read this 😉😉
by CodeWithHarry
linux foundation
sigma Batch OP
Sigma batch op 🔥🔥🔥
Sry I'm late 😅😅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<style>
body{
background-color: #ccc;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main{
display: flex;
justify-content: center;
}
.card{
height: 480px;
width: 300px;
border-radius:10px;
background-color:white;
}
.img{
padding:5px;
}
img{
width: 100%;
border-radius:10px;
}
.capsule{
height: 20px;
width:60px;
font-size:12px;
color:#000000a6;
border:1px solid #000000a6;
border-radius:10px;
padding:3px;
text-align:center;
display:inline-block;
margin-left:10px;
}
h1{
color:#3563d4;
font-family: times new roman;
margin:10px;
}
p{
margin:10px;
line-height:25px;
font-weight:400;
}
.readbtn{
text-align: center;
}
button{
height:36px;
width: 100px;
border: 2px solid transparent;
border-radius:18px;
background-color:#b3d1ff;
color:#3385ff;
font-weight:bold;
margin:20px;
}
</style>
</head>
<body>
<div class="main">
<div class="card">
<div class="img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSC5HRGOfhIaKfnMqGx9yInmTEKx9FWOhEmMg&usqp=CAU" alt="">
</div>
<div class="capsule">Nature</div>
<div class="capsule">lake</div>
<h1>Hello World</h1>
<p>tota aenean atomorum quo vituperata sodales orci elementum vsjs ejsk whifj djsks shsjstritani pertinax dolor atomorum ex sollicitudin natum magnis tation quisque inceptos nibh</p>
<div class="readbtn">
<button>Read more</button>
</div>
</div>
</div>
</body>
</html>
Sigma batch OP
Harry Tau ji 😍🥰
#sigma batch op
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 3</title>
</head>
<style>
* {
padding: 0px;
margin: 0px;
–background_color: #1f1e1f;
–font_color: rgb(255, 255, 255);
–hover: rgb(255, 187, 0);
}
body {
background-color: gray;
}
.nav {
background-color: var(–background_color);
height: 30px;
width: 100%;
margin-top: 20px;
padding: 15px;
}
ul {
text-decoration: none;
display: flex;
justify-content: center;
justify-items: center;
justify-content: space-evenly;
}
li {
list-style-type: none;
}
ul li a {
text-decoration: none;
color: var(–font_color);
font-size: 1.4rem;
transition: all;
transition-duration: 1s;
}
a:hover {
color: var(–hover);
text-decoration: underline;
}
footer {
margin-top: 800px;
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: large;
background-color: var(–background_color);
color: var(–font_color);
/* padding-bottom: 100px; */
}
</style>
<body>
<div class="nav">
<ul>
<li class="item"> <a href="#">Home</a></li>
<li class="item"><a href="#">About Us</a> </li>
<li class="item"><a href="#">Contact Us</a> </li>
<li class="item"><a href="#">Help</a> </li>
</ul>
<footer>
<hr>
I am proud of SIGMA Web Development Batch 🔥 🔥 🔥
<hr>
</footer>
</body>
</html>
very simple approach :
SIGMA BATCH OP 🤩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 3</title>
<style>
.CardContainer {
width: 400px;
min-height: 500px;
box-shadow: 4px 2px 60px 5px #787676;
padding: 8px;
border-radius: 8px;
border: 1px solid gray;
}
.Image {
width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}
.basicBtn {
border-radius: 8px;
height: 30px;
width: 100px;
border: 1px solid red;
background-color: #fff;
font-weight: 800;
margin-right: 8px;
color: blue;
}
h1 {
font-weight: 800;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
p{
font-weight: 600;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 13px;
}
.btnDiv{
text-align: center;
}
.MainBtn {
background-color: #fff;
color: red;
height: 35px;
width: 130px;
border-radius: 8px;
border: 1px solid blue;
margin: 20px;
}
.content {
padding: 8px;
}
</style>
</head>
<body>
<div class="CardContainer">
<div>
<img class="Image" src="ford-mustang-mach-1-2021-5k-6000×4480-5870.jpg">
</div>
<div>
<button class="basicBtn">Sports</button>
<button class="basicBtn">Classic</button>
</div>
<div class="content">
<h1>Ford Mustang</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate quisquam, quo adipisci totam illo repudiandae error minima esse cupiditate molestias?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate quisquam, quo adipisci totam illo repudiandae error minima esse cupiditate molestias?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate quisquam, quo adipisci totam illo repudiandae error minima esse cupiditate molestias?</p>
</div>
<div class="btnDiv">
<button class="MainBtn">Read More</button>
</div>
</div>
</body>
</html>
#sigmabatchop
😊
#harry bhai
Card slider with JavaScript please lAM STILL WAITING!🫠🫠🫠🫠
Tutorial – 32 Done✅
#Sigma Batch OP
Really amazing Course❤🔥
Watching from Nepal
Lots of Love Harry Bhai 💚
Thank you sir 😊
#SigmaBatchOP
Sigma batch op
PIN A COMMENT OR EXERCISE SOLUTION OF WINNER AS WELL!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: rgb(255, 255, 255);
}
.card {
background-color: rgb(133, 126, 126);
width: 344px;
height: 440px;
border-radius: 14px;
}
.image {
padding: 10px;
}
.image img {
border-radius: 14px;
}
.content {
padding: 12px;
}
.content p {
font-size: 17px;
}
.capsules {
padding: 0 15px 0 15px;
}
.capsules span {
border: 2px solid rgb(51, 65, 65);
padding: 4px;
border-radius: 9px;
font-size: 13px;
background-color: rgb(51, 65, 65);
color: rgb(157, 207, 250);
}
.capsules span a {
color: rgb(232, 241, 249);
text-decoration: none;
}
</style>
</head>
<body>
<div class="card">
<div class="image">
<img width="324" src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_640.jpg"
alt="Mountains">
</div>
<div class="capsules">
<span><a href="https://www.youtube.com" target="_blank">Mountain</a></span>
<span><a href="#">Path</a></span>
</div>
<div class="content">
<h1>Mountains</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus impedit necessitatibus odit iste nesciunt ratione, eveniet, rerum enim magnam ab rem dicta quas.</p>
</div>
</div>
</body>
</html>
Is it gud if we give our card height to auto instead of giving it an value?