Webleb - HTML UI Elements -

Abrir no Editor Publique Seu Código

28 May 2025

Caneta de pena

HTML

CSS

@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900';
body {
  background: #221f1f;
  color: #ffffff;
  font-family: "Lato", sans-serif!important;
}

h2, .TitleList .Title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1em;
}

p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 1em;
}

.Header {
  background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#00000000",GradientType=0 );
  /* IE6-9 */
  display: flex;
  padding: 40px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 5;
}

.Logo {
  width: 151px;
  height: 41px;
  margin-right: 10px;
  transition: margin 0.125s ease;
}
.Logo svg {
  transform: scale(0.5);
  transform-origin: 0 0;
}
.Logo svg path {
  fill: #e50914;
  transition: fill 0.125s ease;
}
.Logo:hover {
  cursor: pointer;
  margin-top: 2px;
}
.Logo:hover svg path {
  fill: #ffffff !important;
}

.Navigation ul {
  display: flex;
  height: 37px;
  align-items: center;
  padding: 0 10px;
}
.Navigation ul li {
  font-weight: 400;
  padding: 7px 10px;
  font-size: 14px;
  transition: background 0.125s ease;
  border-radius: 3px;
}
.Navigation ul li:hover {
  background: #e50914;
  cursor: pointer;
}

.Search {
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.Search input {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 14px;
  height: 37px;
  width: 20%;
  background: transparent;
  color: #ffffff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border: 2px solid rgba(245, 245, 241, 0.1);
  outline: none;
  border-radius: 37px;
  padding: 0 10px;
  pointer-events: all;
  transition: border 0.25s ease, width 0.125s ease 0.125s;
}
.Search input:focus {
  border: 2px solid #e50914;
  width: 30%;
}

.UserProfile {
  margin-left: auto;
}
.UserProfile .User {
  display: flex;
}
.UserProfile .User .image {
  border-radius: 44px;
  margin-left: 10px;
  overflow: hidden;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border 0.125s ease;
}
.UserProfile .User .image img {
  width: 100%;
  display: block;
}
.UserProfile .User .name {
  align-items: center;
  display: flex;
  font-size: 18px;
  font-weight: 300;
  height: 44px;
}
.UserProfile .User:hover {
  cursor: pointer;
}
.UserProfile .User:hover .image {
  border: 3px solid #e50914;
}
.UserProfile .UserProfile-menu {
  display: none;
}

.Hero {
  width: 100%;
  position: relative;
  background-size: cover;
  min-height: 800px;
}
.Hero .content {
  position: relative;
  z-index: 4;
  width: 500px;
  left: 10vw;
  top: 10vw;
}
.Hero .content .logo {
  max-width: 400px;
  display: block;
  position: relative;
  left: -5px;
}
.Hero .content p {
  width: 100%;
}
.Hero .content .button-wrapper {
  display: flex;
  width: 400px;
  margin-top: 30px;
}
.Hero .content .button-wrapper .Button:first-child {
  margin-right: 10px;
}
.Hero .overlay {
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #221f1f 0%, rgba(34, 31, 31, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#00000000",GradientType=0 );
  /* IE6-9 */
  height: 100%;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotate(180deg);
}

.Button {
  background: transparent;
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid rgba(245, 245, 241, 0.2);
  border-radius: 44px;
  font-size: 14px;
  font-weight: 600;
  transition: border 0.125s ease, background 0.125s ease;
}
.Button:hover {
  border: 2px solid #f5f5f1;
}
.Button[data-primary=true] {
  border: 2px solid #e50914;
}
.Button[data-primary=true]:hover {
  background: #e50914;
}

.Hero ~ .TitleList:nth-child(3) {
  margin-top: -10vw;
  position: relative;
  z-index: 4;
}

.TitleList {
  padding: 20px 40px;
  box-sizing: border-box;
  transition: opacity 3s ease;
  opacity: 0;
}
.TitleList .titles-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
  width: calc(100vw - 80px);
  box-sizing: border-box;
  justify-content: space-between;
}
.TitleList[data-loaded=true] {
  opacity: 1;
}

