Creating one (only one) TAB

HTML & CSS
36

I am sorry for the long delay in replying but I am, for my sins,
an octogenarian and as such I often experience ‘brain farts’
when tackling coding projects. Yours, unfortunately, was no
exception. groan2

Here is what I eventually came up with…
index.html

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Tab Example</title>

<link href="https://fonts.googleapis.com/css?family=Courier+Prime" 
 rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Special+Elite" 
 rel="stylesheet" media="screen">
<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <h1>To-morrow, and to-morrow, and to-morrow,</h1>

 <div id="container">

  <svg  viewBox="0 0 254 151">
   <path d="M2252 1489 c-166 -38 -336 -112 -491 -214 -80 -53 -234 -193 -262
    -239 -9 -15 -62 -81 -118 -146 -56 -65 -101 -122 -101 -125 0 -4 -36 -49 -80
    -100 -44 -51 -80 -97 -80 -102 0 -4 -9 -14 -20 -21 -12 -7 -24 -21 -28 -31
    -11 -28 -117 -117 -231 -192 -204 -135 -446 -235 -671 -279 -63 -12 -128 -25
    -145 -30 -17 -4 543 -8 1243 -9 l1272 -1 0 755 0 755 -102 -1 c-60 -1 -138 -9
    -186 -20z" transform="translate(0,151) scale(0.1,-0.1)" fill="#000"/>
  </svg>

  <div id="text-holder"></div>

  <svg viewBox="0 0 254 151">
   <path d="M0 755 l0 -755 1273 1 c699 1 1259 5 1242 9 -16 5 -82 18 -145 30
    -225 44 -467 144 -671 279 -114 75 -220 164 -231 192 -4 10 -16 24 -28 31 -11
    7 -20 17 -20 21 0 5 -36 51 -80 102 -44 51 -80 96 -80 100 0 3 -45 60 -101
    125 -56 65 -109 131 -118 146 -28 46 -182 186 -262 239 -225 148 -479 235
    -686 235 l-93 0 0 -755z" transform="translate(0,151) scale(0.1,-0.1)" fill="#000"/>
  </svg>

  <div id="text">
   &mdash;Some Long Title&mdash;
  </div>
 
 </div>

</body>
</html>

screen.css

body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
h1 {
   margin: 1.25rem 0;
   font: normal 2rem/2.2rem 'Special Elite', serif;
   text-align: center;
 }
#container {
   position: relative;
   display: flex; 
   justify-content: center;
   width: 60vw; /* adjust this value to suit */
   margin: auto;
 }
#text-holder  {
   width: 90%; /* adjust this value to suit */
   background-color: #000;
 }
#text {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate( -50%,-50% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 2.75vw; /* adjust this value to suit */
   color: #fff;
 }
@media ( max-width: 56em ){
#container {
   width: 80vw; /* adjust this value to suit */
  }
#text {
   font-size: 3.5vw; /* adjust this value to suit */
  }
 }
@media ( max-width: 40em ){
#container {
   width: 100vw; /* adjust this value to suit */
  }
#text {
   font-size: 4.5vw; /* adjust this value to suit */
  }
 }

You may see it here…
Full Page View

1 Like