Jump to content
Welcome, welcome! Come in and register, and have some developer coffee. 👨‍💻 ×

CSS Ideas For Title Bar and Sub Heading


Recommended Posts

I am just beginner in CSS.   I remember my first PHP website was using the following color scheme, and I thought it was beautiful. So I am going to share it on here.

Below is the color scheme:

TT01.JPG.49e57ad8aeb4275aace2e50c6e26affb.JPG

Below is the code with CSS script:

<html>
<head>
<style>
body {
  font-family:Arial; }
h1 {
  border-left-color: Crimson;
  border-left-style: solid;
  border-left-width: 10px;
  padding: 5px 5px;
  background-color: Coral;
  color: White; }
h2 {
  border-left-color: DodgerBlue;
  border-left-style: solid;
  border-left-width: 10px;
  padding: 5px 5px;
  background-color: LightSkyBlue;
  color: White;}
button {
  padding: 10px 10px;
  background-color: Gold; 
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer; }
button:hover {
  background-color: #FFFF66;
  color: Black; }
</style>
</head>
<body>
<h1>Title Bar</h1>
<p>Insert introductory paragraph here.</p>
<h2>Subheading 1</h2>
<p>Insert subsection paragraph here.</p>
<h2>Subheading 2</h2>
<p>Insert subsection paragraph here.</p>
<button>Download</button>
</body>
</html>

Of course the code is not working when clicking on the button, or mouse hovering effect.  Like my ideas? 

Edited by FlierMate
Added mouse hover effect for button
  • Like 1
Link to post
Share on other sites
4 hours ago, FlierMate said:

I am just beginner in CSS.   I remember my first PHP website was using the following color scheme, and I thought it was beautiful. So I am going to share it on here.

Below is the color scheme:

TT01.JPG.49e57ad8aeb4275aace2e50c6e26affb.JPG

Below is the code with CSS script:

<html>
<head>
<style>
body {
  font-family:Arial; }
h1 {
  border-left-color: Crimson;
  border-left-style: solid;
  border-left-width: 10px;
  padding: 5px 5px;
  background-color: Coral;
  color: White; }
h2 {
  border-left-color: DodgerBlue;
  border-left-style: solid;
  border-left-width: 10px;
  padding: 5px 5px;
  background-color: LightSkyBlue;
  color: White;}
button {
  padding: 10px 10px;
  background-color: Gold; 
  border-radius: 10px;
  font-size: 20px; }
</style>
</head>
<body>
<h1>Title Bar</h1>
<p>Insert introductory paragraph here.</p>
<h2>Subheading 1</h2>
<p>Insert subsection paragraph here.</p>
<h2>Subheading 2</h2>
<p>Insert subsection paragraph here.</p>
<button>Download</button>
</body>
</html>

Of course the code is not working when clicking on the button, or mouse hovering effect.  Like my ideas? 

 

Interesting maximum utilisation of single elements. I like the idea. Keep them coming 😄

  • Thanks 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...