Landing Page - Flora Rio Preto

by francisco_negrao

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<body>

<main>
  
  <section class="firstSection">
    
     <img class="mobileImage img-fluid" src="https://cdn.interago.com.br/img/png/w_0_q_8/30/mc/Caso Studo//DSC04484-removebg-preview.v1" class="img-fluid" />
    
    <div class="side01">
      <div class="imageContent01">   
        <img src="https://www.interago.com.br/App/Sites/30/mc/Caso Studo/Grupo 8.svg" />
        
        <img src="https://cdn.interago.com.br/img/png/w_0_q_8/30/mc/Caso Studo//Grupo 27" class="img-fluid" />
        
        </div>
        
        <div class="imageContent02">
        
        <img src="https://cdn.interago.com.br/img/png/w_0_q_8/30/mc/Caso Studo//Grupo 24" class="img-fluid" />
        
        <img src="https://cdn.interago.com.br/img/png/w_0_q_8/30/mc/Caso Studo//7324329878_f33fb4a6f7_b-removebg-preview.v1" class="img-fluid" />
        
        </div>
        
    </div>
    
    <div class="side02">
    
      <!-- Header -->
      
      <header>
  <div class="logo">
    <img src="https://cdn.interago.com.br/img/png/w_0_q_8/30/mc/Logo%20e%20FAV//3A63EC4B57B5C2D505FD-removebg-preview" />
  </div>
  
  <ul>
    <li><a class="fBlack" href="#secondSection">Perguntas Frequentes</a></li>
    <li><a class="fBlack" href="#thirdSection">Depoimentos</a></li>
    <li><a class="fBlack" href="#fourthSection">Como comprar</a></li>
  </ul>
</header>
      
      <!-- End Header -->
    
      <img src="https://www.interago.com.br/App/Sites/30/mc/Caso Studo/Grupo 8.svg" />
    
      <h1 class="f45 fGreen">
      <strong>Compre</strong> por <strong>WhatsApp</strong> <br />
        <span class="f90 fCustom">Véu de noiva !</span>
      </h1>
      <p class="f30 mt45">
      apenas <span class="fGreen"><strong>R$35,00</strong></span> o Buque pronto.
      </p>
      <p...

CSS

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
}

a {
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  color: #418843;
}

header {
display: flex;
    justify-content: space-between;
    padding: 10px 40px;
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 0;
    border-bottom: solid 1px rgb(45 45 42 / 25%);
    width: 100%;
}

header a {
  font-size: 16px;
}

header ul {
  display: flex;
  gap: 30px;
  align-items: center;
  margin: 0px;
}

.mt45 {
  margin-top: 25px;
}

.fBlack {
  color: #2d2d2a;
}

.bgPink {
  background-color: #D2167C;
}

.fGreen {
  color: #418843;
}

.f45 {
  font-size: 45px;
}

.f90 {
  font-size: 90px;
}

.f25 {
  font-size: 25px;
}

.f18 {
  font-size: 18px;
}

.f30 {
  font-size: 30px;
}

.f35 {
  font-size: 35px;
}

.f21 {
  font-size: 21px;
}

.firstSection {
  display: flex;
  height: 100vh;
  min-height: 1080px;
  overflow: hidden;
}

.side01 {
  background: rgb(211,232,179);
background: -moz-radial-gradient(circle, rgba(211,232,179,1) 0%, rgba(178,221,111,1) 50%, rgba(165,202,106,1) 100%);
background: -webkit-radial-gradient(circle, rgba(211,232,179,1) 0%, rgba(178,221,111,1) 50%, rgba(165,202,106,1) 100%);
background: radial-gradient(circle, rgba(211,232,179,1) 0%, rgba(178,221,111,1) 50%, rgba(165,202,106,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d3e8b3",endColorstr="#a5ca6a",GradientType=1);
    width: 40%;
    position: relative;
    padding-top: 102px;
}

.side01 .imageContent01 {
  position: relative;
  max-width: 400px;
}

.side01 .imageContent02 {
  position: relative;
  max-width: 650px;
}

.side01 .imageContent01 img:nth-child(1) {
  max-width: 200px;
  position: absolute;
  right: 0;
  top: -50px;
}

.side01...

JavaScript

sortList(document.getElementsByClassName('list')[0]);

function sortList(ul){
    var new_ul = ul.cloneNode(false);
		console.log(new_ul);
    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}