flatout/index.html at main · DragonFireDesign/flatout · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flat Out Colours</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    <link href="font/stylesheet.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=prompt:100,400,500,600,700,800,900|raleway:100,200,300,400,500,700,800,900" rel="stylesheet" />
  </head>
  <body>
    <section class="bg-light"><nav class="navbar navbar-expand-lg navbar-light bg-light py-2 position-relative"><div class="container">
        <a class="navbar-brand" href="#">
            Flat Out Colours</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="d-none d-lg-flex navbar-nav mx-auto mt-3 mt-lg-0 mb-3 mb-lg-0 position-absolute top-50 start-50 translate-middle"><li class="nav-item me-4"><a class="nav-link" href="#about">About</a></li>
            <li class="nav-item me-4"><a class="nav-link" href="#gallery">Gallery</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
          </ul><ul class="navbar-nav mt-3 mt-lg-0 mb-3 mb-lg-0 d-lg-none"><li class="nav-item me-4"><a class="nav-link" href="#about">About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#gallery">Gallery</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
          </ul><div class="ms-auto"><a class="btn btn-outline-primary rounded-0 me-2 fw-bold text-uppercase" href="#contact">Hire Me Today</a></div>
        </div>
        </div>
        </nav>
      </section>
      <!-- Banner -->
<div class="masthead" style="background-image: url('./img/flat-out-banner.jpg');">
    <div class="color-overlay d-flex justify-content-center align-items-center">
        <div class="singleCol container text-center">
            <h1 class="multicolortext">FLAT OUT COLOURS</h1>
          </div>
      </div>
    </div>
  <!-- End Banner -->


<!-- Intro -->
<div class="section">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center mt-4">
          <h2 class="fw-bolder">Flatter For Hire!</h2>
          <p class="lead fw-bold">I am a freelance flatter. I love to do the work most artists hate!! Hand over those jobs to me and I will gladly make your life easier. </p>
          <p class="pb-3 fw-normal">I can produce professional, high quality flats for your comic book and publishing projects, whether you have single or multiple pages. I'm available for any commissions and freelance requests.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- End Intro -->

  <!-- About -->
  <section class="bg-black" id="about"><div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 mb-5 mb-md-0">
        <img class="img-fluid" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/wolverine-cover.jpg" alt=""></div>
      <div class="col-12 col-md-5 ms-auto pb-3">
        <h2 class="display-5 fw-bold mb-3 text-white">About Me</h2>
        <p class="lead mb-4 text-white">I am a Birmingham, United Kingdom based artist.

          I have been a comic book fan since the late 1970s when I started reading British publications such as TV Century, Commando and Action. Then I discovered American comic books Spider-Man and Ghostrider. I've been hooked ever since.

          Now I am looking to break into the comic book industry doing flats regularly and am just beginning my journey.

          I love European comics, American comics, Manga and general art. I am happy working on any style of art and any format, whether posters/single images, or full comic book pages. </p>
        <a class="btn btn-primary btn-lg rounded-0 p-3" href="#contact">Hire Me Now!</a>
      </div>
    </div>
    </div>
  </section>
    <!-- End About -->


<!-- Gallery -->
<section class="pt-3 pb-4" id="gallery">
    <div class="container">
    <h2 class="display-5 fw-bold text-center mb-3">Gallery</h2>
      <div class="row">
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/grifter.jpg" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/beauty-beast.png" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/superman-710-pg-20.jpg" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/batman-robin.png" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/justice-league.png" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/darth-maul.png" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/daphne.jpg" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/conan-sonja.png" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/judge-dredd.png" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/batman-rooftops.jpg" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/asuka.jpg" alt=""></div>
    <div class="col-12 col-md-4 p-2">
      <img class="img-fluid rounded" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/joker.png" alt=""></div>
    </div>
    </div>
  </section>

<!-- End Gallery -->

  <!-- Commissions -->
  <section class="bg-black" id="contact"><div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-5 mb-5 mb-md-0">
        <h2 class="display-5 fw-bold mb-3 text-white">Commissions Are Now Open</h2>
        <p class="lead mb-4 text-white">Er, I seem to have a gap in my schedule. Want to work with me? I am currently available for commissions. Contact me for more details now.
        </p>
        <form>
          <div class="mb-3">
            <label class="text-white">Your name</label>
            <input type="text" class="form-control" placeholder="Enter your name"></div>
          <div class="mb-3">
            <label class="text-white">Email address</label>
            <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email"></div>
          <div class="mb-3">
            <label class="text-white">Message</label>
            <textarea class="form-control" rows="3"></textarea></div>
          <button type="submit" class="btn btn-primary btn-lg rounded-0 p-3">Send That Message!</button>
        </form>
      </div>
      <div class="col-12 col-md-6 ms-auto">
        <img class="img-fluid" src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/deadpool.png" alt=""></div>
    </div>
    </div>
  </section>
  <!-- End Commissions -->

  <!-- Footer -->
  <footer>
    <div class="container text-center mt-3">
      <p class="mt-2"><small>© Copyright Flat Out Colours (flats only-all characters and art are © their respective owners).</small></p>
      <a href="https://dragonfiredesignstudio.com" target="_blank"> <img src="https://static.shuffle.dev/uploads/files/b4/b40c48f0f118465916aea58d276d7f74c73af96e/df-logo.png" alt="" class="img-fluid pb-1" width="35"></a>
    </div>
  </footer>
    <!-- End Footer -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="rainbow.js"></script>
  </body>
</html>