HTML Tabs without Javascript

Thu, 12 May 2022 18:46:07 +0000

HTML Link to heading

<div class="tabs tab-right">
  <style>
    .tabs input#tab1:checked ~ .tab-content-1,
    .tabs input#tab2:checked ~ .tab-content-2,
    .tabs input#tab3:checked ~ .tab-content-3 {
      display: block;
    }
  </style>

  <input type="radio" name="tab-select" id="tab1" checked />
  <label for="tab1">Ruby</label>
  <div class="tab-content tab-content-1">

~~~ruby
puts 'Hello'
~~~

  </div>

  <input type="radio" name="tab-select" id="tab2" />
  <label for="tab2">Python</label>
  <div class="tab-content tab-content-2">

~~~python
print('Hello')
~~~

  </div>

  <input type="radio" name="tab-select" id="tab3" />
  <label for="tab3">Javascript</label>
  <div class="tab-content tab-content-3">

~~~js
console.log('Hello')
~~~

  </div>
</div>

CSS Link to heading

<style>
  /* Parent */
  .tabs {
    margin: 2rem 0 2rem 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  .tabs.tab-left {
    justify-content: flex-start;
  }
  .tabs.tab-right {
    justify-content: flex-end;
  }

  /* Floating */
  .tabs.tab-left label {
    margin-right: 0.5rem;
  }
  .tabs.tab-right label {
    margin-left: 0.5rem;
  }

  /* Input */
  .tabs input {
    display: none;
  }

  /* Label */
  .tabs label {
    background-color: #e0e0e0;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    border-bottom-style: hidden;
    border-radius: 4px 4px 0px 0px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 0.3rem 0.6rem;
    user-select: none;
    order: 1;
    position: relative;
    top: 1px;
  }
  .tabs input:checked + label {
    background-color: #fafafa;
  }

  /* Content */
  .tabs .tab-content {
    background-color: #fafafa;
    display: none;
    padding: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    width: 100%;
    order: 2;
  }
  .tabs.tab-left .tab-content {
    border-radius: 0px 4px 4px 4px;
  }
  .tabs.tab-right .tab-content {
    border-radius: 4px 0px 4px 4px;
  }
</style>

Result Link to heading

Some text at the top to see it’s positioned properly!

Add a custom font to your website

Fri, 11 Dec 2020 13:20:15 +0000

Download and extract your font (I use Roboto):

#!/usr/bin/env sh

set -eux

ROBOTO_SHA=017a959dbef25cf37cb3cd407b174799b09b8b28ad72494be389ee3b563e3751
ROBOTO_NAME=Roboto
ROBOTO_ZIP="$ROBOTO_NAME".zip
ROBOTO_URL=https://fonts.google.com/download?family=Roboto
ROBOTO_TMP=./tmp

rm -rf "$ROBOTO_TMP"
mkdir -p "$ROBOTO_TMP"
wget "$ROBOTO_URL" -O "$ROBOTO_TMP"/"$ROBOTO_ZIP"
sha256sum "$ROBOTO_TMP"/"$ROBOTO_ZIP"
echo "$ROBOTO_SHA  $ROBOTO_TMP/$ROBOTO_ZIP" | sha256sum -c -
unzip "$ROBOTO_TMP"/"$ROBOTO_ZIP" -d "$ROBOTO_TMP"

cp -r "$ROBOTO_TMP"/Roboto-*.ttf webfonts/

Declare the needed font faces in your CSS:

@font-face {
  font-family: "Roboto";
  src: url("webfonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: "Roboto";
  font-weight: bold;
  src: url("webfonts/Roboto-Bold.ttf");
}

Start using them:

body {
  font-family: "Roboto";
}

Css on Codrut Constantin Gusoi

HTML Tabs without Javascript

HTML Link to heading

CSS Link to heading

Result Link to heading

Add a custom font to your website