EN TR
<div class="browser">
	<div class="bar">
		<div class="bar-actions">
			<div class="buttons">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="#" class="margin-right">
				<svg class="svg-icon" width="21" height="16" viewBox="0 0 21 16">
					<path d="M3.31982 15.6602H17.6802C19.4233 15.6602 20.2866 14.7969 20.2866 13.0869V2.95166C20.2866 1.2417 19.4233 0.378418 17.6802 0.378418H3.31982C1.58496 0.378418 0.713379 1.2334 0.713379 2.95166V13.0869C0.713379 14.8052 1.58496 15.6602 3.31982 15.6602ZM3.33643 14.3237C2.50635 14.3237 2.0498 13.8838 2.0498 13.0205V3.01807C2.0498 2.15479 2.50635 1.71484 3.33643 1.71484H7.03857V14.3237H3.33643ZM17.6636 1.71484C18.4854 1.71484 18.9502 2.15479 18.9502 3.01807V13.0205C18.9502 13.8838 18.4854 14.3237 17.6636 14.3237H8.3418V1.71484H17.6636ZM5.43652 4.79443C5.69385 4.79443 5.90967 4.57031 5.90967 4.32959C5.90967 4.08057 5.69385 3.86475 5.43652 3.86475H3.66016C3.41113 3.86475 3.18701 4.08057 3.18701 4.32959C3.18701 4.57031 3.41113 4.79443 3.66016 4.79443H5.43652ZM5.43652 6.94434C5.69385 6.94434 5.90967 6.72021 5.90967 6.47119C5.90967 6.22217 5.69385 6.01465 5.43652 6.01465H3.66016C3.41113 6.01465 3.18701 6.22217 3.18701 6.47119C3.18701 6.72021 3.41113 6.94434 3.66016 6.94434H5.43652ZM5.43652 9.08594C5.69385 9.08594 5.90967 8.87842 5.90967 8.62939C5.90967 8.38037 5.69385 8.16455 5.43652 8.16455H3.66016C3.41113 8.16455 3.18701 8.38037 3.18701 8.62939C3.18701 8.87842 3.41113 9.08594 3.66016 9.08594H5.43652Z" />
				</svg>
			</a>
			<a href="#">
				<svg class="svg-icon" width="9" height="16" viewBox="0 0 9 16">
					<path d="M7.26416 14.9878L0.681641 8.56299C0.523926 8.40527 0.440918 8.21436 0.440918 8.00684C0.440918 7.79102 0.532227 7.5835 0.689941 7.45068L7.26416 1.01758C7.40527 0.876465 7.58789 0.793457 7.80371 0.793457C8.23535 0.793457 8.55908 1.12549 8.55908 1.55713C8.55908 1.75635 8.47607 1.95557 8.34326 2.09668L2.30029 8.00684L8.34326 13.917C8.47607 14.0581 8.55908 14.249 8.55908 14.4565C8.55908 14.8882 8.23535 15.2119 7.80371 15.2119C7.58789 15.2119 7.40527 15.1289 7.26416 14.9878Z"/>
				</svg>
			</a>
			<a href="#" class="passive">
				<svg class="svg-icon" width="9" height="16" viewBox="0 0 9 16">
					<path d="M1.19629 15.2202C1.41211 15.2202 1.59473 15.1372 1.73584 14.9961L8.31836 8.56299C8.47607 8.40527 8.55908 8.21436 8.55908 8.00684C8.55908 7.79102 8.47607 7.5918 8.31836 7.45068L1.74414 1.02588C1.59473 0.876465 1.41211 0.793457 1.19629 0.793457C0.764648 0.793457 0.440918 1.12549 0.440918 1.55713C0.440918 1.75635 0.523926 1.95557 0.656738 2.09668L6.69971 8.00684L0.656738 13.917C0.523926 14.0581 0.440918 14.249 0.440918 14.4565C0.440918 14.8882 0.764648 15.2202 1.19629 15.2202Z" />
				</svg>
			</a>
		</div>
		<div class="bar-url">
			<a href="#" class="margin-right">
				<svg class="svg-icon" width="15" height="18" viewBox="0 0 15 18">
					<path d="M7.5 17.6147C7.63281 17.6147 7.84863 17.5649 8.05615 17.4487C12.7793 14.8008 14.3979 13.6802 14.3979 10.6504V4.30029C14.3979 3.42871 14.0244 3.15479 13.3188 2.85596C12.3394 2.44922 9.17676 1.31201 8.19727 0.97168C7.97314 0.896973 7.73242 0.847168 7.5 0.847168C7.26758 0.847168 7.02686 0.913574 6.81104 0.97168C5.83154 1.25391 2.66064 2.45752 1.68115 2.85596C0.983887 3.14648 0.602051 3.42871 0.602051 4.30029V10.6504C0.602051 13.6802 2.229 14.7925 6.94385 17.4487C7.15967 17.5649 7.36719 17.6147 7.5 17.6147ZM7.83203 2.2583C9.08545 2.75635 11.5176 3.63623 12.8042 4.07617C13.0283 4.15918 13.0781 4.27539 13.0781 4.55762V10.3433C13.0781 12.9082 11.8496 13.5806 8.01465 15.9131C7.77393 16.0625 7.64111 16.104 7.5083 16.1123V2.18359C7.59131 2.18359 7.69922 2.2085 7.83203 2.2583Z"/>
				</svg>
			</a>
			<div class="url">
				<svg class="svg-icon" width="8" height="12" viewBox="0 0 8 12">
					<path d="M1.21094 11.7158H6.78906C7.54492 11.7158 7.91406 11.3408 7.91406 10.5205V6.21973C7.91406 5.48145 7.60938 5.10059 6.98242 5.03613V3.55957C6.98242 1.35059 5.53516 0.28418 4 0.28418C2.46484 0.28418 1.01758 1.35059 1.01758 3.55957V5.06543C0.443359 5.15332 0.0859375 5.52832 0.0859375 6.21973V10.5205C0.0859375 11.3408 0.455078 11.7158 1.21094 11.7158ZM1.96094 3.43652C1.96094 1.96582 2.9043 1.18652 4 1.18652C5.0957 1.18652 6.03906 1.96582 6.03906 3.43652V5.03027L1.96094 5.03613V3.43652Z"/>
				</svg>
				figma.com
				<a href="#" class="refresh-btn">
					<svg class="svg-icon" width="11" height="14" viewBox="0 0 11 14">
						<path d="M5.2832 6.61523C5.42969 6.61523 5.54102 6.56836 5.62305 6.48047L8.03711 4.05469C8.14258 3.95508 8.18359 3.83789 8.18359 3.70312C8.18359 3.57422 8.13086 3.44531 8.03711 3.35156L5.62305 0.902344C5.54102 0.808594 5.42383 0.761719 5.2832 0.761719C5.01953 0.761719 4.82031 0.972656 4.82031 1.24219C4.82031 1.36523 4.86719 1.48242 4.94922 1.57617L6.51367 3.11133C6.17969 3.05273 5.83984 3.01758 5.5 3.01758C2.62891 3.01758 0.320312 5.32031 0.320312 8.19141C0.320312 11.0684 2.62891 13.377 5.5 13.377C8.37109 13.377 10.6738 11.0684 10.6738 8.19141C10.6738 7.91016 10.4746 7.70508 10.1875 7.70508C9.91211 7.70508 9.73047 7.91016 9.73047 8.19141C9.73047 10.5469 7.84961 12.4336 5.5 12.4336C3.15039 12.4336 1.26367 10.5469 1.26367 8.19141C1.26367 5.8418 3.15039 3.96094 5.5 3.96094C5.94531 3.96094 6.35547 3.99609 6.70703 4.07227L4.95508 5.8125C4.86719 5.90625 4.82031 6.02344 4.82031 6.14648C4.82031 6.41602 5.01953 6.61523 5.2832 6.61523Z" />
					</svg>
				</a>
			</div>
		</div>
		<div class="bar-actions with-space">
			<a href="#">
				<svg class="svg-icon" width="17" height="18" viewBox="0 0 17 18">
					<path d="M8.5 17.4736C13.1318 17.4736 16.9668 13.6304 16.9668 9.00684C16.9668 4.375 13.1235 0.540039 8.4917 0.540039C3.86816 0.540039 0.0332031 4.375 0.0332031 9.00684C0.0332031 13.6304 3.87646 17.4736 8.5 17.4736ZM8.5 16.0625C4.58203 16.0625 1.45264 12.9248 1.45264 9.00684C1.45264 5.08887 4.57373 1.95117 8.4917 1.95117C12.4097 1.95117 15.5474 5.08887 15.5557 9.00684C15.564 12.9248 12.418 16.0625 8.5 16.0625ZM8.5 4.78174C8.14307 4.78174 7.87744 5.03906 7.87744 5.4043V9.55469L7.94385 11.3062L7.11377 10.3101L6.12598 9.31396C6.00977 9.20605 5.86035 9.13135 5.68604 9.13135C5.3457 9.13135 5.08838 9.39697 5.08838 9.729C5.08838 9.90332 5.13818 10.0527 5.24609 10.1606L8.01855 12.9248C8.18457 13.0908 8.32568 13.1572 8.5 13.1572C8.68262 13.1572 8.83203 13.0825 8.98975 12.9248L11.7539 10.1606C11.8618 10.0527 11.9282 9.90332 11.9282 9.729C11.9282 9.39697 11.6626 9.13135 11.3223 9.13135C11.1396 9.13135 10.9902 9.19775 10.8823 9.31396L9.90283 10.3101L9.05615 11.3145L9.12256 9.55469V5.4043C9.12256 5.03906 8.86523 4.78174 8.5 4.78174Z" />
				</svg>
			</a>
			<a href="#">
				<svg class="svg-icon" width="15" height="19" viewBox="0 0 15 19">
					<path d="M7.5 12.2646C7.85693 12.2646 8.15576 11.9658 8.15576 11.6172V3.09229L8.10596 1.84717L8.67041 2.43652L9.92383 3.78125C10.04 3.91406 10.2144 3.98047 10.3721 3.98047C10.7207 3.98047 10.978 3.73145 10.978 3.39111C10.978 3.2168 10.9116 3.08398 10.7871 2.95947L7.98145 0.253418C7.81543 0.0874023 7.66602 0.0292969 7.5 0.0292969C7.33398 0.0292969 7.18457 0.0874023 7.01855 0.253418L4.21289 2.95947C4.08838 3.08398 4.01367 3.2168 4.01367 3.39111C4.01367 3.73145 4.271 3.98047 4.61133 3.98047C4.77734 3.98047 4.95166 3.91406 5.06787 3.78125L6.32959 2.43652L6.89404 1.84717L6.83594 3.09229V11.6172C6.83594 11.9658 7.14307 12.2646 7.5 12.2646ZM2.73535 18.7642H12.2563C13.9912 18.7642 14.8628 17.9009 14.8628 16.1909V7.90674C14.8628 6.19678 13.9912 5.3335 12.2563 5.3335H9.94043V6.66992H12.2314C13.0532 6.66992 13.5264 7.11816 13.5264 7.98145V16.1162C13.5264 16.9795 13.0532 17.4277 12.2314 17.4277H2.75195C1.92188 17.4277 1.46533 16.9795 1.46533 16.1162V7.98145C1.46533 7.11816 1.92188 6.66992 2.75195 6.66992H5.05127V5.3335H2.73535C1.00049 5.3335 0.128906 6.19678 0.128906 7.90674V16.1909C0.128906 17.9009 1.00049 18.7642 2.73535 18.7642Z"/>
				</svg>
			</a>
			<a href="#">
				<svg class="svg-icon" width="15" height="15" viewBox="0 0 15 15">
					<path d="M7.5 14.0044C7.90674 14.0044 8.24707 13.6807 8.24707 13.2822V7.76221H13.6094C14.0078 7.76221 14.3481 7.42188 14.3481 7.01514C14.3481 6.6084 14.0078 6.27637 13.6094 6.27637H8.24707V0.748047C8.24707 0.349609 7.90674 0.0258789 7.5 0.0258789C7.09326 0.0258789 6.76123 0.349609 6.76123 0.748047V6.27637H1.39062C0.992188 6.27637 0.651855 6.6084 0.651855 7.01514C0.651855 7.42188 0.992188 7.76221 1.39062 7.76221H6.76123V13.2822C6.76123 13.6807 7.09326 14.0044 7.5 14.0044Z" />
				</svg>
			</a>
			<a href="#">
				<svg class="svg-icon" width="19" height="18" viewBox="0 0 19 18">
					<path d="M3.32422 13.8711H4.74365V15.1411C4.74365 16.8511 5.60693 17.7144 7.3501 17.7144H15.6841C17.4106 17.7144 18.2822 16.8511 18.2822 15.1411V6.74072C18.2822 5.03076 17.4106 4.16748 15.6841 4.16748H14.2563V2.89746C14.2563 1.1875 13.3848 0.324219 11.6582 0.324219H3.32422C1.58105 0.324219 0.717773 1.1875 0.717773 2.89746V11.2979C0.717773 13.0078 1.58105 13.8711 3.32422 13.8711ZM3.34082 12.5347C2.51074 12.5347 2.0542 12.0864 2.0542 11.2231V2.97217C2.0542 2.10889 2.51074 1.66064 3.34082 1.66064H11.6333C12.4551 1.66064 12.9199 2.10889 12.9199 2.97217V4.16748H7.3501C5.60693 4.16748 4.74365 5.02246 4.74365 6.74072V12.5347H3.34082ZM7.3667 16.3779C6.54492 16.3779 6.08008 15.9297 6.08008 15.0664V6.81543C6.08008 5.95215 6.54492 5.50391 7.3667 5.50391H15.6592C16.481 5.50391 16.9458 5.95215 16.9458 6.81543V15.0664C16.9458 15.9297 16.481 16.3779 15.6592 16.3779H7.3667Z"/>
				</svg>
			</a>
		</div>
	</div>
	<div class="iframe">
