My first Bootstrap theme

by cumslut - 04-02-2016, 01:03 PM
bakka.me
Anime
Posts:
2,355
Joined:
Nov 2015
Likes:
261
Credits:
22
Reputation:
125
1 Year of Service
#1
OP
Posted: 04-02-2016, 01:03 PM (This post was last modified: 04-02-2016, 02:15 PM by cumslut.)
Yas, i made it, now i can finally re-design my other website, i managed to make a bootstrap theme :3

I will share the code & a preview below,

It's fully responsive to ^^

PREVIEW

Live Preview: Here


CODE

Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Theme Made By Castiel - No copyright!! -->
  <title>My first bootstrap theme</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  body {
      font: 20px Montserrat, sans-serif;
      line-height: 1.8;
      color: #f5f6f7;
  }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
  .bg-1
      background-color: #00BFFF; /* Light Blue */
      color: #ffffff;
  }
  .bg-2
      background-color: #474e5d; /* Dark Blue */
      color: #ffffff;
  }
  .bg-3
      background-color: #00BFFF; /* Light Blue */
      color: #555555;
  }
  .bg-4
      background-color: #474e5d; /* Dark Blue */
      color: #fff;
  }
  .container-fluid {
      padding-top: 70px;
      padding-bottom: 70px;
  }
  .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 12px;
      letter-spacing: 5px;
  }
  .navbar-nav  li a:hover {
      color: #1abc9c !important;
  }
  </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">First Bootstrap Theme</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">What do i put here?</a></li>
        <li><a href="#">Where did you go?</a></li>
        <li><a href="#">How did you do that?</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- First Container -->
<div class="container-fluid bg-1 text-center">
  <h3 class="margin">Who Am I?</h3>
  <img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
  <h3>I'm a hobo</h3>
</div>

<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
  <h3 class="margin">What Am I?</h3>
  <p>Human.</p>
  <a href="#" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-search"></span> Search for my mother
  </a>
</div>

<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">    
  <h3 class="margin">Where To Find Me?</h3><br>
  <div class="row">
    <div class="col-sm-4">
      <p>at my house.</p>
      <img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg" class="img-responsive margin" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-4"
      <p>at the pub.</p>
      <img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg" class="img-responsive margin" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-4"
      <p>on a unicorn.</p>
      <img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg" class="img-responsive margin" style="width:100%" alt="Image">
    </div>
  </div>
</div>

<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
  <p>Bootstrap Theme Made By <a href="https://nulledbb.com/profile/3747/">Castiel</a></p
</footer>

</body>
</html>

[Image: cumslutt.png]

Vector Student
لا إله إلا الله‎
Posts:
6,328
Joined:
Jan 2015
Likes:
301
Credits:
363
Reputation:
162
2 Years of Service
#2
Posted: 04-02-2016, 01:11 PM
Good to know you started learning this stuffs Smile.... Good luck!
| A- Best forever .. | v4hl - ;) | Addicted | Senpai | Nyan | Sensei | H | fdigl |
[Image: gZD4Fba.png]

bakka.me
Anime
Posts:
2,355
Joined:
Nov 2015
Likes:
261
Credits:
22
Reputation:
125
1 Year of Service
#3
OP
Posted: 04-02-2016, 01:20 PM
(04-02-2016, 01:11 PM)Quanity Wrote: Good to know you started learning this stuffs Smile.... Good luck!

TyTy, so far i've only read books & e-books, but now these latest day i started to actually code from scratch with my knowledge ;3
[Image: cumslutt.png]

Vector Student
Fulltime Member
Posts:
1,695
Joined:
Aug 2015
Likes:
56
Credits:
2,364
Reputation:
58
2 Years of Service
#4
Posted: 04-02-2016, 01:33 PM
Looks nice. I would not recommend using inline CSS it is bad practise.
Do not allow the eye to fool the mind.
bakka.me
Anime
Posts:
2,355
Joined:
Nov 2015
Likes:
261
Credits:
22
Reputation:
125
1 Year of Service
#5
OP
Posted: 04-02-2016, 01:34 PM
(04-02-2016, 01:33 PM)Gnar Wrote: Looks nice. I would not recommend using inline CSS it is bad practise.

Thanks, i will have that in mind next time!
[Image: cumslutt.png]

Vector Student
Rehab is for quitters
Prime
Posts:
515
Joined:
May 2015
Likes:
11
Credits:
503
Reputation:
22
2 Years of Service
#6
Posted: 04-02-2016, 01:48 PM
Look into Webpack, that will help you out so much!
Would be great practice too
bakka.me
Anime
Posts:
2,355
Joined:
Nov 2015
Likes:
261
Credits:
22
Reputation:
125
1 Year of Service
#7
OP
Posted: 04-02-2016, 01:52 PM
(04-02-2016, 01:48 PM)LikeAlcohol Wrote: Look into Webpack, that will help you out so much!
Would be great practice too

Thanks for the suggestion ^^
[Image: cumslutt.png]

Vector Student
Hold the door!
Posts:
881
Joined:
Sep 2015
Likes:
44
Credits:
172
Reputation:
61
2 Years of Service
#8
Posted: 04-02-2016, 01:58 PM
I love bootstrap themes, they look really nice and well made! Nice job there!
[Image: 8ztnc3V.gif]
bakka.me
Anime
Posts:
2,355
Joined:
Nov 2015
Likes:
261
Credits:
22
Reputation:
125
1 Year of Service
#9
OP
Posted: 04-02-2016, 02:12 PM
(04-02-2016, 01:58 PM)Ria Wrote: I love bootstrap themes, they look really nice and well made! Nice job there!

Thank you ria!
Yeah i think so to, they're always so sleek & well organised.
[Image: cumslutt.png]

Vector Student
Novice
Posts:
30
Joined:
Jan 2016
Likes:
1
Credits:
21
Reputation:
0
1 Year of Service
#10
Posted: 07-02-2016, 08:17 PM
For first it's so good ! but i don't like your choice of color try to change the blue :(
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)