materializeStart/index.html at master · Myrlan/materializeStart · 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>
    <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
        <!--Import materialize.css-->
        <link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen, projection"/>
        <!--Import our stylesheet-->
        <link href="css/myStyleSheet.css" rel="stylesheet" type="text/css"/>
        <!--Let the browser know the website is optimized for mobile-->
        <meta name="viewport" content="width=device-idth, initial-scale=1.0"/>
        <title>My Materialize Project</title>
    </head>
    <body>
        <header>
            <nav>
                <div class="nav-wrapper container">
                    <a href="#" class="brand-logo">Logo</a>
                    <ul id="nav-mobile" class="right hide-on-med-and-down">
                        <li><a href="sass.html">Sass</a></li>
                        <li><a href="badges.html">Components</a></li>
                        <li><a href="collapsible.html">JavaScript</a></li>
                    </ul>
                </div>
            </nav>

            <img class="responsive-img" src="assets/headerImg.jpg" max-width="100%" height="auto"?>
        </header>

        <main>
            <div class="row container">
                <!--card 1-->
                <div class="col s4">
                    <div class=card>
                        <div class="card-image">
                            <img src="assets/card1.jpg">
                            <span class="card-content">Image 1</span>
                        </div>
                        <div class="card-content">
                            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a href="#">This is a link</a>
                        </div>
                    </div>
                </div>
                <!--card 2-->
                <div class="col s4">
                    <div class=card>
                        <div class="card-image">
                            <img src="assets/card2.jpg">
                            <span class="card-content">Image 1</span>
                        </div>
                        <div class="card-content">
                            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a href="#">This is a link</a>
                        </div>
                    </div>
                </div><!--card 3-->
                <div class="col s4">
                    <div class=card>
                        <div class="card-image">
                            <img src="assets/card3.jpg">
                            <span class="card-content">Image 1</span>
                        </div>
                        <div class="card-content">
                            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a href="#">This is a link</a>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="page-footer">
            <div class="container">
                <div class="row">
                    <div class="col 16s12">
                        <h5 class="white=text">Footer Content</h5>
                        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content</p>
                    </div>
                    <div class="col l4 offset-l2 s12">
                        <h5 class ="white=text">Links</h5>
                        <ul>
                            <li><a class="grey-text text-lighten-3" href="#">Link 1</a></li>
                            <li><a class="grey-text text-lighten-3" href="#">Link 2</a></li>
                            <li><a class="grey-text text-lighten-3" href="#">Link 3</a></li>
                            <li><a class="grey-text text-lighten-3" href="#">Link 4</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="container">
                &copy; 2017 Copyright Text
                    <a class="grey=text text-lighten=4" href="#">More Links</a>
                </div>
            </div>
        </footer>

        <!--Import jQuery before materialize-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>

</html>