<!--		<iframe src="https://prototurk.com" frameborder="0"></iframe>-->
	</div>
</div>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  padding: 25px;
  height: 100vh;
}

.browser {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 1px 0 rgba(#000, .7), 0 20px 30px 0 rgba(#000, .3), 0 10px 50px 0 rgba(#000, .2);
  display: flex;
  flex-direction: column;

  --svg-icon-color: #737373;
  --bar-bg-color: #fff;
  --frame-bg-color: #fff;
  --bar-url-bg-color: rgba(0, 0, 0, .05);
  --bar-url-text-color: #4C4C4C;
  --bar-url-icon-color: #9E9E9E;
  --bar-link-hover-color: rgba(0, 0, 0, .03);

  .bar {
    height: 53px;
    background: var(--bar-bg-color);
    box-shadow: 0 -0.5px 0 0 rgba(#000, .05) inset, 0 0.5px 0 0 rgba(#000, .15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px 0 21px;

    a {
      width: 33px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      transition: 300ms background-color;

      &:hover {
        background: var(--bar-link-hover-color);
      }

      &.margin-right {
        margin-right: 9px;
      }

      &.passive {
        svg {
          opacity: .5;
        }
      }
    }

    .bar-actions {
      display: flex;
      align-items: center;

      &.with-space > a {
        margin-left: 8px;
      }

      .buttons {
        display: flex;
        align-items: center;
        margin-right: 11px;

        span {
          width: 12px;
          height: 12px;
          background: #EE6A5F;
          border-radius: 50%;
          margin-right: 8px;
          border: 1px solid #CE5347;

          &:nth-child(2) {
            background: #F5BD4F;
            border-color: #D6A243;
          }

          &:nth-child(3) {
            background: #61C454;
            border-color: #58A942;
          }
        }
      }
    }

    .bar-url {
      display: flex;
      align-items: center;

      .url {
        width: 516px;
        height: 28px;
        background: var(--bar-url-bg-color);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: var(--bar-url-text-color);
        overflow: hidden;
        position: relative;

        .refresh-btn {
          width: 28px;
          position: absolute;
          top: 0;
          right: 0;

          svg {
            fill: var(--svg-icon-color);
            margin-right: 0;
          }
        }

        svg {
          margin-right: 6px;
          fill: var(--bar-url-icon-color);
        }
      }
    }

    .svg-icon {
      fill: var(--svg-icon-color);
    }
  }

  .iframe {
    flex: 1;
    background: var(--frame-bg-color);

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  &.dark {
    --svg-icon-color: #999C9F;
    --bar-bg-color: #191C1F;
    --frame-bg-color: #38393A;
    --bar-url-bg-color: #0C0F12;
    --bar-url-text-color: #fff;
    --bar-url-icon-color: #DBDBDC;
    --bar-link-hover-color: rgba(255, 255, 255, .06);
  }
}