CSS_vertical_align/index.html at master · zenithtech/CSS_vertical_align · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS vertical align best-practice</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <div class="sidebar">
        <div class="testimonials">
            <div class="testimonial">
                <div class="pic left">
                    <div class="area"></div>
                </div>
                <div class="quote right">
                    <div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt velit, voluptate illum temporibus, labore atque sint similique iure repellendus eum, suscipit assumenda. Praesentium ex ea necessitatibus magni suscipit eum numquam, maiores eligendi quasi blanditiis illum aliquid ab omnis at excepturi!</div>
                    <div class="auth">Lorem.</div>
                </div>
            </div>
            <!-- pic on right -->
            <div class="testimonial">
                <div class="quote left">
                    <div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum architecto nihil necessitatibus deserunt, deleniti doloribus tempora autem atque, nemo!</div>
                    <div class="auth">Lorem ipsum dolor sit.</div>
                </div>
                <div class="pic right">
                    <div class="area"></div>
                </div>
            </div>
            <!-- pic on left -->
            <div class="testimonial">
                <div class="pic left">
                    <div class="area"></div>
                </div>
                <div class="quote right">
                    <div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore esse quasi dolores laudantium numquam ipsum maxime qui! Officia, dolore, et corporis aspernatur deserunt eaque impedit explicabo fugiat numquam aliquid quo eum! Officiis dolor natus eius praesentium nulla magnam facilis accusamus labore, quod itaque, sed esse asperiores tenetur pariatur laborum nostrum illo voluptas voluptatem harum neque repellendus non. Veniam facere praesentium maiores tenetur eum, aperiam dolorem adipisci dolor corrupti cum, quis obcaecati error. Dignissimos natus sit atque facere omnis, a reprehenderit quas ratione. Deleniti dignissimos doloremque tempore aperiam a quae quidem eligendi possimus! Dolor blanditiis vero animi, laboriosam deserunt officiis autem.</div>
                    <div class="auth">Lorem ipsum dolor.</div>
                </div>
            </div>
            <!-- pic on right -->
            <div class="testimonial">
                <div class="quote left">
                    <div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, explicabo!</div>
                    <div class="auth">Lorem ipsum.</div>
                </div>
                <div class="pic right">
                    <div class="area"></div>
                </div>
            </div>
        </div>
</body>

</html>