https://i.sstatic.net/OzMVr.jpg I have a code snippet that needs a horizontal border similar to the one shown in the image
<section class="about">
<div class="container">
<h1 class="text-center">The Resturant</h1>
<h3 class="text-center">A little about us and a brief history of how we started</h3>
<div class="about-border"></div>
</div>
</section>
Experiment with
.custom-border {
display: block;
width: 100px;
height: 4px;
background: #ffd700;
margin: 30px auto;
}
/* Extra CSS for centering the heading text */
.custom h1, .custom h2 {
text-align: center;
}
Try it out on CodePen: https://codepen.io/yourusername/pen/XWzKpVy
The use of the .about-border div is superfluous; instead, you can style an :after pseudo-element. Here's an example:
.about:after { /* this represents the border */
content:"";
display:block;
width: 6em;
max-width:70%;
border-bottom: 0.3em solid #F3C577;
margin: 2em auto 0;
}
Check out the complete example here: https://jsfiddle.net/6d6tvqb2/
for instance
.info .wrapper h3 {border-bottom: 6px solid #000;}
Check out the solution here:
https://i.sstatic.net/U2W2u.png
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
<script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="app.js"></script>
<script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<section class="about">
<div class="container">
<h1 class="text-center">Our Storytelling Experience</h1>
<h3 class="text-center">Learn more about how we started and our journey so far</h3>
<div class="col-xs-12"><hr></div>
</div>
</section>
</body>
</html>
Check out this code snippet and see if it meets your needs.
<style>
.container {
text-align: center;
}
.about-border {
width: 200px;
height: 3px;
background: #F3C577;
margin: 20px auto;
}
</style>
<section class="about">
<div class="container">
<h1 class="text-center">Our Story</h1>
<h3 class="text-center">Learn more about us and our journey</h3>
<div class="about-border"></div>
</div>
</section>
I am currently using the owl carousel plugin and I am struggling to figure out how to center align the navigation vertically while also using the autoHeight option. http://codepen.io/anon/pen/jJAHL I have attempted the following code snippet, but it seem ...
When attempting to pass a value to a JavaScript function by clicking a link, I encountered an error message: Uncaught SyntaxError: Unexpected identifier The following is the code snippet: <?php include_once("php_includes/check_login_status.php") ...
Is it possible to utilize a JavaScript Image object? If yes, could you provide an illustrative example? And is it feasible to achieve this with jQuery? ...
I am encountering an issue with a CSS variable: :root{ --red: hsl(0, 100%, 74%); } Despite defining the variable, it does not work in the following code snippet: .page-wrapper{ background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6 ...
I've been struggling to center the links/tabs on my Bootstrap navbar for days now and I just can't seem to get it right. I've gone through countless similar questions without any luck. Something must be off in my code or maybe I'm not t ...
As a budding Web Designer, I am eager to absorb the most efficient techniques utilized in the world of web design. Can anyone recommend some tutorials for mastering the creation of innovative websites using Photoshop, CSS, HTML, and more? ...
I'm having trouble replacing a p tag with a span while keeping the actual content intact. Can anyone assist me with this, please? $('.anim-letters p').replaceWith( "<span class='letters'>" + $('this').text() + "< ...
My table has a 100% width, and some of the td elements have overflow hidden. I want to make their text appear as ellipsis when it's too long. I can achieve this with fixed td sizes, but I need them to be relative to the content. This question was fi ...
Is there a way to insert phoneNo["phoneno"] into an HTML input using the ng-bind directive in Angular? While {{phoneNo["phoneno"]}} can display the data, it results in a syntax error when I try to put it like this: <input class="form-control" type="t ...
On my webpage's splash page, there are 4 divs but only the home div is initially visible. The other three are hidden. Each of these divs has a button associated with it that triggers a jquery click event to swap out the currently visible div for the ...
In my component, I have a loop that goes through an array of different areas with unique IDs. When you click the button, it triggers a dialog containing an iframe. This iframe listens for an event and retrieves data as JSON, then sends it via POST to an IN ...
I am currently working on this code snippet: public ActionResult JoinSupToPro() { SupplierDBContext dbS = new SupplierDBContext(); var innerJoinQuery = from pro in db.Products join sup in dbS.Suppliers on pro.SupplierId equals sup ...
I've encountered an issue with my images within a jquery slider. While the slider itself is functioning properly, I am facing a couple of challenges. Initially, I aimed to make the images responsive, but upon removing the height property, the content ...
I noticed that when I open object X and Y, they have the same fields, tabs, and checkboxes. However, I am confused as to why the IDs of the checkboxes and other elements are different. Can you explain what gwt-uid(number) means? Please take a look at the a ...
When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...
After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research ind ...
Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...
Being relatively new to JavaScript and jQuery, my knowledge is solid when it comes to HTML & CSS. Currently, I have a page with 20 minimized pictures (with plans to increase to 500+ images) that open into a new page when clicked. Although I have no issues ...
Having some alignment issues in the header section of my article. I took a screenshot, but you can also check out the live page here. See the pic below: Upon inspecting the area I wanted to adjust, I discovered: span.itemAuthorDetailss position: relativ ...
Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...