lanpage/index.html at main · rayssarrsilva/lanpage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proper English</title>
    <link rel="stylesheet" href="style.css">

    <!-- roboto font from google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="hero">
        <div class="inside-hero">
            <div class="header-top">
                <h2 class="left">Proper English</h2>
                <ul class="right">
                    <li><a href="">Sobre as Aulas</a></li>
                    <li><a href="">Metodologia</a></li>
                    <li><a href="">Depoimentos</a></li>
                </ul>
            </div>
            <div class="header-center">
                <div class="column-left">
                    <h1>Fale inglês com confiança</h1>
                    <p>Aulas particulares 100% personalizadas para seu nível e seus objetivos. Evolução real desde a primeira semana.
                    </p>
                    <div id="div-button">
                        <button>Agendar</button>
                    </div>
                </div>
                <img src="./images/webclass.jpg" alt="Guy having a web class of english sitting in the chair in front of the computer">
            </div>
        </div>
    </div>

    <div class="information">
        <h1 class="title-info">Como funcionam as aulas?</h1>

        <div class="img-block">
            <div class="block">
                <img src="./images/twopeople.jpg" alt="two people talking" class="image">
                <p>Você aprende a se comunicar em situações do dia a dia, viagens, trabalho e entrevistas.</p>
            </div>
            <div class="block">
                <img src="./images/calendar.jpg" alt="girl marking and lookin a calendar" class="image">
                <p>Cada aluno recebe um plano estratégico baseado no nível atual e nos objetivos.</p>
            </div>
            <div class="block">
                <img src="./images/clock.jpg" alt="image of a clock on a green wall" class="image">
                <p>Aulas adaptadas à sua rotina, com possibilidade de reposição agendada.</p>
            </div>
            <div class="block">
                <img src="./images/chart.jpg" alt="chart with a compass marking the yellow bar" class="image">
                <p>Feedback constante e metas claras para garantir progresso consistente.</p>
            </div>
        </div>
    </div>

    <div class="quote">
        <div class="inside-quote">
            <i class="quote-text">
                Eu travava completamente para falar inglês. Em poucas semanas comecei a montar frases com segurança e
                hoje já participo de reuniões no trabalho sem medo.            </i>
            <p class="autor">-Aluno particular</p>
        </div>
    </div>

    <div class="action">
        <div class="blue-container">
            <div class="h3-p">
                <h3>Comece agora sua jornada no inglês!</h3>
                <p>Agende uma aula experimental e descubra seu nível, seus pontos fortes e o plano ideal para você evoluir rápido.</p>
            </div>
            <div class="intern-bottom">
                <button> Quero Agendar </button>
            </div>
        </div>
    </div>

    <div class="footer">
        Copyright © 2026 Proper English
    </div>
</body>
</html>