Exercise 6 - Navbar using Flexbox | Sigma Web Development Course - Tutorial #41

[@CodeWithHarry]

I will try to increase the number of shoutouts in the solution video so make sure you solve and submit your solution before I record the solution video. #SigmaBatchOP

[@codxbug]

Challenge Accepted !! #SigmaBatchOP Navbat * { margin: 0; padding: 0; } .site-header { display: flex; justify-content: space-around; padding: 10px; background-color: blueviolet; } .site-header>.logo { width: 300px; } .site-header>.logo>img { width: 200px; } .site-header .nav { flex-grow: 3; } .nav ul { display: flex; list-style: none; justify-content: center; gap: 30px; padding-top: 20px; } .nav ul li a { text-decoration: none; color: white; font-weight: 700; font-size: larger; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } Products Pricing Resources About Us

[@Aliwalay1214]

#sigmaBatchOP

[@Asim_Ali4857]

Thanks a lot sir

[@ProgrammerSushant49]

Solution: Navbar Design *{ margin: 0; padding: 0; box-sizing: border-box; } html , body{ height: 100%; width: 100%; } header{ width: 85vw; height: 96px; margin: 0px auto; display: flex; justify-content: space-between; align-items: center; padding: 10px; } header a img{ width: 180px; height: 60px; } nav{ display: flex; justify-content: space-evenly; align-items: flex-start; } header nav a{ color: #222; font-size: 16px; font-family: 'Segoe UI', sans-serif; font-weight: 400; padding: 0px 20px; text-decoration: none; } header nav .translate-icon img{ width: 25px; height: 25px; } Products ⌄ Pricing ⌄ Resources ⌄ About us ⌄

[@rohankashyap9366]

jab bhi app exercise ki video dal ta ma uss time tution ma rhata hu 🥲🥲

[@Rehan-c8x]

I spent my whole day in building complete ultra edit website, but I am so happy, that I completed it from base to end at my own.

[@akashtiwari5820]

i am very happy to see this course. A great thanks to you and your hardwork🙏🙏🙏

[@ChaoticBeing-yj3ij]

Thank you so much Harry Bhai for putting this course out for free! Only because of you I was able to replicate the entire website, although it is not responsive. I can't paste the code due to character limit. Dil se Thank You!!

[@MArshad-kl6zv]

Dear sir, I also learn full web development from your web development course and now i am also watching your c++ tutorial and sigma web development when you see my this comment then comment me please i watching from "Pakistan KPK"

[@SruthiBachu]

Harry sir I am left with only 6months to complete my degree. I kindly request you to complete this full stack development course as soon as possible.🙂thank you sir for putting such efforts to make us learn.

[@HemantPrajapat-md2vw]

which degree bro?

[@TraptiGupta-s2s]

thank you bhai . apko har video me bolte hai or ye thank you dil se hota hai , every video i watch reminds me ki ye course free hai and we are blessed to have it ... #SigmaBatchOP #Harrybhai

[@IamRKP]

We should value this free knowledge by Harry bhai and share like it subscribed it.

[@anita_singh23]

#SIGMA_BATCH_OP! I HAVE BEEN WATCHING THIS COURSE FROM STARTING AMD I HAVE NOTICED A LOT OF DIFFERENCE IN ME AND HAD LEARNT A LOT TILL HERE. I AM EXCITED TO FINISH THIS FULL COURSE SOON AND WILL BE CREATING WEBSITE WITH CONFIDENCE.

[@adamsfacts01]

Bhai keyse ho!!? I'm from Bangladesh 🇧🇩,,, I am also Hindi language,,, I started your Frist video every exercise.. love you ❣️ my online BOsS 🥰

[@ShubhVerma-CSE-ENGR]

Aap bahut hi aacha explain kerte ho sir

[@hiphop861]

Thanx #HarryBhai for giving us another practice project. #SigmaBatchOp

[@No_One0199]

Great sir I learnt so much from this course. Please create this type of courses in the future also.

[@codewithnaim529]

☑☑Sir I have created this entire website, but i can not provide source code because the source code is 600 lines of code so youtube not allowed.😟😟

[@Rockstar_Postmallon]

Ooh 600 lines me aapne eesa konsa code likha h code jayada se jayada 100 lines of code h 100 lines bhi me jayada se jayada bta rha hu vra code only 60 lines ka 😊😊😊😊

[@sufiyanmogal1527]

Bro code short hona chiye aapne kya amazon bana di dry principle follow karo

[@shaikhnuma9101]

Plz send me the sorce code you design 🖐🏻

[@itzskype9943]

Bro you are a legend 😎 , Can You give me the file of 600 codes through mediafire link(Other Link if you don't have mediafire link) ? , I want to see it , I have uploaded my answer so that it wouldn't be a problem

[@gauriyadav3710]

Sir ne Frontend aur backend dono poora cover kia hai kya??

[@oldestsong7738]

Harry bhai your are the most hardworking person I have ever seen. Just don't get demotivated your supporters will always be there for you ❤❤ and I will be in front line. Land papers are ready 😂 lets meet and make it yours

[@SHIVAM_NARWADE]

CHALLENGE ACCEPTED BHAI 👊

[@esmatullahekhlas9287]

1:24 1:36 Accepted

[@alok4956]

Challenge accepted nav bar using css *{ padding: 0px; margin: 0px; } nav{ font-family: sans-serif; } .content{ font-size: 20px; display: flex; } ul li:nth-child(1){ position: absolute; margin-left: 0px; list-style-type: none; } img{ height: 25px; width: 100px; } ul li:nth-child(2){ position: absolute; margin-left: 270px; list-style-type: none; } ul li:nth-child(3){ position: absolute; margin-left: 360px; list-style-type: none; } ul li:nth-child(4){ position: absolute; margin-left: 440px; list-style-type: none; } ul li:nth-child(5){ position: absolute; margin-left: 550px; list-style-type: none; } ul li:nth-child(6){ position: relative; margin-left: 650px; list-style-type: none; } Product Pricing Resources About Us Security and Compliance

[@michaeldesanta2292]

awesome bro, this helped me. thanks!!

[@hamvlogwale]

this course is very useful brother thanks.

[@shahreyar-bi8wq]

Challenge completed just some alignment error a very little bit CSS Navbar Using Flexbox *{ /* background-color: rgb(233, 226, 226); */ margin: 0px; padding: 0px; } nav{ background-color: rgb(255, 255, 255); height: 60px; /* display: flex; */ /* justify-content: right; */ } ul li{ display: inline; padding: 20px; } ul li:hover{ color: grey; } ul li:nth-child(1){ position: relative; left: 20px; /* margin: 20px; */ padding: 40px 20px; } ul li:nth-child(2){ position: relative; left: 590px; margin: 20px; padding: 20px; } ul li:nth-child(3){ position: relative; left: 555px; } ul li:nth-child(4){ position: relative; left: 530px; } ul li:nth-child(5){ position: relative; left: 507px; } ul li:nth-child(6){ position: relative; left: 480px; } ul li:nth-child(7){ position: relative; left: 475px; } Products ^ Pricing ^ Resources ^ About us ^ Security and compliance

[@BeingVasuSinghal]

bro your code is so long, you are writing in WET

[@ayushcv2439]

bro you didn't even use flexbox?🤔🤔

[@Loving_heckur]

css navbar .logo { width: 43px; height: 23px; } .logo img { width: 134px; } .first { display: flex; justify-content: space-around; align-items: center; } .right ul { display: flex; gap: 34px; } .right ul li { list-style: none; } .second { display: flex; justify-content: space-around; } .item ul { display: flex; } .item ul li { list-style: none; } .next { display: flex; justify-content: space-around; align-items: center; } .next ul { display: flex; gap: 34px; } .next ul li { list-style: none; } main { display: flex; justify-content: center; } .boat { font-size: 28PX; font-family: system-ui; } .boat :first-child { font-weight: lighter; } .one { width: 60vw; text-align: center; word-wrap: none; padding: auto; margin: auto; font-size: 23px; /* font-weight: lighter; */ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .two { font-size: 23px; width: 60vw; text-align: center; padding: auto; margin: auto; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .red { background-color: #1286b4b1; width: 250px; height: 50; border-radius: 8px; text-align: center; margin: auto; padding: auto; color: white; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 19PX; font-weight: bolder; } product pricing resources about us security and compiance home > ultra edit what's new Full Feature List Latest changes Read hotfix notes Code Editor: UltraEdit UltraEdit is a powerful disk-based text editor, programmer’s editor, and hex editor that is used to edit HTML, PHP, JavaScript, Perl, C/C++, Python, and virtually any other coding/programming language. UltraEdit can handle and edit files in excess of 4 gigabytes. An industry award winning application, UltraEdit includes a free trial period so you can try all of the application’s features before purchasing a license. UltraEdit supports 64-bit file handling on both 32-bit and 64-bit Windows platforms (Windows 10 and later). What´s New

[@TejasWasnik]

Challenge Accepted!

[@Moizoref]

The only two people I saw who are changing people's lives, is @CodeWithHarry and @MrBeast there is truly no difference between their personalities they are just helping people in their own ways... keep it up bro i wish u all the best in ur life.❤

[@jameelaskeriaskeri6807]

Please pray for Palestine 🇵🇸

[@nomaanrizvi6561]

i made the entire page, thank you for the playlist

[@owaisnadeem2751]

1000th like from myself . Respect adn love from Pakistan Harry bhai !

[@nikkaniazi4220]

Harry bhai your course is really informative 💕🎉 thank you, and all challenges accepted and solved by me. ❤

[@movehard1851]

❤️🙏 Sigma Batch OP ❤️🙏

[@shivamsoni-xg5wh]

thanks a lot harry bhai , we appreciate your effort😍😇

[@satyajitmohanty7341]

Bhai aap kamal dhamal ho,love from odisha ❤❤❤❤

[@mdsohanurrahmanhridoy1343]

✅Completed 41❤

[@FF_INX]

Love You HarryBhai❤

[@Lv_La_Lr]

Harry Sensei OP ❤❤

[@mayanksharma_WebDeveloper]

Sigma Batch OP.

[@absvines1904]

love u harry bhai thanks for your amazing efforts

[@rohitstudyclube7270]

Nothing matter that what you do just croos your efficiency and do hard work

[@SigmaDevZone]

Sigma op from Pakistan gilgit baltistan big fan harry

[@dogesh2839]

Challenge Accepted 💪🔥

[@the_second_bunny]

Didn't write below the grid part(containing different language download link) cuz its my first time and took more time than expected. Other than that the rest of the top is done. As u said didn't add hover as well. NavBar * { margin: 0; padding: 0; } .container { position: relative; display: flex; margin: 0px; width: 83vw; top: 10px; padding: 10px; } nav { display: flex; justify-content: center; align-content: center; } .logo { height: 60px; width: 55px; border-radius: 70px; align-self: left; margin-left: 25px; } .left { list-style-type: none; /* display: flex; */ justify-content: left; margin-top: 5px; margin-left: 10px; } .name { padding-left: 0px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 700; font-size: xx-large; } .text { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; margin-left: 25px; margin-top: -6px; margin-bottom: 12px; font-size: x-small; } .right { display: flex; list-style-type: none; justify-content: flex-end; margin-left: auto; gap: 40px; margin-top: 20px; margin-right: 95px; } .right li { font-size: large; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; opacity: 0.7; } .heading { text-align: center; margin-top: 70px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 50px; font-weight: 350; } main { text-align: center; } main p { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: x-large; margin: 40px auto 30px auto; } .box{ width: 300px; height: 50px; border: 0px none; background-color: #00b6d1; border-radius: 5px; margin-left: auto; margin-right: auto; margin-bottom: 70px; } .box div{ font-family: sans-serif; padding: 15px; font-size: 14px; font-weight: bold; letter-spacing: -0.5px; color: white; } article{ display: flex; margin-left: 260px; } article ul{ display: flex; list-style-type: none; margin-left: 20px; margin-top: 20px; gap: 5px; } #one{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: x-large; margin-top: -10px; } #two{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size: smaller; } UltraEdit An Idera.Inc. Company Products Pricing Resources About Us Security and Compliance Download UltraEdit for Windows Download and try UltraEdit before you buy it! This download includes the full Windows version of the text editor. DOWNLOAD MAC OR LINUX VERSION Download UltraEdit v2024.0(released 2024-04-19) | Hotflix

[@ShubhVerma-CSE-ENGR]

Sigma Batch OP❤❤

[@skalwaghe56]

This Excercise is going to be real fun! #SigmaBatchOP

[@SigmaCoder.]

सिग्मा बॅच ओपी..🔥

[@AN_Bhagat]

#SigmaBatchOp #Harry Sir❤❤ # Challenge Accepted

[@visheshsaini545]

Challenge accepted bro

[@babernaeem2308]

U are doing great work. I really appriciate.

[@sharry_trend]

#CHALLENGE -ACCEPTED Exercise 6 body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f8f8; text-align: center; } header { display: flex; justify-content: space-between; align-items: center; background-color: rgb(238, 214, 183); border: 0px solid black; } .logo { display: flex; align-items: center; } img { height: 50px; } .heading { margin-left: 10px; text-align: left; } .heading h1 { margin: 0%; font-size: 1.5em; } .heading p { margin: 1; font-size: 0.9em; color: #666; } nav ul{ list-style-type: none; margin: 0; padding: 0; display: flex; } ul li a{ display:block; text-decoration: none; color: #000; transition: background-color 0.3s; padding: 15px 30px; } li :hover{ background-color:#e2d4d4 } main{ padding: 50px 20px ; } main h1 strong{ border-left: #000; font-size: 1.2em; } main p{ font-size: 1.2em; color: #666; } button{ background-color: rgb(62, 200, 224); border:none; color: rgb(255, 255, 255); font-size: large; padding: 15px 20px; /* font: 700; */ border-radius: 30px; } button:hover { background-color: #009fda; } .down{ display: flex; justify-content: center; padding: 15px 30px; column-gap: 10px; } .down :nth-child(1) { font-size: 100; } .down p{ color: #666; } UltraEdit An Ultra,Inc.Company Products ▼ Pricing ▼ Resources ▼ About us ▼ Download UltraEdit for windows Download and try UltraEdit before you buy it! This Download includes the full Windows versionod the text editor DOWNLOAD MAC OR LINUX VERSION Download UltraEdit v2024.1(released 08/16/20-2023)Hotfix

[@roysehzad2230]

amazing exercise

[@raodanishwakeel786]

CSS-Code .navbar { display: flex; justify-content: space-around; /*Ensures space between logo and list*/ align-items: center; /*Centers items vertically*/ flex-direction: row; /*by default the flex direction is in row*/ flex-wrap: wrap; /*Allows items to wrap */ /*box-shadow: 0 1px 0 rgba(0, 0, 0, .1);*/ color: #222222; font-size: 16px; margin: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; cursor: pointer; } .logo img { margin-left: -70px; } ul { display: flex; gap: 20px; } li { list-style: none; display: flex; align-items: center; } .list svg{ padding: 0 5px; } .products a { text-decoration: none; color: black } a:hover { color: #666; } HTML-Code Products Pricing Resources About us Security and compliance 27 July 2024 Saturday [05:10:00 PM]

[@ayan_biswas1234]

2:28 yes sir, now I can realize it. #sigmaBatchOp

[@NOTKRISHNA01]

#CHALLANGE ACCEPTED 💯💯👍👍👍

[@CodewithSaubhari]

Challenge accepted #sigma batch op love that's one course❤❤❤❤

[@ahem2784]

And yes when we start javascript Sigma course with some easy peasy codes😊😊😊

[@BalgovindYadav3]

Challenge Accepted. #SigmaBatchOp . love this course.

[@teertharajturkar]

Sigma batch op❤❤

[@adityapwstudent1003]

Challenge accepted bhai and I WILL SEE YOU NEXT TOME😅😅😅

[@_SMIT_R_]

Thank_you HarryBhai SIGMA BATCH OP🎉🎉🎉🎉

[@sumantamondal6897]

#SigmaBatchOP #ChallengeAccepted *{ margin: 0; padding: 0; } .navigation{ display: flex; justify-content: flex-end; column-gap: 20px; padding: 30px 50px; align-items: center; } .item-1{ flex-grow: 1; }

[@Cloudy-19-x]

#sigma batch op❤

[@sadiqvaliahmad4740]

sigma op batch💥💥💥💥💥💥💥💥💥💥💥💥

[@ahem2784]

We are near to 5 million🎉

[@freestylerjoy296]

Challenge accepted Harry bhaiya ❤❤❤

[@patiljitendra2272]

Sigma batch op❤❤❤

[@akashparmar7861]

great harry sir

[@kumarudi]

Challenge Completed ❤

[@dheryabedi3671]

nice web development course

[@shaikyaseenyaseen7692]

challenge accepted harry bhai 😍😍

[@Ravimandal952]

Sigma batch is op❤❤

[@srijan_tripathi]

Sigma Batch OP!

[@vivekpal9652]

Sigma Batch Op bro

[@AnuragMishra-ob1er]

sigma batch oppppp⭐⭐

[@3shell414]

CSS: * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } header { display: flex; /* background-color: aqua; */ /* Testing color */ justify-content: space-between; width: 80vw; position: relative; left: 10vw; height: 45px; margin-top: 15px; } div { display: flex; } img { width: 42px; } .nav { display: flex; /* background-color: blueviolet; */ /* Testing color */ } .nav li { list-style: none; margin: 5px 25px; } .nav li a { text-decoration: none; } .nav li a:hover { color: red; }

[@Aryan_Rawat.]

Challenge Accepted Harry bhai.❤

[@biswajeet9826]

Really Good 10/10!!

[@acetone138]

hats off harry vai

[@kakarotgoku14]

Challenge accepted harry bhai🎉

[@shakeel_developer-f7x]

Love You Harry bhai

[@raisarkar2783]

sigma batch OP🔥🔥

[@dogesh2839]

SigmaBatchOp #September2024

[@alfiyakhanum9420]

Challenge accomplished 👍

[@GarvitPahwa-fr6qo]

Thank you Harry Bhai I did it

[@LOVENGERS.OFFICIAL]

07/11/2023 Time: 08:25 PM

[@KartikMittal-jb3ek]

vid_41 completed!

[@malikfahad007-l3p]

Sigma batch op 🎉🎉❤

[@dhanjitznath]

Challenege Accepted HARRY BHAI

[@muhammadasad2184]

Sigma Batch OP ❤

[@Beauty_salon56]

Challenge Accepted and done .

[@bhoorasco2826]

❤❤ Sigma batch OP ❤❤

[@saurabhsoni4325]

SIGMA BATCH OP BHAI

[@ajityadav1251]

thanks harry bhai

[@nmn_chinu]

Challenge Accepted 🔥

[@nomaanrizvi6561]

sigma batch op🔥

[@gautamnaugai.iab94]

#SIGMA Batch OP and #Challenge accepted

[@techmajor836]

Challenge accepted harry Bhai 😌

[@dvilhacker2084]

Sigma batch op #harry bhai

[@_ROHIT..]

# SIGMA BATCH OP ❤

[@sai_kumar_7755]

# Challenge Accepted Harry Bhai🥰

[@Nikhil__Lal]

CHALLANGE ACCEPTED

[@Abhishek-Yadav-442]

Challenge accepted harry bhai

[@skkrrtt2344]

Sigma Batch OP

[@rupaliagale4076]

Sigma batch op 🎉🎉🎉🎉🎉🎉