bsakhanov

<div class="intro">
  <div class="intro-content">
    <h1 class="intro-title intro-text">MUSTAFA KEMAL ATATÜRK</h1>
    <h2 class="intro-subtitle intro-text">FATHER OF THE TURKS</h2>

    <div class="bio">
      <div class="bio-content">
        <p> Atatürk was a Turkish nationalist leader and founder and first president of the republic of Turkey.</p>
        <p>
          Mustafa Kemal Atatürk was born in 1881 in Salonika (now Thessaloniki) in what was then the Ottoman Empire. His father was a minor official and later a timber merchant. When Atatürk was 12, he was sent to military school and then to the military academy

bsakhanov

<a href="#0" class="button">
  <span>Button</span>
</a>

bsakhanov

<div class="bulgy-radios" role="radiogroup" aria-labelledby="bulgy-radios-label">
  <h2 id="bulgy-radios-label">Select an option</h2>
  <label>
    <input type="radio" name="options" checked />
    <span class="radio"></span>
    <span class="label">First option</span>
  </label>
  <label>
    <input type="radio" name="options" />
    <span class="radio"></span>

bsakhanov

<div class="uk-container">
  <h2>Content Widths</h2>

            <div uk-slider="center: true; velocity: 1.5; easing: cubic-bezier(.4,0,.2,1)">

                <div class="uk-position-relative">

                    <div class="uk-slider-container uk-light">
                        <ul class="test uk-slider-items uk-child-width-1-1 uk-grid uk-grid-small">
                            <li class="uk-width-3-4">

bsakhanov

<header>
  <div class="head-text">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 638.3 72.9" style="enable-background:new 0 0 638.3 72.9;" xml:space="preserve">
    <g id="n2">
      <path d="M638.3,1.4v57.5h-5.5l-17.7-47.9v47.9h-4.7V1.4h5.5l17.7,47.9V1.4H638.3z"/>
    </g>
    <g id="e3">
      <path d="M585.9,6.1v21.7h12.6v4.7h-12.6v21.7h12.6v4.7h-17.2V1.4h17.2v4.7H585.9z"/>
    </g>

bsakhanov

<div class="container">
  <div class="header-container">
    <img src="https://s17.postimg.cc/ypm5ye95r/image.jpg" alt="" class="header-image" />
    <div class="header">
      <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="header-icon">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
      </svg>

      <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="u-float-right header-icon">

bsakhanov

image hover effect — week 10/52

image hover effect — week 10/52

A Pen by Beibit Sakhanov on CodePen.

License.

bsakhanov

<div class="uk-section">
  <div class="uk-container">
    <div class="uk-grid uk-grid-medium" uk-height-match="target: > div > .uk-card; row: false" uk-grid>
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin featured uk-background-cover" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="https://getuikit.com/docs/images/light.jpg" alt="" hidden uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>

bsakhanov

Grid Layout w/ UiKit

A Pen by Beibit Sakhanov on CodePen.

License.

bsakhanov

Grid Layout w/ UiKit alt-2

A Pen by Beibit Sakhanov on CodePen.

License.