Here is the Website you have to design: https://bit.ly/UltraEdit-CWH
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!
►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 😉😉
source
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
<!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>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.hero{
height: 100vh;
width:100% ;
background-color: aquamarine;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 40px;
padding-left: 10%;
padding-right: 10%;
}
.logo{
color: white;
font-size: 28px;
}
span1{
color: rgb(211, 31, 31);
}
span{
color: blue;
}
span3{
color: red;
}
nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a{
color: rgb(34, 19, 19);
text-decoration: none;
font-weight: bold ;
}
nav ul li a:hover{
color: rgb(233, 13, 13);
transition:3s;
}
button{
border: non;
background: #ea1538;
padding: 12px 30px;
border-radius: 30px;
color: white;
font-weight: bold;
font-size: 15px;
transition: 4s;
}
button:hover{
transform: scale(1.3);
cursor: pointer;
}
nav ul li {
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo"> <span3>Sigma </span><span>Batch</span> <span1> Op</span></h2>
<ul>
<li> </i><a href="#"> Home</a> </li><i class="arrow down"></i>
<li><a href="#"> Servises</a> </li><i class="arrow down"></i>
<li><a href="#">About</a></li><i class="arrow down"></i>
<li><a href="#"> Portfolio</a></li><i class="arrow down"></i>
<li><a href="#"> Contact us</a></li><i class="arrow down"></i>
</i>
</ul>
<button type="button"> subscribe</button>
</nav>
</div>
</body>
</html>
#sigmabatchop harry bhai
#sigmabatchop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display flex</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
/* background-color: rgb(236, 167, 167); */
height: 79px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
text-decoration: none;
padding: 10px 20px;
font-size: 25px;
}
nav ul li a:hover {
color: white;
background-color: black;
border-radius: 23px;
}
.logo img {
width: 150px;
border: 2px solid brown;
border-radius: 23px;
filter: drop-shadow(2px 2px);
}
div.home {
padding: 20px;
width: 100%;
text-align: center;
}
.span {
color: brown;
}
.primary {
font-size: 4rem;
}
.para {
font-size: 1.8rem;
padding: 20px;
;
}
.btn {
margin: 20px;
}
.btn a {
width: 200px;
background-color: rgb(20, 175, 175);
height: 30px;
padding: 10px;
border-radius: 5px;
border: 2px solid rgb(12, 158, 158);
text-decoration: none;
color: white;
font-size: 1.3rem;
margin-top: 20px;
}
.container {
display: flex;
width: 100%;
text-align: center;
}
.box {
width: 20%;
height: 200px;
background-color: antiquewhite;
text-align: center;
position: relative;
margin: 10px;
padding: 20px;
left: 310px;
border-radius: 30px;
}
.english {
color: brown;
font-size: 2.2rem;
padding: 10px;
}
.download {
position: relative;
top: 60px;
width: 200px;
background-color: rgb(20, 175, 175);
height: 30px;
padding: 10px;
border-radius: 5px;
border: 2px solid rgb(12, 158, 158);
text-decoration: none;
color: white;
font-size: 1.3rem;
}
.down{
position: relative;
top: 60px;
width: 200px;
background-color: rgb(113, 126, 13);
height: 30px;
padding: 10px;
border-radius: 5px;
border: 2px solid rgb(144, 172, 21);
text-decoration: none;
color: white;
font-size: 1.3rem;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="http://logos.textgiraffe.com/logos/logo-name/Ashraf-designstyle-candy-m.png"
alt="">
</div>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</header>
<main>
<div class="home">
<h1 class="primary">Download<span class="span">AshrafEdit</span> forWindows</h1>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, laboriosam.</p>
<div class="btn">
<a href="#">download Mac OR Linux</a>
</div>
</div>
</main>
<section>
<div class="container">
<div class="box">
<h1 class="english">English</h1>
<a class="download" href="#">download 32-bt</a>
<a class="down" href="#">download 64-bt</a>
</div>
<div class="box">
<h1 class="english">English</h1>
<a class="download" href="#">download 32-bt</a>
<a class="down" href="#">download 64-bt</a>
</div>
<div class="box">
<h1 class="english">English</h1>
<a class="download" href="#">download 32-bt</a>
<a class="down" href="#">download 64-bt</a>
</div>
</div>
</section>
</body>
</html>
Challenge Accepted
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise-6-practice</title>
<style>
body{
font-size: 40px;
text-transform: capitalize;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
padding: 20px;
}
.list-type {
list-style: none;
display: flex;
padding-right: 40px;
}
a{
text-decoration: none;
margin: 0 20px;
color: #1f1a1a;
}
a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="data:image/jpeg;base64,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"
alt="">
</div>
<ul class="list-type">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">services</a></li>
<li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAAB7CAMAAAAfU9HRAAAAYFBMVEUHCAr///8AAADV1NV+f38AAAT8/Pzr6+vLy8v19fVpaWno6OgDBAfZ2dr4+Pg5OTkVFRVBQUGOjo6IiIirq6thYWEtLi7h4uLAwcG1tbV4eHghISNZWVlNTU6bnJwlJiZyb1mUAAADH0lEQVR4nO2ZiW7jMAxErfERO5bjOGebo/n/v1xJFOUjAYpdLGAJ4ENRpG4LTFhqOFSzTBAEQRAEQRAEQRAEQRAEQRAEQYgTjbUV/Cs4Jiod2902SellVqvafE4PFEqpIsGiA62qVIvkpGuclOUEvbaUvwR945Tv+sSKrlE74ZWqEys6zopJyxlx74Ly7p6SdBx9r1hSmqS4NCS8sp+aSzLS2RHVhuqejjPisSPhzw054yOVontHVD/4oRepOCNupPcK4Eovb0kUPTiiMXJsvTO+UpDOLfJlWqTEFzfO2rJ+B/dmciz5sCbgjBrfyodE97UxSDePvhH7joHzzpn4xnc2XuSMVfTxZexyX2MKApUp+rrCfgV9S9J5+iDrVGUiQPzTyIct1YWinxPZjTQ6OpO8PGvrjM0++pJnYfq0PH1g4kvsSdf1h/fFin3RntrOlVxHa4zYZ7aZ0e9cvzRPL7280/HEPlbpqEnrmzOW9HiINTOi8KaNi4+I51l3m3EaZ7vjYpx8IOkh507aA73ZNaK8fXE9Ujut1hkdh1FoafaNyamNCLyco5CL4+G2Z7UZI6L/O8SXGd28sUmL/lFhnLGaJEZb8jak9rjAjS5XNjQs8aKUXj1DfGkjXex44+SZj4N3Rr77R0FvrY2s6CZnVbMtH/tuXmPNi90hqqKHbDuMJ7JgZ6RHGoPPM0NM0hcrHD0Lty78wN98xbRj2CHjjGVaTjz9meXpg4EWOxXPOCq5vMfltJ/XmBuojmabDo44V/TmjBp+m47FGZH5Lliu91zjnBcinP1bzOKQztZtHBEL/GI3OmNNByIOZ8TTX/Pfgf5YTLn5DNBkYZLSmwxLx5pMlzfcqRtGqo/OGMftCx4k72pToAmE1VL8rMZh6Vj/+qVEPnFE7PMPupWNiPTjmq9j8tWd0R5PW+arv0YcPisffefD0rEK2C8ckXPVkvzFmdFfx6x9d4Siyw3dT8iIfZ1/ohuLfqJfWXmb1pl37tC1S0tnQiov356shbYfevZA88Pxhdaz72eryxYEQRAEQRAEQRAEQRAEQRAEQfgv/AFn2BxgcGfY/gAAAABJRU5ErkJggg=="
alt="image" width="90px"></li>
</ul>
</div>
</body>
</html>
#sigmabatchop
#html
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="project.css">
</head>
<body>
<div class="titlebar">
<button id="id1" onclick=""><img src="amazonlogo.png" alt=""></button>
<button id="id2" onclick=""> <img src="location.png" style="width:30px;height:30px;">Update Location</button>
<div id="id6">
<select name="" id="id4">
<option value="" selected>All</option>
<option value="">Electronics</option>
<option value="">Cloth</option>
<option value="">Home Decore</option>
<option value="">Personal Care</option>
<option value="">Festival</option>
</select>
<input type="search" id="id3" placeholder="Search Amazon.in">
<img id="id5" src="searchicon.jpg">
</div>
<select name="" id="id7">
<option value="" selectd>EN</option>
<option value="">HINDI</option>
<option value="">MARATHI</option>
</select>
<select name="" id="id8" >
<option value="" selected>Account</option>
<option value="">Your Order</option>
</select>
<button id="id9" onclick=""> <img src="signin.png" style="width:30px;height:30px;">Sign in</button>
<button id="id10" onclick=""> <img src="cart.png" style="width:30px;height:30px;">Cart</button>
</div>
</body>
</html>
css code
.titlebar{
height:70px;
background-color: rgb(1, 1, 34);
margin-top: 0px;
display: flex;
justify-content: space-around;
}
img{
height: 50px;
width: 150px;
object-fit: fill;
}
#id1{
background-color: rgb(1, 1, 34);
width:150px;
border: 1px solid rgb(1, 1, 34);
}
#id6{
display: flex;
justify-content: left;
}
#id3,#id4{
width: 350px;
height: 35px;
font-size: large;
margin-left: 0;
}
#id4{
width:60px;
background-color: rgba(234, 223, 223, 0.893);
border: 2px solid rgb(1, 1, 34);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#id5{
height: 35px;
width:35px;
background-color: rgb(248, 170, 62);
margin-left: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#id3,#id4,#id5{
margin-top: 18px;
outline: 2px solid rgb(1, 1, 34);
}
#id7{
font-size: medium;
font-weight: 700;
width:60px;
background-color: rgb(1, 1, 34);
color: white;
border: 1px solid rgb(1, 1, 34);
}
#id8,#id9,#id10,#id2{
font-weight: 700;
font-size: medium;
text-align: center;
background-color: rgb(1, 1, 34);
color:white;
border: 1px solid rgb(1, 1, 34);
width:70px;
}
#id8{
width: 100px;
}
#id2{
font-size: smaller;
}
thank you so much harry bhai
Pls harry bhai pls pick my solution
#challengeaccepted #sigmabatchop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXERCISE – 6</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&display=swap'😉;
* {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
}
nav {
height: 10vh;
width: 65vw;
display: flex;
/* justify-content: center; */
align-items: center;
}
.logo {
height: 40px;
width: 40px;
background: #000;
color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
font-family: 'Poppins', sans-serif;
position: relative;
right: 3px;
font-size: larger;
font-weight: 900;
}
.name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bolder;
margin-left: 5px;
position: relative;
top: 6px;
}
.copyright {
font-family: sans-serif;
font-size: 7px;
position: relative;
bottom: 4px;
}
.nav-container {
width: 99%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: end;
align-items: end;
}
.nav-item {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: lighter;
}
.fa-solid {
padding-left: 5px;
position: relative;
top: 2px;
}
.icon1 {
position: relative;
right: 32px;
bottom: 3px;
}
main {
height: 40vh;
width: 100vw;
}
.content {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 50%;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
.text {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: bolder;
}
.othertext{
text-align: center;
font-size: 20px;
}
main .download{
display: flex;
justify-content: center;
align-items: center;
}
.download{
height: 40px;
width: 20vw;
background: rgb(0, 225, 255);
border: 2px solid aqua;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.download-container{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
button{
background: none;
border: none;
font-size: 11px;
font-weight: 900;
color: #fff;
}
button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<div class="logo">
<p>UE</p>
</div>
<div class="name">
<p><b>UltraEdit</b></p>
<div class="copyright">
<p>An idera, Inc. Company</p>
</div>
</div>
<div class="nav-container">
<div class="nav-item">
<p>Products</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Pricing</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Resources</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>About us</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="feedback">
<i class="fa-solid fa-comment icon nav-item"></i>
<i class="fa-regular fa-square icon1 nav-item"></i>
</div>
</div>
</nav>
</div>
<main>
<div class="content">
<p>Download
<p class="text">UltraEdit</p> for Windows
<p>
</div>
<div class="othertext">
<p>Download and try UltraEdit before you buy it! This download includes the full Windows <p></p> version of the text editor.</p>
</div>
<div class="download-container">
<button>
<div class="download">
<p>DOWNLOAD MAC OR LINUX VERSION</p>
</div>
</button>
</div>
</main>
<script src="https://kit.fontawesome.com/a549f001ab.js" crossorigin="anonymous"></script>
</body>
</html>
#challengeaccepted #sigmabatchop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXERCISE – 6</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&display=swap'😉;
* {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
}
nav {
height: 10vh;
width: 65vw;
display: flex;
/* justify-content: center; */
align-items: center;
}
.logo {
height: 40px;
width: 40px;
background: #000;
color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
font-family: 'Poppins', sans-serif;
position: relative;
right: 3px;
font-size: larger;
font-weight: 900;
}
.name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bolder;
margin-left: 5px;
position: relative;
top: 6px;
}
.copyright {
font-family: sans-serif;
font-size: 7px;
position: relative;
bottom: 4px;
}
.nav-container {
width: 99%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: end;
align-items: end;
}
.nav-item {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: lighter;
}
.fa-solid {
padding-left: 5px;
position: relative;
top: 2px;
}
.icon1 {
position: relative;
right: 32px;
bottom: 3px;
}
main {
height: 40vh;
width: 100vw;
}
.content {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 50%;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
.text {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: bolder;
}
.othertext{
text-align: center;
font-size: 20px;
}
main .download{
display: flex;
justify-content: center;
align-items: center;
}
.download{
height: 40px;
width: 20vw;
background: rgb(0, 225, 255);
border: 2px solid aqua;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.download-container{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
button{
background: none;
border: none;
font-size: 11px;
font-weight: 900;
color: #fff;
}
button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<div class="logo">
<p>UE</p>
</div>
<div class="name">
<p><b>UltraEdit</b></p>
<div class="copyright">
<p>An idera, Inc. Company</p>
</div>
</div>
<div class="nav-container">
<div class="nav-item">
<p>Products</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Pricing</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Resources</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>About us</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="feedback">
<i class="fa-solid fa-comment icon nav-item"></i>
<i class="fa-regular fa-square icon1 nav-item"></i>
</div>
</div>
</nav>
</div>
<main>
<div class="content">
<p>Download
<p class="text">UltraEdit</p> for Windows
<p>
</div>
<div class="othertext">
<p>Download and try UltraEdit before you buy it! This download includes the full Windows <p></p> version of the text editor.</p>
</div>
<div class="download-container">
<button>
<div class="download">
<p>DOWNLOAD MAC OR LINUX VERSION</p>
</div>
</button>
</div>
</main>
<script src="https://kit.fontawesome.com/a549f001ab.js" crossorigin="anonymous"></script>
</body>
</html>
#challengeaccepted #sigmabatchop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXERCISE – 6</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&display=swap'😉;
* {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
}
nav {
height: 10vh;
width: 65vw;
display: flex;
/* justify-content: center; */
align-items: center;
}
.logo {
height: 40px;
width: 40px;
background: #000;
color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
font-family: 'Poppins', sans-serif;
position: relative;
right: 3px;
font-size: larger;
font-weight: 900;
}
.name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bolder;
margin-left: 5px;
position: relative;
top: 6px;
}
.copyright {
font-family: sans-serif;
font-size: 7px;
position: relative;
bottom: 4px;
}
.nav-container {
width: 99%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: end;
align-items: end;
}
.nav-item {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: lighter;
}
.fa-solid {
padding-left: 5px;
position: relative;
top: 2px;
}
.icon1 {
position: relative;
right: 32px;
bottom: 3px;
}
main {
height: 40vh;
width: 100vw;
}
.content {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 50%;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
.text {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: bolder;
}
.othertext{
text-align: center;
font-size: 20px;
}
main .download{
display: flex;
justify-content: center;
align-items: center;
}
.download{
height: 40px;
width: 20vw;
background: rgb(0, 225, 255);
border: 2px solid aqua;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.download-container{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
button{
background: none;
border: none;
font-size: 11px;
font-weight: 900;
color: #fff;
}
button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<div class="logo">
<p>UE</p>
</div>
<div class="name">
<p><b>UltraEdit</b></p>
<div class="copyright">
<p>An idera, Inc. Company</p>
</div>
</div>
<div class="nav-container">
<div class="nav-item">
<p>Products</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Pricing</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Resources</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>About us</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="feedback">
<i class="fa-solid fa-comment icon nav-item"></i>
<i class="fa-regular fa-square icon1 nav-item"></i>
</div>
</div>
</nav>
</div>
<main>
<div class="content">
<p>Download
<p class="text">UltraEdit</p> for Windows
<p>
</div>
<div class="othertext">
<p>Download and try UltraEdit before you buy it! This download includes the full Windows <p></p> version of the text editor.</p>
</div>
<div class="download-container">
<button>
<div class="download">
<p>DOWNLOAD MAC OR LINUX VERSION</p>
</div>
</button>
</div>
</main>
<script src="https://kit.fontawesome.com/a549f001ab.js" crossorigin="anonymous"></script>
</body>
</html>
#challengeaccepted #sigmabatchop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXERCISE – 6</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&display=swap'😉;
* {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
}
nav {
height: 10vh;
width: 65vw;
display: flex;
/* justify-content: center; */
align-items: center;
}
.logo {
height: 40px;
width: 40px;
background: #000;
color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
font-family: 'Poppins', sans-serif;
position: relative;
right: 3px;
font-size: larger;
font-weight: 900;
}
.name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bolder;
margin-left: 5px;
position: relative;
top: 6px;
}
.copyright {
font-family: sans-serif;
font-size: 7px;
position: relative;
bottom: 4px;
}
.nav-container {
width: 99%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: end;
align-items: end;
}
.nav-item {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: lighter;
}
.fa-solid {
padding-left: 5px;
position: relative;
top: 2px;
}
.icon1 {
position: relative;
right: 32px;
bottom: 3px;
}
main {
height: 40vh;
width: 100vw;
}
.content {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 50%;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
.text {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: bolder;
}
.othertext{
text-align: center;
font-size: 20px;
}
main .download{
display: flex;
justify-content: center;
align-items: center;
}
.download{
height: 40px;
width: 20vw;
background: rgb(0, 225, 255);
border: 2px solid aqua;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.download-container{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
button{
background: none;
border: none;
font-size: 11px;
font-weight: 900;
color: #fff;
}
button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<div class="logo">
<p>UE</p>
</div>
<div class="name">
<p><b>UltraEdit</b></p>
<div class="copyright">
<p>An idera, Inc. Company</p>
</div>
</div>
<div class="nav-container">
<div class="nav-item">
<p>Products</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Pricing</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Resources</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>About us</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="feedback">
<i class="fa-solid fa-comment icon nav-item"></i>
<i class="fa-regular fa-square icon1 nav-item"></i>
</div>
</div>
</nav>
</div>
<main>
<div class="content">
<p>Download
<p class="text">UltraEdit</p> for Windows
<p>
</div>
<div class="othertext">
<p>Download and try UltraEdit before you buy it! This download includes the full Windows <p></p> version of the text editor.</p>
</div>
<div class="download-container">
<button>
<div class="download">
<p>DOWNLOAD MAC OR LINUX VERSION</p>
</div>
</button>
</div>
</main>
<script src="https://kit.fontawesome.com/a549f001ab.js" crossorigin="anonymous"></script>
</body>
</html>
#challengeaccepted #sigmabatchop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXERCISE – 6</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&display=swap'😉;
* {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
}
nav {
height: 10vh;
width: 65vw;
display: flex;
/* justify-content: center; */
align-items: center;
}
.logo {
height: 40px;
width: 40px;
background: #000;
color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
font-family: 'Poppins', sans-serif;
position: relative;
right: 3px;
font-size: larger;
font-weight: 900;
}
.name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bolder;
margin-left: 5px;
position: relative;
top: 6px;
}
.copyright {
font-family: sans-serif;
font-size: 7px;
position: relative;
bottom: 4px;
}
.nav-container {
width: 99%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: end;
align-items: end;
}
.nav-item {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: lighter;
}
.fa-solid {
padding-left: 5px;
position: relative;
top: 2px;
}
.icon1 {
position: relative;
right: 32px;
bottom: 3px;
}
main {
height: 40vh;
width: 100vw;
}
.content {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 50%;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
.text {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: bolder;
}
.othertext{
text-align: center;
font-size: 20px;
}
main .download{
display: flex;
justify-content: center;
align-items: center;
}
.download{
height: 40px;
width: 20vw;
background: rgb(0, 225, 255);
border: 2px solid aqua;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.download-container{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
button{
background: none;
border: none;
font-size: 11px;
font-weight: 900;
color: #fff;
}
button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<div class="logo">
<p>UE</p>
</div>
<div class="name">
<p><b>UltraEdit</b></p>
<div class="copyright">
<p>An idera, Inc. Company</p>
</div>
</div>
<div class="nav-container">
<div class="nav-item">
<p>Products</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Pricing</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>Resources</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="nav-item">
<p>About us</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="feedback">
<i class="fa-solid fa-comment icon nav-item"></i>
<i class="fa-regular fa-square icon1 nav-item"></i>
</div>
</div>
</nav>
</div>
<main>
<div class="content">
<p>Download
<p class="text">UltraEdit</p> for Windows
<p>
</div>
<div class="othertext">
<p>Download and try UltraEdit before you buy it! This download includes the full Windows <p></p> version of the text editor.</p>
</div>
<div class="download-container">
<button>
<div class="download">
<p>DOWNLOAD MAC OR LINUX VERSION</p>
</div>
</button>
</div>
</main>
<script src="https://kit.fontawesome.com/a549f001ab.js" crossorigin="anonymous"></script>
</body>
</html>