Good afternoon, colleagues! Looking for a couple tips for a newbie, i.e. to me.

Now I am analyzing the structure of the Landing page.

I downloaded the Landing page Sample Template from one site and cannot understand two questions:

  1. Why in the original logo.png (2 acres) do not have white borders along the edges of the site, and the refrigerator stored instead, also in *.png format has white borders, as in the original. What is the reason?

  2. How exactly when reducing the screen, the top menu disappears and instead a button with 3 bars appears, containing a drop-down menu.

I watch the nested responsive.css , in it texts and buttons generally decrease. And the code of the drop-down button is not included. Where to look for this button? In CSS files or in JS files?

This is the code for the drop-down button:

 <div class="container-fluid nav-bar"> <div class="navbar-header"> // ΠΊΠΎΠ΄ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html"><img src="img/logo.png" alt="" class="img-responsive logo"></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> // ΠΊΠΎΠ΄ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ мСню <ul class="nav navbar-nav navbar-right"> <li><a href="#home">Π”ΠΎΠΌΠΎΠΉ</a></li> <li><a href="#features">Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ</a></li> <li><a href="#about">ОписаниС</a></li> <li><a href="#testimonials">ΠžΡ‚Π·Ρ‹Π²Ρ‹</a></li> <li><a href="#pricing">Π¦Π΅Π½Ρ‹</a></li> <li><a href="#contact">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li> </ul> </div>

And this is the responsive.css code:

 @media (min-width: 480px) and (max-width: 767px) { .banner h3 { font-size: 11px; margin-top: 105px; } .banner h1 { font-size: 25px; } .banner p { font-size: 14px; margin-top: 17px; } .download-btn { width: 130px; height: 40px; font-size: 12px; margin-top: 30px; } .features-btn { width: 130px; height: 40px; font-size: 12px; margin-top: 30px; } h2 { font-size: 25px; margin-bottom: 20px; } .contact { height: 900px; } h4 { font-size: 12px; margin-top: 40px; } .features p { font-size: 15px; margin-bottom: 40px; } .features h3 { font-size: 20px; } .details p { font-size: 14px; margin: 20px 0; } .details ul li { font-size: 14px; } .feature-detail h4 { margin-top: 50px; } .feature-detail p { font-size: 13px; margin-top: 10px; } .pricing-slide p { font-size: 16px; margin-top: 35px; margin-bottom: 20px; } .item h6 { font-size: 13px; } .item h5 { font-size: 12px; } .item img { margin-bottom: 95px; } .download p { font-size: 24px; padding: 30px 0; } .download button{ margin-top: 0; margin-bottom: 20px; } .contact p { font-size: 14px; } .contact-heading img { margin-bottom: 25px; }

enter image description here enter image description here enter image description here enter image description here

  • one
    break your question into several - Mikhail Vaysman

1 answer 1

  1. You, apparently, have saved your refrigerator along with the background (substrate).
  2. This is called adaptability , which is implemented using media queries.

  3. Where to look for this button? - In html:

     // ΠΊΠΎΠ΄ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    icon-bar is exactly those 3 bars styled with .css . But the functionality (when you click the menu opens) is implemented using .js .

    Appears on phones and disappears on desktops - adaptability, which is implemented in .css with such constructions / styles:

     @media (min-width: NNpx) { ... }

  4. The layout of this landing made using the framework - bootstrap

You can read and understand about layout, adaptability and much more on htmlbook

  • 1) Thanks for the 1 reply. And besides Photoshop, someone else can remove the substrate from the photo? Are there any free simple photo editors? - Aibek Sydygaliev
  • 2) But you did not understand the 2nd question: I know that there is adaptability, that is why I cited the example "responsive.css". I am not clear by the code exactly where the operation occurred (remove the top menu, and instead put a button with 3 bars). Where to find this trigger? And by what value? Maybe in the class "navbar-toggle collapsed"? - Aibek Sydygaliev
  • 3) And a new general question: what do professional PHP programmers most often do with Landing Page? Saw a video on Adobe MUSE, is it popular? What are you doing? - Aibek Sydygaliev
  • @AibekSydygaliev, @media (min-width: 768px){ .navbar-toggle { display: none; } } @media (min-width: 768px){ .navbar-toggle { display: none; } } and this is the same @media (min-width: 768px) { ... } for the list \ navigation. Design by the rule "from smaller to bigger", i.e. At first, styles are written for smaller screen resolutions (initially the display: block; button display: block; ), and then media queries set styles for devices with higher resolutions (for 768px and more, we hide the button and make the list visible and horizontal display: block; ); - HamSter
  • one
    OK. Thanks for answers! - Aibek Sydygaliev