ULTRAEDIT WEBSITE:-(VIDEO47)


SOURCE CODE:-

CSS:-

  /* .logo {
            height: 30px;
            width: 40px;
            background-color: blue;
        } */
  .logo img {
      width: 164px;
  }

  nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .right ul {
      display: flex;
      gap: 34px;
  }

  .right ul li {
      list-style: none;
      display: flex;
      align-items: center;
      padding: 0 5px;
      cursor: pointer;
  }

  .right ul li span {
      padding: 0 5px;
  }

  .first {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 23px;
      margin: 70px;
      font-family: sans-serif;
  }

  .first span {
      font-size: 40px;
  }

  section span img {
      width: 82px;
      margin: 0 23px;
  }

  .first p {
      font-size: 22px;
      width: 55vw;
      text-align: center;
  }

  .btn {
      background: #00b6d1;
      padding: 14px 16px;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 700;
      margin: 12px 0;
      cursor: pointer;
     
  }
  .btn a{
    text-decoration: none;
    color: white;
  }

  .flex {
      display: flex;
  }

  .small {
      font-size: 12px;
  }

  .second {
      max-width: 65vw;
      margin: auto;
  }

  .green {
      background: #5cb85c;
  }

  .item {
      padding: 23px;
      background-color: #f9f9f9;
      border-radius: 6px;
      font-size: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align: center;
  }

  .item-lang {
      font-weight: 700;
      text-align: center;
      padding-bottom: 36px;
  }

  .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px ;
  }

  .download :nth-child(2) {
      font-size: 23px;
  }
  .download img{
    padding: 0 12px;
  }
  .download{
    font-family: sans-serif;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  @media screen and (max-width:1145px) {
    .grid {
        /* background-color: red; to check media query working or not */
        grid-template-columns: 1fr;
    }
  }

HTML:-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultraedit</title>
    <link rel="stylesheet" href="style.css">
    <title>Download UltraEdit text editor for Windows</title>
</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <img src="https://www.ultraedit.com/wp-content/uploads/2023/01/UE-Logo-1.webp" alt="">
            </div>
            <div class="right">
                <ul>
                    <li><span>Products</span> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M6 9L11.2929 14.2929C11.6262 14.6262 11.7929 14.7929 12 14.7929C12.2071 14.7929 12.3738 14.6262 12.7071 14.2929L18 9"
                                stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg></li>
                    <li><span>For busi</span>ness<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M6 9L11.2929 14.2929C11.6262 14.6262 11.7929 14.7929 12 14.7929C12.2071 14.7929 12.3738 14.6262 12.7071 14.2929L18 9"
                                stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg></li>
                    <li><span>Resource</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M6 9L11.2929 14.2929C11.6262 14.6262 11.7929 14.7929 12 14.7929C12.2071 14.7929 12.3738 14.6262 12.7071 14.2929L18 9"
                                stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg></li>
                    <li><span>Support<< /span><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M6 9L11.2929 14.2929C11.6262 14.6262 11.7929 14.7929 12 14.7929C12.2071 14.7929 12.3738 14.6262 12.7071 14.2929L18 9"
                                        stroke="#141B34" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg></li>
                    <li><span>Our comp</span>any<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M6 9L11.2929 14.2929C11.6262 14.6262 11.7929 14.7929 12 14.7929C12.2071 14.7929 12.3738 14.6262 12.7071 14.2929L18 9"
                                stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg></li>
                    <li><img src="language.png" width="20" alt=""></li>
                </ul>
            </div>
        </nav>
    </header>
    <main>
        <section class="first">
            <span>Download <b>UltraEdit</b> for Windows<img width="34"
                    src="https://www.ultraedit.com/wp-content/uploads/2022/10/Reviews.png" alt=""> </span>
            <p>Download and try UltraEdit before you buy it! This download includes the full Windows version of the text
                editor.</p>
            <div>
                <button class="btn">Download Mac or Linux version</button>
            </div>
        </section>
        <section class="second">
            <div class="download">
                <img src="https://www.ultraedit.com/wp-content/uploads/2022/11/UE.png" alt="">
                <span>Download UltraEdit </span>
                <span class="small">v2024.1(released 2024-08-27) | Hotfix</span>
            </div>
            <div class="grid">
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
                <div class="item">
                    <div class="item-lang">English</div>
                    <button class="btn blue"><a href="/ue_english_64.exe">Download 32-bit</a></button>
                    <button class="btn green"><a href="/ue_english_64.exe">Download 64-bit</a></button>
                </div>
            </div>
        </section>
    </main>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Image
 FULL FLAGED WEBSITE-1: WEBSITE: HTML-CODE: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title > Document </ title > </ head > < body >     < div id = "nav" >         < img src = "https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg" alt = "" >         < h4 > TOPTRACER RANGE </ h4 >         < h4 > GOLF LESSONS </ h4 >         < h4 > ADVENTURE GOLF </ h4 >         < h4 > CAFE </ h4 >         < h4 > EVENTS </ h4 >     </ div >     < div id = "cursor" ><...
Read more

SIGMA WEB DEV JAVASCRIPT CLASS NOTES:

  JavaScript Variables, Data Types & Objects | Sigma Web Development Course    - Tutorial  #55   console . log ( "Shivam" ) ; console . log ( "hey this is tutorial 55" ) ; let a = 6 ; // data type number ... let b = 5 ; // data type number ... let c = "Harry" ; // data type "string" = collection of characters ... // console.log(a + b + 8); // // using typeof operator // console.log(typeof a,typeof b,typeof c); let _a = "Shubham" ; // chalega // var 55a = "Rohan"; // nahi chalega // const a1 = 6; redefining const is not allowed // a1 = a1 + 2; // its not allowed {     let a = 66 ;     console . log ( a ) ; } console . log ( a ) ; let x = "Harry bhai" ; let y = 3.33 ; let z = 22 ; const p = true ; let q = undefined ; let r = null ; console . log ( x , y , z , p , q , r ) ; console . log ( typeof x , typeof y , typeof z , typeof p , typeof q , typeof r ) ; // console.log(typ...
Read more

WEB DEV CODE NOTES :

@VIDEO - 63 (#JS , INDEX.JS) let arr = [ 1 , 2 , 3 , 4 , 5 ] index   0 , 1 , 2 , 3 , 4 arr [ 0 ] = 5666 ; console . log ( arr ) console . log ( arr .length) console . log ( arr , typeof arr ) console . log ( arr .length) console . log ( arr [ 0 ]) console . log ( arr [ 2 ]) console . log ( arr [ 4 ]) console . log ( arr . toString ()) console . log ( arr . join (" and ")) console . log ( arr . pop ()) //ye last wale element ko bahar  #nikal leta hai console . log ( arr . push ( 100 )) // ye last me element ko @add kar deta hai Notes : Or ye jo pop , push hai ye array ki length return karta hai ... . Notes : " pop " ye " shift " ka # Bhai or " push " ye " unshift " ka # Bhai hota hai ... . console . log ( arr . shift ())   //ye first wale element ko bahar #nikal leta hai console . log ( arr . unshift ( 12 )) // ye first me element ko @add kar deta hai console . log ( arr ) let a1 = [ 1 , 2 , 3 ] le...
Read more