Revised documentation and community pages. Still looking at a better …

…way of getting the network group of images to line up with their red horizontal and vertical lines; currently there is not a good way to show either at large screen widths or small phone-size widths.
forge · Mar 17, 2015 · 89d014f · 89d014f
1 parent aef6e68
commit 89d014f
Show file tree

Hide file tree

Showing 6 changed files with 2,032 additions and 1 deletion.
diff --git a/community.html b/community.html
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+
+
+    <title>JBoss Forge</title>
+    <!--CSS-->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
+    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="all" />
+    <link href="css/forge.css" rel="stylesheet" media="all" />
+    <link href="css/forge_community.css" rel="stylesheet" media="all" />
+    <link href="css/parallax-styles.css" rel="stylesheet" media="screen" />
+    <!--<link href="css/testing.css" rel="stylesheet" media="screen" />-->
+</head>
+<body>
+<!--==================  BEGIN PAGE CONTENT  ==================-->
+<header class="navbar navbar-static-top">
+    <div class="container-fluid header-container">
+
+        <div class="alt-header-row col-xs-2 visible-xs row-fluid">
+            <div class="col-xs-12">
+                <a href="#" class="forge-logo-smaller visible-xs">
+                    <img alt="Download Forge"  src="images/anvil_download_section_150x132.png" />
+                </a>
+            </div>
+
+        </div>
+
+        <div class="row">
+
+            <div class="navbar-header col-md-2 com-sm-1 col-xs-2" >
+                <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navBarMain">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+
+                <!-- Main Logo -->
+                <a href="#" class="forge-main-logo hidden-xs"> </a>
+
+
+
+            </div><!-- / .navbar-header -->
+            <!-- Login and register buttons -->
+            <div class="col-md-2 col-sm-2 col-xs-3 login-register-button-div pull-right">
+                <ul class="nav navbar-nav navbar-right login-register-btns ">
+                    <li><a href="#">Login</a></li>
+                    <li><a href="#">Register</a></li>
+                </ul>
+            </div>
+            <!-- / End Login and register buttons -->
+
+            <div class="col-md-7 col-sm-5 col-xs-6 navbar-collapse collapse pull-right" role="navigation" id="navBarMain" >
+                <!-- Insert to the left of main nav in order to display these to the far right -->
+
+                <ul class="nav navbar-nav pull-right  ">
+                    <li><a href="#">Download</a></li>
+                    <li><a href="#">Addons</a></li>
+                    <li><a href="#">News</a></li>
+                    <li><a href="#">Documentation</a></li>
+                    <li><a href="#">Community</a></li>
+                    <li><a href="#">Resources</a></li>
+                </ul>
+            </div><!-- /. navbar-collapse -->
+
+
+
+        </div><!-- /.row-fluid -->
+    </div><!-- / .container-fluid -->
+
+</header>
+
+
+
+
+
+
+<!-- PAGE SECTION COMMUNITY MARQUEE SECTION -->
+<div class="page-section static blue community-marquee">
+   <div class="container">
+        <div class="row marquee-content">
+            <div class="col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2 marquee-content-container-div">
+                <h2>JBoss is an Open Source, <strong>Community Project</strong>.</h2>
+				<h2>We Love it when our Users become Contributors!</h2>
+
+            </div>
+
+        </div><!-- / .row.marquee-content -->
+       <div class="row visible-xs">
+           <span class="white-chevron-down">&nbsp;</span>
+       </div>
+   </div><!-- /.container -->
+</div><!-- / .page-section -->
+
+
+
+
+<!-- PAGE SECTION CONTRIBUTE -->
+<div class="page-section white contribute-section">
+    <div class="container">
+        <div class="row">
+            <h1>So Many Ways to <strong>Contribute</strong>.</h1>
+        </div><!-- / .row -->
+
+
+
+
+    </div><!-- /.container -->
+
+    <div class="row contribute-columns">
+        <!-- Left Column -->
+        <div class="col-sm-3 col-xs-12 left-col-container">
+            <div class="display-div left-col">
+                <h2>Discuss</h2>
+                <a href="#" class="forge-btn btn-blue btn-med">Forums</a>
+                <a href="#" class="forge-btn btn-blue btn-med">Email</a>
+                <a href="#" class="forge-btn btn-blue btn-med">IRC</a>
+
+            </div>
+
+        </div>
+        <!-- / End Left Column -->
+
+        <div class="col-sm-6 col-xs-12">
+            <div class="row middle-section">
+                <div class="col-sm-6 interior-left-column">
+                    <div class="build-an-addon display-div">
+                        <h2>Build An Addon</h2>
+                        <a href="#" class="forge-btn btn-red btn-med">Get Started</a>
+
+                    </div><!-- /.build-an-addon -->
+
+                </div>
+
+                <div class="col-sm-6 three-row-col-div">
+                   <div class="display-div">
+                        <a href="#">
+                            <span class="text">Submit Bugs</span>
+                            <span class="right-arrow">&nbsp;</span>
+                        </a>
+                   </div>
+
+                    <div class="display-div">
+                        <a href="#">
+                            <span class="text">Improve Code</span>
+                            <span class="right-arrow">&nbsp;</span>
+                        </a>
+
+                    </div>
+
+                    <div class="display-div">
+                        <a href="#">
+                            <span class="text">Expand Docs</span>
+                            <span class="right-arrow">&nbsp;</span>
+                        </a>
+                    </div>
+
+                </div>
+
+            </div>
+        </div><!-- / .col-sm-6 -->
+
+        <!-- Right Column -->
+        <div class="col-sm-3 col-xs-12 right-col-container">
+            <div class="display-div right-col">
+                <h2>Attend<br>An Event</h2>
+                <a href="#" class="forge-btn btn-red btn-med">The Calendar</a>
+            </div>
+
+        </div>
+        <!-- / End Right Column -->
+
+    </div><!-- / .row -->
+</div><!-- / .page-section -->
+<!-- / END CONTRIBUTE SECTION -->
+
+
+
+<!-- PAGE SECTIION COMMUNITY PEOPLE -->
+<div class="page-section white community-people">
+    <div class="container">
+        <div class="row community-logo-row">
+            <div class="col-xs-12 community-logo">
+                <img alt="JBoss Community"  src="images/anvil_download_section_300x264.png" />
+            </div>
+            <div class="col-xs-12 orange-line-row">&nbsp;</div>
+            <div class="col-xs-12">
+                <h1>Powered by people like you. Our <strong>Community</strong>.</h1>
+            </div>
+
+            <div class="col-xs-12 orange-line-row">&nbsp;</div>
+
+            <!-- Community image section -->
+            <div class="row community-images">
+                <div class="community-grid-row">
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                </div>
+
+                <div class="vertical-bar-row hidden-xs">
+
+                </div>
+
+
+
+                <div class="community-grid-row">
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                </div>
+
+                <div class="vertical-bar-row hidden-xs">
+
+                </div>
+
+
+                <div class="community-grid-row">
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                    <div><img alt="Placeholder" src="images/place-img-300x300.jpg"></div>
+                </div>
+
+
+            </div>
+
+
+
+
+
+
+        </div><!-- / .row -->
+    </div><!-- / .container -->
+</div><!-- / .page-section -->
+    <!-- / END COMMUNITY PEOPLE SECTION -->
+
+
+<!-- PAGE SECTION GOVERNANCE & JOIN NOW BUTTON SECTION -->
+<div class="page-section white join-now-section">
+    <div class="row join-now-button-row">
+        <div class="col-sm-2 col-sm-offset-5 col-xs-4 col-xs-offset-4">
+            <a href="#" class="forge-btn btn btn-lg btn-red">Join Now</a>
+        </div>
+    </div><!-- / .row.join-now-button-row -->
+    <div class="container">
+        <h1>Our Community Governance Statement</h1>
+    </div><!-- / .container -->
+</div><!-- / .page-section -->
+<!-- GOVERNANCE & JOIN NOW BUTTON SECTION -->
+
+
+
+<!-- PAGE SECTION LINKS AND SUPPORT -->
+
+<div class="page-section static blue footer-links-support">
+    <div class="container">
+        <div class="row link-section-columns">
+            <div class="col-sm-3 col-xs-12 footer-first-section">
+                <div class="jboss-forge-logo">&nbsp;</div>
+                <ul>
+                    <li><a href="#">Item One</a></li>
+                    <li><a href="#">Item Two</a></li>
+                    <li><a href="#">Item Three</a></li>
+                    <li><a href="#">Item Four</a></li>
+                </ul>
+            </div><!-- / .col-sm-3 -->
+
+            <div class="col-sm-3 col-xs-12 footer-link-div">
+                <h3>Support</h3>
+                <p>Sed rutrum quis mauris id consequat. Duis non pellentesque urna. </p>
+
+                <form action="#" class="search-form-footer">
+                    <fieldset>
+                        <input type="search" class="search-input" size="20" /><a class="search-box" href="#"><span class="glyphicon glyphicon-search"></span></a>
+                    </fieldset>
+                </form>
+            </div><!-- / .col-sm-3 -->
+
+            <div class="col-sm-3 col-xs-12 footer-link-div">
+                <h3>Careers</h3>
+                <ul>
+
+                    <li><a href="#">Item One</a></li>
+                    <li><a href="#">Item Two</a></li>
+                    <li><a href="#">Item Three</a></li>
+                </ul>
+            </div><!-- / .col-sm-3 -->
+
+            <div class="col-sm-3 col-xs-12 footer-link-div">
+                <h3>Contact</h3>
+                <div class="row">
+                    <!-- Icon display for desktop/tablet -->
+                    <div class="col-md-12 col-sm-12 hidden-xs footer-social-container">
+                        <ul class="footer-social-icons">
+                            <li><a href="#" target="_blank" class="facebook-link"></a></li>
+                            <li><a href="#" target="_blank" class="twitter-link"></a></li>
+                            <li><a href="#" target="_blank" class="linkedin-link"></a></li>
+                            <li><a href="#" target="_blank" class="googleplus-link"></a></li>
+                            <li><a href="#" target="_blank" class="youtube-link"></a></li>
+                        </ul>
+                    </div><!-- / End desktop/tablet size -->
+
+                    <!-- Icon display for phone -->
+                    <div class="col-xs-12 hidden-sm hidden-lg hidden-md hidden-print footer-social-container">
+                        <div class="footer-social-icons-inline">
+                            <a href="#" target="_blank" class="facebook-link"></a>
+                            <a href="#" target="_blank" class="twitter-link"></a>
+                            <a href="#" target="_blank" class="linkedin-link"></a>
+                            <a href="#" target="_blank" class="googleplus-link"></a>
+                            <a href="#" target="_blank" class="youtube-link"></a>
+                        </div>
+                    </div><!-- / End phone size -->
+
+                </div><!-- /.row -->
+
+                <ul>
+                    <li><a href="#">Email</a></li>
+                    <li><a href="#">Address</a></li>
+                    <li><a href="#">Phone</a></li>
+                </ul>
+            </div><!-- / .col-sm-3 -->
+
+
+        </div><!-- / .row -->
+
+    </div><!-- / container -->
+
+</div><!-- / .page-section   -->
+
+
+
+
+
+<!-- FOOTER -->
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12">
+                &copy; JBoss Forge All Rights Reserved.
+                <span class="footer-medallion hidden-xs"> </span>
+            </div>
+        </div><!-- / .row -->
+    </div><!-- / .container -->
+
+
+</footer>
+<!-- / END PAGE CONTENT -->
+
+<!--JS-->
+<script type="text/javascript" src="js/jquery-1.11.1.min.js"              ></script>
+<script type="text/javascript" src="js/bootstrap.min.js"                  ></script>
+<script type="text/javascript" src="js/forge.jquery.js"                   ></script>
+<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+<script type="text/javascript" src="js/ie10-viewport-bug-workaround.js"   ></script>
+<!-- Parallax -->
+<!--<script type="text/javascript" src="js/jquery.parallax.min.js"            ></script>-->
+<script type="text/javascript" src="js/parallax.min.js"            ></script>
+
+
+</body>
+</html>
diff --git a/css/forge.css b/css/forge.css
@@ -1310,6 +1310,11 @@ div#widthBox {
 
 /* Small (XS) max */
 @media (max-width: 767px) {
+
+    header.navbar {
+        border-bottom:4px solid #ee3327;
+    }
+
     .marquee-text-row {
         margin-top: 1em;
     }
@@ -1356,7 +1361,7 @@ div#widthBox {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
-       /*border:3px solid #ee3327;*/
+       border:3px solid #ee3327;
        margin:0;
     }