https://codepen.io/anon/pen/QgaRpz?editors=1000
I copied the HTML CSS code of this codepen
but it is not giving same output .the division the gray background nothing is coming I am confused how 2 same code can give different output.
MY HTML CODE:
<html>
<style>
h1 {
color: #DC2827;
font-size: 40px;
font-weight: 700;
}
h3 {
font-size: 30px;
}
h1, h2, h3 {
font-family: 'Roboto Condensed', sans-serif;
}
.title {
margin-top: 20px;
}
.main-img {
width: 100%;
}
ul {
list-style: none;
}
.time {
color: #DC2827;
font-size: 20px;
}
li, p {
font-size: 18px;
margin: 10px;
}
.nav-tabs {
text-align:center;
float:none;
display:inline-block;
margin-bottom: 30px;
}
</style>
<div class="container">
<div class="well title text-center">
<h1 class="heading">Ruby On Rails</h1>
<h2>A Web Aplication Framework</h2>
<p>Ruby on Rails, or simply Rails, is a web application framework written in Ruby under MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates
the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention
over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.</p>
</div>
<div class="well">
<img src="https://udemy-images.udemy.com/course/750x422/531360_06c4.jpg" alt="Ruby on Rails Image" class="responsive main-img" />
</div>
<div class="well text-center">
<h3>History</h3>
<hr />
<ul class="list-group">
<li class="list-group-item"><span class="time">July 2004 - </span>David Heinemeier Hansson first released Rails as open source.</li>
<li class="list-group-item"><span class="time">February 2005 - </span>Commit rights to the project has been shared.</li>
<li class="list-group-item"><span class="time">August 2006 - </span>Apple announced that it would ship Ruby on Rails with Mac OS X v10.5 "Leopard".</li>
<li class="list-group-item"><span class="time">March 2009 - </span>Rails version 2.3 was released.</li>
<li class="list-group-item"><span class="time">December 2008 - </span>Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities. Merb was merged with Rails as part
of the Rails 3.0 release.</li>
<li class="list-group-item"><span class="time">August 2011 - </span>Rails 3.1 was released featuring Reversible Database Migrations, Asset Pipeline, Streaming, jQuery as default JavaScript library and newly introduced CoffeeScript and Sass into the stack.</li>
<li class="list-group-item"><span class="time">January 2012 - </span>Rails 3.2 was released with a faster development mode and routing engine (also known as Journey engine), Automatic Query Explain and Tagged Logging. Rails 3.2.x is the last version that supports Ruby 1.8.7.
Rails 3.2.12 supports Ruby 2.0</li>
<li class="list-group-item"><span class="time">June 2013 - </span>Rails 4.0 was released introducing Russian Doll Caching, Turbolinks, Live Streaming as well as making Active Resource, Active Record Observer and other components optional by splitting them as gems.</li>
<li class="list-group-item"><span class="time">April 2014 - </span>Rails 4.1 was released introducing Spring, Variants, Enums, Mailer previews, and secrets.yml.</li>
<li class="list-group-item"><span class="time">December 2014 - </span>Rails 4.2 was released introducing Active Job, asynchronous emails, Adequate Record, Web Console, and foreign keys.</li>
<li class="list-group-item"><span class="time">Early 2016 - </span>Rails 5.0 is set to release. Notable additions in Rails 5.0 include an option for an API-only application suitable for use as a backend to JavaScript or mobile applications. Also Action Cable for live features such as chat and notifications. </li>
</ul>
</div>
<div class="well">
<h3 class="text-center">Links</h3>
<hr />
<div class="text-center">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Wiki</li>
<li role="presentation">Web</li>
<li role="presentation">API</li>
<li role="presentation">Github</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="wiki">https://en.wikipedia.org/wiki/Ruby_on_Rails</div>
<div role="tabpanel" class="tab-pane" id="web">http://rubyonrails.org/</div>
<div role="tabpanel" class="tab-pane" id="api">http://api.rubyonrails.org/</div>
<div role="tabpanel" class="tab-pane" id="github">https://github.com/rails/rails</div>
</div>
</div>
</div>
<div class="well text-center">
<p> Copyrights © none.</p>
</div>
</div>
</html>
Actually you need to include css and js from the code pen.
you need to inject bootstrap external library to your code.
add this link to your <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
and this <script> to your <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
with bootstrap:
https://jsfiddle.net/DTcHh/34298/
without bootstrap:
https://jsfiddle.net/suunyz3e/1437/
html:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">
<div class="well title text-center">
<h1 class="heading">Ruby On Rails</h1>
<h2>A Web Aplication Framework</h2>
<p>Ruby on Rails, or simply Rails, is a web application framework written in Ruby under MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates
the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention
over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.</p>
</div>
<div class="well">
<img src="https://udemy-images.udemy.com/course/750x422/531360_06c4.jpg" alt="Ruby on Rails Image" class="responsive main-img" />
</div>
<div class="well text-center">
<h3>History</h3>
<hr />
<ul class="list-group">
<li class="list-group-item"><span class="time">July 2004 - </span>David Heinemeier Hansson first released Rails as open source.</li>
<li class="list-group-item"><span class="time">February 2005 - </span>Commit rights to the project has been shared.</li>
<li class="list-group-item"><span class="time">August 2006 - </span>Apple announced that it would ship Ruby on Rails with Mac OS X v10.5 "Leopard".</li>
<li class="list-group-item"><span class="time">March 2009 - </span>Rails version 2.3 was released.</li>
<li class="list-group-item"><span class="time">December 2008 - </span>Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities. Merb was merged with Rails as part
of the Rails 3.0 release.</li>
<li class="list-group-item"><span class="time">August 2011 - </span>Rails 3.1 was released featuring Reversible Database Migrations, Asset Pipeline, Streaming, jQuery as default JavaScript library and newly introduced CoffeeScript and Sass into the stack.</li>
<li class="list-group-item"><span class="time">January 2012 - </span>Rails 3.2 was released with a faster development mode and routing engine (also known as Journey engine), Automatic Query Explain and Tagged Logging. Rails 3.2.x is the last version that supports Ruby 1.8.7.
Rails 3.2.12 supports Ruby 2.0</li>
<li class="list-group-item"><span class="time">June 2013 - </span>Rails 4.0 was released introducing Russian Doll Caching, Turbolinks, Live Streaming as well as making Active Resource, Active Record Observer and other components optional by splitting them as gems.</li>
<li class="list-group-item"><span class="time">April 2014 - </span>Rails 4.1 was released introducing Spring, Variants, Enums, Mailer previews, and secrets.yml.</li>
<li class="list-group-item"><span class="time">December 2014 - </span>Rails 4.2 was released introducing Active Job, asynchronous emails, Adequate Record, Web Console, and foreign keys.</li>
<li class="list-group-item"><span class="time">Early 2016 - </span>Rails 5.0 is set to release. Notable additions in Rails 5.0 include an option for an API-only application suitable for use as a backend to JavaScript or mobile applications. Also Action Cable for live features such as chat and notifications. </li>
</ul>
</div>
<div class="well">
<h3 class="text-center">Links</h3>
<hr />
<div class="text-center">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Wiki</li>
<li role="presentation">Web</li>
<li role="presentation">API</li>
<li role="presentation">Github</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="wiki">https://en.wikipedia.org/wiki/Ruby_on_Rails</div>
<div role="tabpanel" class="tab-pane" id="web">http://rubyonrails.org/</div>
<div role="tabpanel" class="tab-pane" id="api">http://api.rubyonrails.org/</div>
<div role="tabpanel" class="tab-pane" id="github">https://github.com/rails/rails</div>
</div>
</div>
</div>
<div class="well text-center">
<p> Copyrights © none.</p>
</div>
</div>
</body>
</html>
css:
h1 {
color: #DC2827;
font-size: 40px;
font-weight: 700;
}
h3 {
font-size: 30px;
}
h1, h2, h3 {
font-family: 'Roboto Condensed', sans-serif;
}
.title {
margin-top: 20px;
}
.main-img {
width: 100%;
}
ul {
list-style: none;
}
.time {
color: #DC2827;
font-size: 20px;
}
li, p {
font-size: 18px;
margin: 10px;
}
.nav-tabs {
text-align:center;
float:none;
display:inline-block;
margin-bottom: 30px;
}
you need to inject bootstrap external library to your code.
add this link to your
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
and this to your
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
with bootstrap:
https://jsfiddle.net/DTcHh/34298/
without bootstrap:
https://jsfiddle.net/suunyz3e/1437/
and add jquery as well
Related
So i formatted the README.md file of a particular GitHub project using HTML as I found markdown to be quite limiting. Maybe I am not quite well versed with markdown or I prefer HTML, I am not sure. So the issue is, I have the README.md file on my local system and when I display it on browser using a Markdown plugin from Sublime Text, it shows up exactly as I want. But when I push the local README.md file to the server and try to view it in website, the formatting is lost completely.
Local formatting -
GitHub website view -
As you can see, the two files are totally different. How can I preserve the formatting once it is uploaded on the GitHub server ?
The following is the spaghetti HTML code. It is very ugly. I was in a hurry and so ended up with such ugly code violating every aspect of DRY. Please excuse that for now.
<div class="header" style="width: 100%; display: flex;">
<div style="font-size: 50px; font-family: arial; width: 50%;"> Blind Reader</div>
<div style="width: 50%; text-align: right; display: table; ">
<span style=" letter-spacing: 5px; padding-left: 150px; font-family: verdana; font-size: 11px; display: table-cell;vertical-align: middle ; width: 20px;"> Developers </span>
<img src="images/dev1.png" style="height: 60px; width: 60px;">
<img src="images/dev2.png" style="height: 60px; width: 60px;">
</div>
</div>
<div class="badges-container">
<div class="badges-body">
[](https://GitHub.com/Naereen/ama) [](https://www.python.org/) [](https://github.com/Naereen/StrapDown.js/blob/master/LICENSE)  
</div>
</div>
<div class="body-content">
<span style="font-size: 25px; font-family: verdana; color: #64686d;"> Welcome to the <span style="color: #18529b;">Blind Reader</span> project !</span>
<br>
<br>
<div style="font-size: 18px; font-family: verdana; text-align: justify;" class="introduction">Blind Reader is a portable, low-cost, reading device made for the blind people. The Braille machines are expensive and as a result are not accessible to many. <strong>Blind Reader </strong>overcomes the limitation of conventional Braille machine by making it affordable for the common masses. The system uses OCR technology to convert images into text and reads out the text by using Text-to-Speech conversion.The system supports audio output via Speakers as well as headphone. The user also has the ability to pause the audio output whenever he desires. It also has the facility to store the images in their respective book folder, thereby creating digital backup simultaneously. With this system, the blind user does not require the complexity of Braille machine to read a book. All it takes is a button to control the entire system !
</div>
<div class="dependency" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Dependency</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div><br>
<span style="font-size: 18px; font-family: verdana; font-weight: 600;">Hardware Requirements:</span><br>
<ul>
<li>Raspberry Pi 3B.</li>
<li>Pi Camera.</li>
<li>Speakers / Headphones.</li>
<li>Push buttons - 2.</li>
<li>LDR - 1.</li>
<li>LED - 4.</li>
<li>Power supply - 5V,2A.</li>
</ul>
<span style="font-size: 18px; font-family: verdana; font-weight: 600;">Software Requirements:</span><br>
<ul>
<li>Python 3.</li>
<li>Python Dependencies:</li>
<ul>
<li>Rpi.GPIO</li>
<li>Pygame library.</li>
<li>picamera library.</li>
<li>google-cloud.</li>
<li>time.</li>
<li>os.</li>
<li>datetime.</li>
</ul>
<li>Google Cloud API - Vision , Text-to-Speech</li>
</ul>
</div>
<div class="code" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Usage</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div><br>
</div>
<div class="usage-content" style="font-size: 18px; font-family: verdana; text-align: justify;">
<ul>
<li>
Use the following code to install the Google cloud python dependency.<br><br><code>pip3 install --upgrade google-api-python-client<br>pip3 install --upgrade google-cloud-vision<br>pip3 install --upgrade google-cloud
</code><br><br>
Use : Google CLoud Vision API for further Details.<br><br>
</li>
<li> Activate <strong>Cloud Vision API</strong> and <strong>Google Cloud Text-to-Speech API</strong> by visiting the dashboard and download the Service account credentials (Json file).</li>
<br>
<li>
Connect the hardware as follows:
<ul>
<li>
Pi Camera --> Camera Slot in Raspberry Pi 3.
</li>
<li>
Pair Bluetooth Speaker / Insert headphone into Raspberry Pi 3 audio jack.
</li>
<li>
LDR --> GPIO 37.
</li>
<li>
4 LEDs - GPIO 29 , 31 , 33 , 35 respectively.
</li>
<li>
Push Button 1 ( Camera capture ) --> GPIO 16.
</li>
<li>
Push Button 2 ( Play/Pause audio ) --> GPIO 18.
</li>
</ul>
<br>
<li>
Use the following code to start the system:
<br>
<code>
python3 //path/to/your/final.py/file
</code>
</li>
<br>
<li>
Place the image to be read under the camera and press <code> Button 1 </code> to read out a page.
</li>
</ul>
</div>
<div class="system-images" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Demonstration</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div>
</div>
<div class="image-cotainer" style="display: flex;">
<div class="image1" style="width: 50%"> <img src="images/system1.jpg" style="width: 80%;"></div>
<div class="image2" style="width: 50%"> <img src="images/system2.jpg" style=" width: 80%; height: 80%; padding-top: 40px;"></div>
</div>
<div class="resources-section" style="font-family: verdana; font-size: 18px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Resources</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div>
</div>
<div class="resources-container" style="font-family: verdana; font-size: 18px;">
<ul><br>
<li>
Google Cloud Platform.
</li>
<li>
Pygame python library.
</li>
<li>
Raspberry Pi.
</li>
<li>
Python.
</li>
</ul>
</div>
</div>
I have also takena look at this link. It lists all the tags that are whitelisted by GitHub. And as I can see almost all the tags I have used are present here.
Please help.
GitHub documents there markup filtering in the github/markup repo:
This library converts the raw markup to HTML. See the list of supported markup formats below.
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or
id attributes. See the sanitization
filter
for the full whitelist.
Syntax highlighting is performed on code blocks. See github/linguist
for more information about syntax highlighting.
The HTML is passed through other filters in the html-pipeline that add special
sauce, such as
emoji,
task
lists,
named
anchors,
CDN caching for
images,
and
autolinking.
The resulting HTML is rendered on GitHub.com.
Note that step 1 is were the Markdown processing happens and that most likely returns the results you expect. The problem starts with step 2. Github takes the HTML returned in step 1 and sanitizes it extensively. This sanitation happens regardless of whether the source was Markdown, rst, texttile, asciidoc, or any number of other source formats.In other words, these filters have no direct relation to Markdown. So your Markdown is probably fine.
Given the extensive sanitation filters, any benefits of using Markdown's raw HTML fallback are almost completely lost. Generally, I stick to plain Markdown in any document I expect to be rendered by GitHub as most anything that gets stripped by the filters would not be possible with plain Markdown anyway.
If you really want to find some workarounds, then you will need to study the sanitation filter yourself to see if there is any way to get what you want. I expect most of what you want will not be possible though.
I'm having an issue with my web page of my resume not adhering to my min-width and max-width rules in css. I'm not really sure why. My page looks great with great margins on either side below a width of 1200px, but when the width goes higher than this the whole page content starts to list over to the right side and move off of the screen. I'm trying to make the entire body have a max width of something like 992px because a resume works better when viewed at about the width of a piece of paper on the screen. However, the layout looks awful when at full size.
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Resume - Tyler Cheek</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container header">
<h1>Tyler Cheek</h1>
</div>
<div class="container">
<div class="row">
<div class="contact-left col-md-6 col-sm-12 col-xs-12">
<p>(919)-397-8116</p>
<p>Github: github.com/Hoid</p>
<p>tylerlcheek#gmail.com</p>
</div>
<div class="contact-right col-md-6 col-sm-12 col-xs-12">
<p>2604 Hillsborough Street Apt. 202</p>
<p>Raleigh, NC 27607</p>
</div>
</div>
</div>
<div class="container">
<h5><b>Summary</b></h5>
<p> Team player software engineer with open-source, frontend, backend, and management experience. I make others around me better through excellent communication and a purely constructive attitude. You should hire me because I have a passion for making cool stuff that makes people’s lives better and the broad technical aptitude to do it.</p>
</div>
<div class="container">
<h5><b>Objective</b></h5>
<p> Seeking a full-time position in Software Development for an innovative company that will help me specialize my skills. I have a vast foundation that allows me to learn new things quickly and want experiences that will help me deepen my skillset.</p>
</div>
<div class="container" style="overflow: auto;">
<h5><b>Education</b></h5>
<div class="row">
<div class="education-left col-sm-6 col-xs-12">
<p> NC State University, Raleigh NC</p>
<p> B.S., Computer Engineering May 2017</p>
</div>
</div>
</div>
<div class="container professional-experience">
<h5><b>Professional Experience</b></h5>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>QA Lead</u></p>
</div>
<div class="company-dates">
<p>Imaginovation</p>
<p>December 2017 – April 2018</p>
</div>
</div>
<ul class="position-information">
<li>Led a team of 3 offshore and 1 local Test Engineers in Quality Control, the Software Test Life Cycle, Automation best practices, Team Communication, and Time Management</li>
<li>Introduced and Documented a new effort in website test automation using Snaptest</li>
<li>Initiated a system of code reviews and a deployment plan throughout the company</li>
<li>Developed 10 automated test scripts for API endpoints in Go and numerous others in Postman using Javascript</li>
<li>Created over 75 automated tests for websites across various projects in Snaptest</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Developer/Project Manager</u></p>
</div>
<div class="company-dates">
<p>Imaginovation</p>
<p>April 2017 – December 2017</p>
</div>
</div>
<ul class="position-information">
<li>Developed a base API framework and production-ready endpoints in Go</li>
<li>Designed the Bluetooth LE communication scheme for a mobile application to a custom proprietary IOT healthcare product in C</li>
<li>Led 3 teams of developers across 3 projects in multiple platforms, 2 of which were from start to completion</li>
<li>Created a Unity demo project with lightsabers for the Meta 2 Augmented Reality headset</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Software Development Student</u></p>
</div>
<div class="company-dates">
<p>Blackberry</p>
<p>Aug. – Dec. 2015</p>
</div>
</div>
<ul class="position-information">
<li>Delivered solutions for 14 software defects and 2 user stories using Java on Android</li>
<li>Contributed to team-wide software integrity using a peer code review process in Gerrit</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Software Test Student</u></p>
</div>
<div class="company-dates">
<p>Blackberry</p>
<p>Aug. – Dec. 2014, May – Aug. 2016</p>
</div>
</div>
<ul class="position-information">
<li>Documented 51 unique software issues in a Scrum development cycle</li>
<li>Scripted automated test suites for several user stories in RIDE, spanning hundreds of test cases</li>
<li>Developed an Excel macro that parses thousands of user reviews for keywords and trends</li>
<li>Seamlessly Transitioned between 3 mobile operating systems and 2 separate applications</li>
</ul>
</div>
</div>
<div class="container various-technical-experience">
<h5><b>Various Other Technical Experience</b></h5>
<ul class="position-information">
<li><b>Golang/Open Source:</b> Contributed to the alexa-skills-git-golang and go-jira Github open-source repos</li>
<li><b>XHTML/CSS:</b> Built a version of this resume using XHTML/CSS</li>
<li><b>PHP:</b> Personal websitethat interfaces with the OMDB movie search API</li>
<li><b>Python:</b> Personal desktop app client using PyQT4, UI creation, API utilization, Multithreading</li>
<li><b>C:</b> Compiler design, Text autocomplete function, GPS application</li>
<li><b>C++:</b> Team project working with a LIDAR sensor to detect and analyze objects for an autonomous vehicle – used OpenCV and Visual Studio</li>
</ul>
</div>
</body>
</html>
And CSS:
/*
body {
max-width: 992px;
}
*/
h1 {
text-align: center;
}
.position {
float: left;
line-height: 0.8em;
}
.company-dates {
float: right;
line-height: 0.8em;
text-align: right;
}
/* Custom, iPhone Retina */
#media (min-width : 320px) {
body {
margin-top: 10px;
margin-bottom: 10px;
min-width: 320px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
}
.contact-right {
text-align: left;
}
}
/* Extra Small Devices, Phones */
#media (min-width : 480px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
font-size: 12px;
}
}
/* Small Devices, Tablets */
#media (min-width : 768px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
.contact-right {
text-align: right;
}
}
/* Medium Devices, Desktops */
#media (min-width : 992px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
max-width: 992px;
line-height: 1.2em;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
}
/* Large Devices, Wide Screens */
#media (min-width : 1200px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 1.2em;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
}
In the grid.less CSS file (imported by the bootstrap CSS file) on line 30 you have this:
.container {
width: 1170px;
}
Set its width: auto in a (the?) style block in the head, thereby overruling the grid.less file, and the problem should be solved.
I'm working on a website based on W3 Schools' Bootstrap Company Theme, which I've shared at https://github.com/khpeek/peek-solutions. (A previous version is online at www.peek.solutions). Here is the code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Peek Solutions</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.7/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-image: url("img/Patagonia_Sirona_crop2_width_1200.jpg");
background-repeat: no-repeat;
/*background-color: #85c1e9;*/
color: #fff;
padding: 70px 25px;
font-family: Montserrat, sans-serif;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #85c1e9;
font-size: 50px;
}
.logo {
color: #85c1e9;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #85c1e9;
}
.carousel-indicators li {
border-color: #85c1e9;
}
.carousel-indicators li.active {
background-color: #85c1e9;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #85c1e9;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #85c1e9;
background-color: #fff !important;
color: #85c1e9;
}
.panel-heading {
color: #fff !important;
background-color: #85c1e9 !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #85c1e9;
color: #fff;
}
.navbar {
margin-bottom: 0;
/*background-color: #818181;*/
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #85c1e9 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #85c1e9;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
#media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
#accordion {text-align: left};
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- <nav class="navbar navbar-default navbar-fixed-top"> -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#myPage">Peek Solutions</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome to Peek Solutions</h1>
<p>Pipeline integrity solutions for the energy industry.</p>
<!-- <form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<button type="button" class="btn btn-danger">Subscribe</button>
</form> -->
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About us</h2><br>
<h4>Peek Solutions, an independent consulting company founded by Ralf Peek, provides pipeline integrity solutions and assurance support for the energy industry, including the application of structural reliability methods to assess and ensure integrity.</h4><br>
<!-- <p>Peek Consulting is a consulting company founded by Ralf Peek.</p> -->
<br>
<!-- <button class="btn btn-default btn-lg">Get in Touch</button> -->
Get in touch
</div>
<div class="col-sm-4">
<p><center><strong>This website is currently under construction.</strong></center></p>
<!-- <span class="glyphicon glyphicon-signal logo"> This website is under construction</span> -->
<img src="img/under_construction.jpg"></img>
</div>
</div>
</div>
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center bg-grey">
<h2>SERVICES</h2>
<h4>Our services include:</h4>
<br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Pipeline Integrity Assessment and Design</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Our services include the design and assessment of subea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design/assessment.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Structural Reliability Assessment (SRA)</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties, including:
<ul>
<li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor.</li>
<li>SRA for pipelines subject to lateral buckling under thermal expansion.</li>
<li>Operating pipelines subject to extreme conditions (for example, turbidity current loading).</li>
<li>Probabilistic response-based seismic loading assessment criteria.</li>
<li>Nuclear containment structure reliability assessment.</li>
<li>Peek Solutions can also coordinate and deliver Quantitative Risk Assessment (QRA), where necessary arranging for inputs on hydrocarbon release modeling from others. (QRA includes assessment of the consequences of failure as well as the probability of occurrence, and typically involves integration of muti-disciplinary inputs, as well as inputs based on local knowledge into a model.)</li>
</ul>
<p>Reasons to perform a Structural Reliability Analysis (SRA) or Quantitative Risk Asessment (QRA) could include:</p>
<ul>
<li>Extreme loadings are encountered such as ice, or geohazard loadings for which there are no established design methods and criteria.</li>
<li>Operating conditions (e.g. wet, sour service) can strongly affect the deformation capacity of the pipe.</li>
<li>Consequences of failure could be exceptionally severe.</li>
<li>New technology or a new concept is being used for which there is limited experience, and ingredient uncertainties affecting the performance are different from those for standard technology.</li>
<li>Where new, more reliable technology, inspection or assessment methods are used whereby uncertainties are reduced, and an adjustment in the required safety margins could be justified.</li>
<li>Value of information analysis under uncertainty in essence consists of performing SRA or QRA with and without the information so that the value of the information can be assessed. Such “information” might consist for instance of a (full scale) testing program, or other investigation to reduce uncertainties.</li>
<li>The loading for a pipeline is somewhere in between load- and displacement-controlled, so that existing criteria for either of these cases is not directly applicable, and a case-specific calibration of the required safety margins is needed.</li>
</ul>
<p>SRA and/or QRA ties together a number of aspects of design, specifications, fabrication and installation methods, monitoring, inspection and maintenance, and contingency response procedures, as all have a bearing on reliability. To include all these aspects properly typically requires a muti-disciplinary team, with expertise that typically cannot be found within a single company. Peek Solutions will assemble and engage such a team (e.g. by subcontracts), drawing from a network of specialists, as well as drawing from customer’s expertise, practices and procedures.</p>
<p>In SRA’s statistical data are used to quantify uncertainties. However in most cases there are important uncertainties for which statistical data are not available. Indeed these dominate more often than not. Ignoring such uncertainties, or making the SRA conditional upon certain assumptions about such uncertainties can be dangerous. Therefore Peek Solutions will assess all uncertainties, rather than only the ones for which statistical data are available, and quantify them by informed engineering judgment supported, engaging external experts as appropriate.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Pipeline Design or Operational Integrity Review, Assurance and/or Specification</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Despite the guidance available from design codes, the design process relies significantly on engineering judgment to define suitable analysis methods, and the associated assumptions, and approximations. Such judgments should be based on a knowledge of the conditions for which the safety margins in the design code have been calibrated, and how there may or may not differ from the conditions for the design under consideration. Safe and economical design requires not only state-of-the-art or beyond analysis methods, but also to understand differences between model and real behavior, their impact, and safety margins needed to cover the associated uncertainties. Peek Solutions can help to assure that such issues have been adequately addressed for pipeline designs where special challenges are involved.</p>
<p>Design reviews can sometimes raise issues at a time when this can have a deleterious effect on project schedules. A better alternative can be to develop a robust design approach from the onset. This can be done by engaging design review at the early stages, or even by developing a Design Specification prior to FEED (Front End Engineering Design) or detailed design.</p>
<p>The Design Specification includes design code interpretation (if applicable), analysis methods, and assumptions and approximations to be made, together with a pertinent example to illustrate these. Further it can include any testing programs, e.g. in the form of additional welding procedure qualification requirements to assure girth weld integrity understrain based design conditions, or special in-situ tests to reduce uncertainty associated with pipe-soil interaction. Where necessary the safety margins in the Design Specification are calibrated based on structural reliability assessment to ensure that a specified target reliability level is achieved.</p>
<p>In addition to design, Peek Solutions supports installation (where this can affect performance), and specification and interpretation of as-built and/or as-laid surveys.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Concept Definition and Assessment</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>In some cases it may be expedient to perform quick evaluations of a number of concepts in order to focus on the most promising ones, or check the feasibility of an innovative one which could deliver considerable life-cycle savings, but for which there is limited or no experience. Peek Solutions can help in this process to conceive, identify, and/or assess innovative concepts. For instance Ralf Peek invented an effective method to reliably trigger lateral buckles in order to safely accommodate thermal expansion called the “Zero-Radius-Bend (ZRB)” method. (See [ref] and/or search “ZRB pipeline” on the web for more information.) This method has been successfully adopted for a number of of high-temperature subsea pipelines for Sarawak Shell and others. According to a review of methods to trigger buckles for controlled thermal expansionby the Safebuck JIP [url], this ZRB is the only one with 100% success in triggering the buckles as intended.</p>
<p>To make innovation feasible, it needs to be assessed at an early stage. Peek Solutions can help by developing and assessing a feasibility-basis design at a level of detail that is sufficient to expose any devil that may be hiding in the details.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Research and Development</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>Peek Solutions’ ambition is to contribute to improved understanding and modeling for pipeline integrity assurance, not only by its own R&D efforts, but also by being at the interface between academic research and applications to the industry, in order to make better use of academic research, but also to influence academic research programs towards matters relevant to pipeline integrity.</p>
<p>Structural Reliability Assessment (SRA) provides an excellent framework to capture and quantify improved knowledge from R&D programs in terms of reduced uncertainty. The economic benefit this generates can then be assessed by a Value of Information Analysis (VIA). Conversely, SRA and VIA can also point to areas where R&D is most fruitful.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Specialized Software Development</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>Ralf Peek has experience with code development and application for Finite Element Analysis, having developed the NPEX code while at the University of Michigan. Using NPEX as a starting point, Peek Solutions can efficiently develop codes for specific applications, such as lateral buckling analysis, buried pipeline subject to ice loading or offset at a fault (with the soil modeled by springs), or calculation of pipe deformation capacity without local buckling.</p>
<p>Experience also includes the development of a material subroutine, VUMAT, for ABAQUS/Explicit to model undrained or drained saturated soil behavior during ice gouging over a buried pipeline.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Leersum, The Netherlands</p>
<p><span class="glyphicon glyphicon-phone"></span> +31 624272619</p>
<p><span class="glyphicon glyphicon-envelope"></span> <a href=mailto:ralf#peek.solutions>ralf#peek.solutions</a></p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<!-- <script src="http://maps.googleapis.com/maps/api/js"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI"></script>
<script>
var myCenter = new google.maps.LatLng(52.010938, 5.437853);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<!-- <p>Bootstrap Theme Made By www.w3schools.com</p> -->
</footer>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
</body>
</html>
One thing I'm struggling a bit with is how to make the background image fit in the Jumbotron without gray space below:
I don't see any settings in the CSS which control the height of the Jumbotron so that I could make it equal to the image's height. How could I achieve this?
The simplest and most scalable/responsive solution would be to scale your background image with CSS to fit the header, rather than basing your content off the image's dimensions.
This can be done with one property added to the .jumbotron class: background-size: cover;.
This will cover the header with your image while maintaining its aspect ratio. Ideally, you should also pair the header with a higher resolution image that scales down to fit the header, rather than having the background image scale up (potentially making it blurry).
I have created my first website using instructions from the old introduction to HTML and CSS on http://codecademy.com
The code works well in the special constructor page, but now when I try to take out into the wild my HTML and CSS do not seem to link up. I try to view in a browser but no joy, I think I tried to upload the files to a file server but still no joy and tried several tutorials.
Can someone please tell me where I am going wrong? is it something to do with the CSS style sheet references at the top of the HTML?
Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About us</li>
</ul>
<ul class="pull-right">
<li>Services</li>
<li>Prices</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Computer repairs and upgrades.</h1>
<p>Fast and friendly services for all your computer needs. Call 07952270940 for a free consultation.</p>
<p>- PC and Laptop repair to your door</p>
<p>- Virus/Malware Removal</p>
<p>- Tune up / Speed up</p>
<p>- Computer Upgrades</p>
<p>- Internet Security</p>
<p>- No-fix / No-fee Policy</p>
<p>- 7 days a week service</p>
<p>- Guaranteed work & parts
</p>
Learn More
</div>
</div>
<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>We pride ourselves on openness and fairness with accurate quotes and no hidden costs.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
Laptops
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_39726_20150729_zpsyypbc60q.jpg">
</div>
<div class="thumbnail">
Website development
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40106_20150820_zpsxs617yvx.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
PC's
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40371_20150828_zpsmabjmlys.jpg">
</div>
<div class="thumbnail">
Upgrades
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_41306_20150916_zpsw0mykfns.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Price promise
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40001_20150814_zpsk1nnnytm.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Security and virus removal
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/c775776e-19e5-40f4-a651-7d73434ce9d0_zpsr59jga2j.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Laptop screen repair</h3>
<p>We are specialists in laptop screen repair. We provide screens for all laptops.</p>
<p>I dunno yet</p>
</div>
<div class="col-md-4">
<h3>No-fix / No-fee Policy</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
</body>
</html>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
height: 470px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:0px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 15px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color: #efefef;
Border-bottom: 1px solid #dbdbdb;
}
.neighborhood-guides h2 {
color: #393c3d;
font-size: 24px;
}
.neighborhood-guides p {
font-size: 15px;
margin-bottom: 13px;
}
Since the third stylesheet's path is relative, you have to make sure the path is correct and you have a main.css file in the same folder as your html file.
Oh man, a few suggestions to help keep you on track!
First off copy your CSS code and store it locally. Create a web project folder and then a themes folder to keep your CSS in.
C:\web
C:\web\index.html
C:\web\themes\classic\style.css
Also avoid BootStrap like the plague! It's CSS done by server guys and it uses jQuery (CSS is client side, not server and client/server are two different mentalities). You don't need to over-complicate your understanding. Stick to HTML and CSS and "vanilla" (plain) JavaScript as adding dependencies makes your code weak and locks you in to things that you're not ready to understand whether it will benefit you or not (hint: those won't). Most people who use that stuff couldn't code vanilla if their lives depended on it so learn real code first and then consider third party stuff per project and only if it fits a given project.
Also understand that there are two parsers in browsers, HTML and XML parsers. You can serve code loose or strict; the HTML parser is loose while the XML parser is strict. Firefox is great for working with the XML parser (save your files as .xhtml) and you can still use HTML5 (it's just HTML5 served XML compatible) but when you make an error (with few exceptions) the whole page will break and you'll get an error message telling you what is wrong which is great because now that you're aware you can quickly fix it and move on.
One of the best resources is Mozilla Developer Network. Generally opt for that when looking things up. Beyond that focus on what you want to achieve and sites like http://caniuse.com/ will give you some (though not all) the insight in to what technologies exist that can be used. Good luck!
This
<link rel="stylesheet" href="main.css">
If your HTML document is not being styled correctly, then you need to make sure that href is pointing to the correct destination for your stylesheet.
If your stylesheet happens to the be in the same directory as your HTML file, you can use this to view it locally on your computer to make sure it is working as expected:
<link rel="stylesheet" type="text/css" href="./main.css">
Also, did you actually copy your CSS into a separate file called main.css? Make sure you do that.
I am trying to align three images (in a bootstrap row) to be vertically central (currently the images are at the top, but I want the choice to either centre them vertically or pull it to the bottom
Here is the image
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vintarn Burmese</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
<style>
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
}
.navbar-default ul {
margin-top: 5px;
font-family: sans-serif;
font-size: 1.1em;
}
.navbar-default li {
font-family: sans-serif;
background-color: rgba(255,253, 208, 0.7);
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.navbar-brand {
font-family: 'Marck Script', cursive;
font-size: 2.5em;
}
.testDiv {
height: 100%;
width: 100%;
background-color: rgba(255,192,203,0.8);
}
p {
line-height: 170%;
font-family: sans-serif;
}
.lead {
font-family: sans-serif;
font-size: 1.8em;
}
.marginTop {
margin-top: 20px;
}
.frontImage {
width: 90%;
margin-top: 30px;
margin-left: 5%;
margin-bottom: 30px;
height: 100%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand">Vintarn Burmese</a>
</div>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li data-toggle="modal" data-target="#aboutModal">Kittens</li>
<li data-toggle="modal" data-target="#contactModal">My Cats</li>
<li>History</li>
<li data-toggle="modal" data-target="#aboutModal">About Millie</li>
<li data-toggle="modal" data-target="#contactModal">Links</li>
<li data-toggle="modal" data-target="#contactModal">Gallery</li>
<li data-toggle="modal" data-target="#contactModal">Contact Us</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="testDiv">
<div class="container contentContainer" id="">
<div class="row-fluid">
<div class="col-md-4 col-sm-4">
<img src="images/landing/bvna-member-signature.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/Vania-8-mths-2.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/gccflog.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-12 marginTop" id="">
<h1 class="lead">Welcome to the story of the Vintarn Burmese...</h1>
<p>My name is Christine Stalker and the first Burmese to come into my life was a brown girl called 'Floo'. She belonged to a vet I worked for in London in 1972 whilst training to be a veterinary nurse and she was simply the naughtiest cat I'd ever met - but she was utterly adorable! I promised myself that one day, I would have a Burmese of my own... Three years later, in 1975, whilst working in Bedford as a newly qualified veterinary nurse, I bought my own very first Burmese (a brown tortie) called Tantabin Amazing Grace - better known as "Eccles" from a local breeder, Mrs Bettina Stapleton. Bettina mentored me into showing and breeding and thus began what has become, over the past 40 years, an enduring "love affair" with Burmese cats! I am a qualified Registered Veterinary Nurse (RVN) and I worked full time in Veterinary Practice for 30 years, until 2002. This was followed by four years in publishing at OUR CATS in Manchester. From 2006 - 2011 I owned & published a trade magazine. I now work part-time for a local charity - this means I get to spend lots of time at home with my cats. I share my home in Cheshire with three adorable Burmese cats. Two are now retired from breeding and have been neutered, they are: 'Whisper' (Imperial Grand Champion & Imperial Grand Premier Vintarn Whisper a Wish) and 'Bo' (Champion Vintarn Rosies Rainbow) - who is Whisper's daughter. Last but not least, is my latest addition, a lilac girl called 'Lyra' (Vintarn Lilac Lyra) I am hoping that Lyra will have her first litter in 2015. My prefix, Vintarn, was registered with the G.C.C.F. in 1977. I enjoy showing my beautiful cats at Championship Shows in the UK, and was delighted when my lilac tortie, Vania, became my first Grand Champion on 8th March 2008! Vania is now retired and lives a life of luxury in Southport! Whisper, Vania's daughter made me very proud in November 2009, by becoming Best of Variety Burmese at the Cheshire Area Cat Show. She was then became a Grand Champion on 6th February 2010, at the Shropshire Cat Show, following in her mother's footsteps! She has subsequently gone on to gain the dual title of Imperial Grand Champion & Imperial Grand Premier. Whilst I enjoy showing, my cats are, first and foremost, my beloved pets.
</p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Marck+Script::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</body>
</html>