Landing-Page/index.html at master · helloLari/Landing-Page · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="Pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site</title>
    <link rel="stylesheet" href="style/style.css">

</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="logo">
                <img src="img/logo.png" alt="Logomarca">
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="">Home</a>
                    </li>
                    <li>
                        <a href="">Serviços</a>
                    </li>
                    <li>
                        <a href="">Blog</a>
                    </li>
                    <li>
                        <a href="">Contatos</a>
                    </li>
                </ul>
            </nav>
            <div class="user">
                <p>Nome Usuário</p>
                <img src="img/user.png">
            </div>
        </div>
        <div class="sidebar">
            <img src="img/search.png" class="search-icon">

            <img src="img/info.png" class="info-icon">
        </div>

        <div class="msg-container">
            <div id="slider">
                <div class="msg-col">
                    <h1>Título aqui</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <a href="">Learn More</a>
                </div>
                <div class="msg-col">
                    <h1>Título aqui</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <a href="">Learn More</a>
                </div>
                <div class="msg-col">
                    <h1>Título aqui</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <a href="">Learn More</a>
                </div>
                <div class="msg-col">
                    <h1>The Learning</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
        </div>
        <div class="controller">
            <div id="line1"></div>
            <div id="line2"></div>
            <div id="line3"></div>
            <div id="line4"></div>
            <div id="active"></div>
        </div>
    </div>
    <script>
        var slider = document.getElementById('slider');
        var active = document.getElementById('active');
        var line1 = document.getElementById('line1');
        var line2 = document.getElementById('line2');
        var line3 = document.getElementById('line3');
        var line4 = document.getElementById('line4');

        line1.onclick = function () {
            slider.style.transform = 'translateX(0)';
            active.style.top = '0px';
        }
        line2.onclick = function () {
            slider.style.transform = 'translateX(-25%)';
            active.style.top = '80px';
        }
        line3.onclick = function () {
            slider.style.transform = 'translateX(-50%)';
            active.style.top = '160px';
        }
        line4.onclick = function () {
            slider.style.transform = 'translateX(-75%)';
            active.style.top = '240px';
        }
    </script>
</body>
</html>