.Item {
  width: calc(20% - 10px);
  min-width: calc(20% - 10px);
  background-color: #000000;
  flex: 1 0 auto;
  background-position: center;
  background-size: 100%;
  height: 200px;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-right: 10px;
  transition: background 1s ease;
}
.Item:nth-child(n+6) {
  margin-top: 20px;
}
.Item:last-child {
  margin-right: 0;
}
.Item .overlay {
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#00000000",GradientType=0 );
  /* IE6-9 */
  padding: 20px;
  position: relative;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.125s ease;
}
.Item .overlay .title {
  font-size: 22px;
  font-weight: 200;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.Item .overlay .rating {
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.25s ease 0.125s;
}
.Item .overlay .plot {
  font-size: 14px;
  display: -webkit-box;
  margin-top: 100px;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: margin 0.25s ease 0.125s, opacity 0.25s ease 0.25s;
}
.Item:hover {
  background-size: 150%;
}
.Item:hover .overlay {
  opacity: 1;
  pointer-events: all;
}
.Item:hover .overlay .plot {
  margin-top: 10px;
  opacity: 1;
}
.Item:hover .overlay .title {
  opacity: 1;
}
.Item:hover .overlay .rating {
  opacity: 1;
}
.Item:hover .overlay .ListToggle {
  opacity: 1;
}

.ListToggle {
  border: 2px solid rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 32px;
  overflow: hidden;
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 0;
}
.ListToggle:hover {
  border: 2px solid #ffffff;
}
.ListToggle:hover div {
  top: -32px;
}
.ListToggle[data-toggled=true] {
  background: #e50914;
  border: 2px solid #e50914;
}
.ListToggle[data-toggled=true] div {
  top: -32px;
}
.ListToggle div {
  position: absolute;
  top: 0;
  left: 0;
  height: 64px;
  width: 32px;
  transition: 0.125s ease;
}
.ListToggle div i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
}

JS

},
  render: function () {

if (this.state.data.results) {
      console.log(this.state.data);
    }

return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Header, { onSubmit: this.performSearch }), /*#__PURE__*/
      React.createElement(Hero, null), /*#__PURE__*/
      React.createElement(TitleList, { title: "Top TV picks for Jack", url: "discover/tv?sort_by=popularity.desc&page=1" }), /*#__PURE__*/
      React.createElement(TitleList, { title: "Trending now", url: "discover/movie?sort_by=popularity.desc&page=1" }), /*#__PURE__*/
      React.createElement(TitleList, { title: "Most watched in Horror", url: "genre/27/movies?sort_by=popularity.desc&page=1" }), /*#__PURE__*/
      React.createElement(TitleList, { title: "Sci-Fi greats", url: "genre/878/movies?sort_by=popularity.desc&page=1" }), /*#__PURE__*/
      React.createElement(TitleList, { title: "Comedy magic", url: "genre/35/movies?sort_by=popularity.desc&page=1" })));

} });
var Header = React.createClass({ displayName: "Header",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("header", { className: "Header" }, /*#__PURE__*/
      React.createElement(Logo, null), /*#__PURE__*/
      React.createElement(Navigation, null), /*#__PURE__*/
      React.createElement(Search, { onSubmit: this.props.onSubmit }), /*#__PURE__*/
      React.createElement(UserProfile, null)));
  } });
