First-milestone-Project/index.html at master · Bumper0417/First-milestone-Project · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" type="text/css" />
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Staffies</title>
</head>
<body>
    <header>
        <div class="row no-gutters">
            <a href="index.html" class="col-md-4 logo"></a>
            <div class="col-md-8 ">
                <div class="row no-gutters bg-color-name-title">
                    <div class="col heading">
                        <h1 class="name">I <i class="fa fa-heart" aria-hidden="true"></i> love my Staffies</h1>
                        <h2 class="title">Learn everything about S.B.T</h2>
                    </div>
                </div>
                <div class="row no-gutters">
                    <div class="col">
                        <ul id="nav" class="list-inline menucontainer">
                            <li class="col-6 col-sm-3 ui-menu-color-aboutus list-inline-item menuitem">
                                <a href="index.html" class="hvr-sweep-to-bottom"><i class="fa fa-paw" aria-hidden="true"></i><span>About </span></a>
                            </li>

                            <li class="col-6 col-sm-3 ui-menu-color-becomeabreeder list-inline-item menuitem">
                                <a href="becomeabreeder.html" class="hvr-sweep-to-bottom"><i class="fa fa-book" aria-hidden="true"></i><span>Become a Breeder</span></a>
                            </li>
                            <li class="col-6 col-sm-3 ui-menu-color-seeourevents list-inline-item menuitem">
                                <a href="photolibrary.html" class="hvr-sweep-to-bottom"><i class="fa fa-camera" aria-hidden="true"></i><span>See our Staffies</span></a>
                            </li>
                            <li class="col-6 col-sm-3 ui-menu-color-contact list-inline-item menuitem">
                                <a href="contact.html" class="hvr-sweep-to-bottom"><i class="fa fa-comment-o" aria-hidden="true"></i><span>Contact </span></a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </header>
    <section class="container-fluid">
        <div class="row">
            <div class="col-md-4 bg-color-breed-info section-column">
                <div class="row">
                    <div class="col-12">
                        <h3 class="section-heading uppercase">
                            Breed Info
                        </h3>
                    </div>
                </div>
                <div class="breed-info-item">
                    <div class="key">
                        <p class="uppercase">Energy:</p>
                        <div class="container">
                          <div class="skills energy">90%</div>
                        </div>
                    </div>
                </div>
                <div class="breed-info-item">
                    <div class="key">
                        <p class="uppercase">Size:</p>
                        <div class="container">
                          <div class="skills size">50%</div>
                        </div>
                    </div>
                </div>
                <div class="breed-info-item">
                    <div class="key">
                        <p class="uppercase">Fur Treatment:</p>
                        <div class="container">
                          <div class="skills furtreatment">40%</div>
                        </div>
                    </div>
                </div>
                <div class="breed-info-item">
                    <div class="key">
                        <p class="uppercase">training:</p>
                        <div class="container">
                          <div class="skills training">65%</div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-8 bg-color-two-reasons section-column">
                <div class="row">
                    <div class="col">
                        <h3 class="section-heading uppercase">About Us</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-10 offset-1 offset-sm-0 col-sm-4 col-md-6">
                        <div class="row">
                            <div class="col-2">
                                <i class="two-reasons-icon fa fa-question" aria-hidden="true"></i>
                            </div>
                            <div class="col-10">
                                <h4 class="two-reasons-heading uppercase">Who we are?</h4>
                                <p>This organization is consisted from proffecional Breeders and Trainers of this specific breed who are dedicated and experienced to answer to users questions.Furthermore, be aware we meet all the European standards of qualifications such as:Certification of the Canine Care and and from Proffecional Dog Trainer Institute.</p>

                            </div>
                        </div>
                    </div>
                    <div class="col-10 offset-1 offset-sm-0 col-sm-4 col-md-6">
                        <div class="row">
                            <div class="col-2">
                                <i class="two-reasons-icon fa fa-thumbs-up" aria-hidden="true"></i>
                            </div>
                            <div class="col-10">
                                <h4 class="two-reasons-heading uppercase">Why to visit our Webpage?</h4>
                                <p>On our website,users can learn more about the breed standards and how to become a breeder through our info and videos,as well as, to have a look at the events we participate.In addition we are here to answer all of your questions in the Contact Form, were you are also able to book a place for our events.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <footer class="container-fluid">
        <div id="footer-details" class="row">
            <div class="col-sm-4">
                <h5 class="uppercase general-sub">About Us</h5>
                <p class="inline-block">
                    I <i class="fa fa-heart"></i> My Staffies website(est.2019)is intending to bring a friendly and easy approach to all the people wishing to breed or train their own Staffy.
                </p>
            </div>
            <div class="col-sm-4">
                <h5 class="uppercase general-sub">See our Photos</h5>
                <p class="inline-block">
                    Here you can download our images!
                    <a href="assets/images/staffie3.jpg" target="_blank" class="images-jpg">
                        <i class="fa fa-download" aria-hidden="true"></i>
                        <span class="sr-only">Download Image!</span>
                    </a>
                </p>
            </div>
            <div class="col-sm-4">
                <h5 class="uppercase general-sub">Social</h5>
                <ul class="list-inline social-links">
                    <li class="list-inline-item">
                        <a target="_blank" href="http://facebook.com/christos.gkoros">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                            <span class="sr-only">Facebook</span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a target="_blank" href="https://www.instagram.com/xristosgoros/">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                            <span class="sr-only">Instagram</span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a target="_blank" href="https://www.linkedin.com/in/christos-gkoros-1090a784/">
                            <i class="fa fa-linkedin" aria-hidden="true"></i>
                            <span class="sr-only">LinkedIn</span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a target="_blank" href="https://no.pinterest.com/chrisgoros13/">
                            <i class="fa fa-pinterest" aria-hidden="true"></i>
                            <span class="sr-only">Pinterest</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </footer>
</body>
</html>