htmlcss-wp/index.html at master · AlbertoZ85/htmlcss-wp · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Wordpress</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
    </head>
    <body>
        <div class="container">
            <header>
                <div class="box">
                    <div class="overlay"></div>
                    <div class="title">
                        <h1><img src="img/logo.png" alt="Natural logo"></h1>
                        <h2>ANOTHER BEAUTIFUL ORGANIC THEME</h2>
                    </div>
                </div>
            </header>
            <nav>
                <ul class="clearfix">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">PAGE TEMPLATES</a></li>
                    <li><a href="#">PARENT PAGE</a></li>
                    <li><a href="#">FEATURES</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
            <div class="row clearfix">
                <aside class="left">
                    <div class="box">
                        <h3> <a href="#"><i class="fas fa-rss-square"></i></a> Organic Themes </h3>
                        <ul>
                            <li><a href="#">How To Pick A WordPress Theme For 2019</a></li>
                            <li><a href="#">The Updated Gutenberg Portfolio Theme</a></li>
                            <li><a href="#">Black Friday Through Cyber Monday Deal For WordPress Website Owners</a></li>
                            <li><a href="#">The Ultimate Guide To Optimizing Your WordPress Theme For Gutenberg</a></li>
                            <li><a href="#">A Better WordPress Page Builder - Organic Builder Widgets Pro</a></li>
                        </ul>
                    </div>
                </aside>
                <main>
                    <div class="box">
                        <h3>THREE COLUMN</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </main>
                <aside class="right">
                    <div class="box">
                        <h3>Text Widget</h3>
                        <p>This is an example of a text widget. You could write a brief introduction to your site, add links, images, video, HTML and more using a text widget. It's pretty handy!</p>
                    </div>
                    <div class="box">
                        <h3>Text Widget</h3>
                        <p>This is an example of a text widget. You could write a brief introduction to your site, add links, images, video, HTML and more using a text widget. It's pretty handy!</p>
                    </div>
                    <div class="box">
                        <h3>Text Widget</h3>
                        <p>This is an example of a text widget. You could write a brief introduction to your site, add links, images, video, HTML and more using a text widget. It's pretty handy!</p>
                    </div>
                </aside>
            </div>
            <footer>
                <div class="box">
                    <p><em>Pagina realizzata da Albi Z</em></p>
                    <hr>
                    <div class="icon">
                        <a href="#"><i class="fab fa-facebook-square"></i></a>
                    </div>
                    <div class="icon">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                    <div class="icon">
                        <a href="#"><i class="fab fa-github"></i></a>
                    </div>
                </div>
            </footer>
        </div>
    </body>
</html>