var Logo = React.createClass({ displayName: "Logo",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { id: "logo", className: "Logo" }, /*#__PURE__*/
      React.createElement("svg", { version: "1.1", width: "300", height: "81.386726", id: "svg3262" }, /*#__PURE__*/
      React.createElement("g", { transform: "translate(-384.28572,-428.81172)", id: "layer1" }, /*#__PURE__*/
      React.createElement("g", { transform: "matrix(2.5445375,0,0,2.5445375,1157.1714,-1457.8678)", id: "g3235" }, /*#__PURE__*/
      React.createElement("path", { d: "m -203.09972,771.41415 c 1.6425,0.15875 3.2825,0.33 4.92,0.5075 l 3.615,-8.92625 3.43625,9.74875 c 1.76375,0.22125 3.525,0.4525 5.2825,0.695 l -6.02375,-17.09625 6.02625,-14.88 -5.10375,0 -0.0525,0.0725 -3.255,8.03875 -2.8575,-8.11125 -5.03875,0 5.2025,14.7625 -6.15125,15.18875 z", id: "path3015", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }), /*#__PURE__*/
      React.createElement("path", { d: "m -206.91147,771.06478 0,-29.60125 -5.0375,0 0,29.18625 c 1.68125,0.12875 3.36125,0.26875 5.0375,0.415", id: "path3019", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }), /*#__PURE__*/
      React.createElement("path", { d: "m -244.7486,769.4089 c 1.36,0 2.7175,0.01 4.07375,0.0213 l 0,-10.875 6.05125,0 0,-4.63125 -6.05125,0 0,-7.825 6.96875,0 0,-4.63625 -12.02625,0 0,27.95 c 0.3275,0 0.655,-0.004 0.98375,-0.004", id: "path3023", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }), /*#__PURE__*/
      React.createElement("path", { d: "m -260.3881,769.69191 c 1.6775,-0.06 3.3575,-0.11 5.04,-0.15125 l 0,-23.44125 4.7075,0 0,-4.63625 -14.45625,0 0,4.63625 4.70875,0 0,23.5925 z", id: "path3035", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }), /*#__PURE__*/
      React.createElement("path", { d: "m -298.91059,772.81378 0,-17.63625 5.96375,16.92375 c 1.83375,-0.20625 3.67125,-0.4 5.5125,-0.5825 l 0,-30.055 -4.8325,0 0,18.2675 -6.43625,-18.2675 -0.2075,0 -4.8325,0 0,31.98375 0.03,0 c 1.5975,-0.22125 3.19875,-0.43125 4.8025,-0.63375", id: "path3039", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }), /*#__PURE__*/
      React.createElement("path", { d: "m -269.95297,746.09903 0,-4.63625 -12.0275,0 0,24.9125 0,4.6375 0,0.004 c 3.99125,-0.345 7.99625,-0.63375 12.0175,-0.86875 l 0,-0.004 0,-1.33625 0,-3.3 c -2.325,0.135 -4.645,0.29125 -6.96,0.46375 l 0,-7.415 6.05125,0 0,-4.63375 -6.05125,0 0,-7.82375 6.97,0 z", id: "path3051", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }), /*#__PURE__*/
      React.createElement("path", { d: "m -223.72272,765.2864 0,-23.82375 -5.05875,0 0,23.605 0,4.63625 0,0.005 c 4.02375,0.1475 8.0325,0.35375 12.0275,0.6125 l 0,-0.006 0,-1.4975 0,-3.13875 c -2.31875,-0.15 -4.64125,-0.28 -6.96875,-0.3925", id: "path3055", style: { fill: '#b81d24', fillOpacity: 1, fillRule: 'nonzero', stroke: 'none' } }))))));
  } });

// Navigation
var Navigation = React.createClass({ displayName: "Navigation",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { id: "navigation", className: "Navigation" }, /*#__PURE__*/
      React.createElement("nav", null, /*#__PURE__*/
      React.createElement("ul", null, /*#__PURE__*/
      React.createElement("li", null, "Browse"), /*#__PURE__*/
      React.createElement("li", null, "My list"), /*#__PURE__*/
      React.createElement("li", null, "Top picks"), /*#__PURE__*/
      React.createElement("li", null, "Recent")))));

} });
var Search = React.createClass({ displayName: "Search",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("form", { onSubmit: this.props.onSubmit, id: "search", className: "Search" }, /*#__PURE__*/
      React.createElement("input", { type: "search", placeholder: "Search for a title..." })));
  } });

var UserProfile = React.createClass({ displayName: "UserProfile",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "UserProfile" }, /*#__PURE__*/
      React.createElement("div", { className: "User" }, /*#__PURE__*/
      React.createElement("div", { className: "name" }, "Jack Oliver"), /*#__PURE__*/
      React.createElement("div", { className: "image" }, /*#__PURE__*/React.createElement("img", { src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/profile/profile-512_1.jpg" }))), /*#__PURE__*/

React.createElement("div", { className: "UserProfile-menu" }, /*#__PURE__*/
      React.createElement("div", { className: "UserProfileSwitch" }, /*#__PURE__*/
      React.createElement("ul", null, /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("div", { className: "UserProfile-image" }, /*#__PURE__*/
      React.createElement("img", { src: "http://lorempixel.com/96/96" })), /*#__PURE__*/

React.createElement("div", { className: "UserProfile-name" }, "Alexander")), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("div", { className: "UserProfile-image" }, /*#__PURE__*/
      React.createElement("img", { src: "http://lorempixel.com/96/96" })), /*#__PURE__*/

React.createElement("div", { className: "UserProfile-name" }, "Mattias")))), /*#__PURE__*/
      React.createElement("div", { className: "UserNavigation" }, /*#__PURE__*/
      React.createElement("ul", null, /*#__PURE__*/
      React.createElement("li", null, "Your Account"), /*#__PURE__*/
      React.createElement("li", null, "Help Center"), /*#__PURE__*/
      React.createElement("li", null, "Sign out of Netflix"))))));
  } });
var Hero = React.createClass({ displayName: "Hero",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { id: "hero", className: "Hero", style: { backgroundImage: 'url(https://images.alphacoders.com/633/633643.jpg)' } }, /*#__PURE__*/
      React.createElement("div", { className: "content" }, /*#__PURE__*/
      React.createElement("img", { className: "logo", src: "http://www.returndates.com/backgrounds/narcos.logo.png", alt: "" }), /*#__PURE__*/
      React.createElement("h2", null, "Season 2 now available"), /*#__PURE__*/
      React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque id quam sapiente unde voluptatum alias vero debitis, magnam quis quod."), /*#__PURE__*/
      React.createElement("div", { className: "button-wrapper" }, /*#__PURE__*/
      React.createElement(HeroButton, { primary: true, text: "Watch now" }), /*#__PURE__*/
      React.createElement(HeroButton, { primary: false, text: "+ My list" }))), /*#__PURE__*/

React.createElement("div", { className: "overlay" })));

} });

var HeroButton = React.createClass({ displayName: "HeroButton",
  render: function () {
    return (
      React.createElement("a", { href: "#", className: "Button", "data-primary": this.props.primary }, this.props.text));

} });
var TitleList = React.createClass({ displayName: "TitleList",
  apiKey: '87dfa1c669eea853da609d4968d294be',
  getInitialState: function () {
    return { data: [], mounted: false };
  },
  loadContent: function () {
    var requestUrl = 'https://api.themoviedb.org/3/' + this.props.url + '&api_key=' + this.apiKey;

$.ajax({
      url: requestUrl,
      dataType: 'json',
      cache: false,
      success: function (data) {
        this.setState({ data: data });
        // console.log(data);
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this) });

},
  componentDidMount: function () {
    this.loadContent();
    this.setState({ mounted: true });
  },
  componentWillUnmount: function () {
    this.setState({ mounted: false });
  },
  render: function () {
    if (this.state.data.results) {
      var titles = this.state.data.results.map(function (title, i) {
        if (i < 5) {

var backDrop = 'http://image.tmdb.org/t/p/original' + title.backdrop_path;
          if (!title.name) {
            var name = title.original_title;
          } else {
            var name = title.name;
          }

return /*#__PURE__*/(
            React.createElement(Item, { key: title.id, title: name, score: title.vote_average, overview: title.overview, backdrop: backDrop }));

}
      });

} else {
      var titles = '';
    }
    return /*#__PURE__*/(
      React.createElement("div", { ref: "titlecategory", className: "TitleList", "data-loaded": this.state.mounted }, /*#__PURE__*/
      React.createElement("div", { className: "Title" }, /*#__PURE__*/
      React.createElement("h1", null, this.props.title), /*#__PURE__*/
      React.createElement("div", { className: "titles-wrapper" },
      titles))));
  } });
var Item = React.createClass({ displayName: "Item",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "Item", style: { backgroundImage: 'url(' + this.props.backdrop + ')' } }, /*#__PURE__*/
      React.createElement("div", { className: "overlay" }, /*#__PURE__*/
      React.createElement("div", { className: "title" }, this.props.title), /*#__PURE__*/
      React.createElement("div", { className: "rating" }, this.props.score, " / 10"), /*#__PURE__*/
      React.createElement("div", { className: "plot" }, this.props.overview), /*#__PURE__*/
      React.createElement(ListToggle, null))));

} });

// ListToggle
var ListToggle = React.createClass({ displayName: "ListToggle",
  getInitialState: function () {
    return { toggled: false };
  },
  handleClick: function () {
    if (this.state.toggled === true) {
      this.setState({ toggled: false });
    } else {
      this.setState({ toggled: true });
    }

},
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { onClick: this.handleClick, "data-toggled": this.state.toggled, className: "ListToggle" }, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("i", { className: "fa fa-fw fa-plus" }), /*#__PURE__*/
      React.createElement("i", { className: "fa fa-fw fa-check" }))));
  } });
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));

Caneta de pena

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS