Weekly UI - Become a member

Developer
Fred Hawk
Size
9,835 Kb
Views
12,144
  1. Weekly UI - Become a member Previews
  2. Weekly UI - Become a member HTML Codes
  3. Weekly UI - Become a member CSS Codes
  4. Weekly UI - Become a member JS Codes

How do I make an weekly ui - become a member?

What is a weekly ui - become a member? How do you make a weekly ui - become a member? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Weekly UI - Become a member Previews
IQ Test

Weekly UI - Become a member - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weekly UI - Become a member</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Ubuntu:700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink") defs symbol(id="facebook") path(d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803 c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654	c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246	c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z")
svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink") defs symbol(id="twitter") path(d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z")
svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink") defs symbol(id="google") path(d="M273.372,302.498c-5.041-6.762-10.608-13.045-16.7-18.842c-6.091-5.804-12.183-11.088-18.271-15.845 c-6.092-4.757-11.659-9.329-16.702-13.709c-5.042-4.374-9.135-8.945-12.275-13.702c-3.14-4.757-4.711-9.61-4.711-14.558 c0-6.855,2.19-13.278,6.567-19.274c4.377-5.996,9.707-11.799,15.986-17.417c6.28-5.617,12.559-11.753,18.844-18.415 c6.276-6.665,11.604-15.465,15.985-26.412c4.373-10.944,6.563-23.458,6.563-37.542c0-16.75-3.713-32.835-11.136-48.25 c-7.423-15.418-17.89-27.412-31.405-35.976h38.54L303.2,0H178.441c-17.699,0-35.498,1.906-53.384,5.72 c-26.453,5.9-48.723,19.368-66.806,40.397C40.171,67.15,31.129,90.99,31.129,117.637c0,28.171,10.138,51.583,30.406,70.233 c20.269,18.649,44.585,27.978,72.945,27.978c5.71,0,12.371-0.478,19.985-1.427c-0.381,1.521-1.043,3.567-1.997,6.136 s-1.715,4.62-2.286,6.14c-0.57,1.521-1.047,3.375-1.425,5.566c-0.382,2.19-0.571,4.428-0.571,6.71 c0,12.563,6.086,26.744,18.271,42.541c-14.465,0.387-28.737,1.67-42.825,3.86c-14.084,2.19-28.833,5.616-44.252,10.28 c-15.417,4.661-29.217,11.42-41.396,20.27c-12.182,8.854-21.317,19.366-27.408,31.549C3.533,361.559,0.01,374.405,0.01,386.017 c0,12.751,2.857,24.314,8.565,34.69c5.708,10.369,13.035,18.842,21.982,25.406c8.945,6.57,19.273,12.083,30.978,16.562 c11.704,4.47,23.315,7.659,34.829,9.562c11.516,1.903,22.888,2.854,34.119,2.854c51.007,0,90.981-12.464,119.909-37.397 c26.648-23.223,39.971-50.062,39.971-80.517c0-10.855-1.57-20.984-4.712-30.409C282.51,317.337,278.42,309.254,273.372,302.498z M163.311,198.722c-9.707,0-18.937-2.475-27.694-7.426c-8.757-4.95-16.18-11.374-22.27-19.273 c-6.088-7.898-11.418-16.796-15.987-26.695c-4.567-9.896-7.944-19.792-10.135-29.692c-2.19-9.895-3.284-19.318-3.284-28.265 c0-18.271,4.854-33.974,14.562-47.108c9.705-13.134,23.411-19.701,41.112-19.701c12.563,0,23.935,3.899,34.118,11.704 c10.183,7.804,18.177,17.701,23.984,29.692c5.802,11.991,10.277,24.407,13.417,37.257c3.14,12.847,4.711,24.983,4.711,36.403 c0,19.036-4.139,34.317-12.419,45.833C195.144,192.964,181.775,198.722,163.311,198.722z M242.251,413.123 c-5.23,8.949-12.319,15.94-21.267,20.981c-8.946,5.048-18.509,8.758-28.693,11.14c-10.183,2.385-20.889,3.572-32.12,3.572 c-12.182,0-24.27-1.431-36.258-4.284c-11.99-2.851-23.459-7.187-34.403-12.991c-10.944-5.8-19.795-13.798-26.551-23.982 c-6.757-10.184-10.135-21.744-10.135-34.69c0-11.419,2.568-21.601,7.708-30.55c5.142-8.945,11.709-16.084,19.702-21.408 c7.994-5.332,17.319-9.713,27.979-13.131c10.66-3.433,20.937-5.808,30.833-7.139c9.895-1.335,19.985-1.995,30.262-1.995 c6.283,0,11.043,0.191,14.277,0.567c1.143,0.767,4.043,2.759,8.708,5.996s7.804,5.428,9.423,6.57 c1.615,1.137,4.567,3.326,8.85,6.563c4.281,3.237,7.327,5.661,9.135,7.279c1.803,1.618,4.421,4.045,7.849,7.279 c3.424,3.237,5.948,6.043,7.566,8.422c1.615,2.378,3.616,5.28,5.996,8.702c2.38,3.433,4.043,6.715,4.998,9.855 c0.948,3.142,1.854,6.567,2.707,10.277c0.855,3.72,1.283,7.569,1.283,11.57C250.105,393.713,247.487,404.182,242.251,413.123z") polygon(points="401.998,73.089 401.998,0 365.449,0 365.449,73.089 292.358,73.089 292.358,109.636 365.449,109.636 365.449,182.725 401.998,182.725 401.998,109.636 475.081,109.636 475.081,73.089 ") svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink") defs symbol(id="arrow") path(d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z")
.wrapper .container section.image img(src="https://unsplash.it/1200/1500/?random") section.content-container section.content p.lead Lorem ipsum doler h1.title Become a member p.content-text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ipsam, dolorum tempora ipsa, numquam officia debitis facilis consectetur! section.signup-container .signup .svgs svg(viewBox="0 0 475.092 475.092").google.svg use(xlink:href="#google") p.signup-text Sign up using Google + .signup .svgs svg(viewBox="0 0 96.124 96.123").facebook.svg use(xlink:href="#facebook") p.signup-text Sign up using Facebook .signup.twitter .svgs svg(viewBox="0 0 612 612").twitter.svg use(xlink:href="#twitter") p.signup-text Sign up using Twitter footer p.info You can also sign in using an email address a(href="#").link p.email Use your email svg(viewBox="0 0 31.49 31.49").arrow.svg use(xlink:href="#arrow") <script src="js/index.js"></script>
</body>
</html>

Weekly UI - Become a member - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #4D515E;
}
body svg { width: 0px; height: 0px;
}
.wrapper { display: flex; justify-content: center; align-items: center;
}
@media (min-width: 48rem) { .wrapper { height: 100vh; }
}
.container { width: 70%; height: 80%; background: white; border-radius: 10px; display: flex; flex-flow: column;
}
@media (min-width: 48rem) { .container { flex-flow: row; }
}
.image { flex: 1 0 10%; overflow: hidden; max-height: 15rem;
}
@media (min-width: 48rem) { .image { max-height: none; width: 35%; min-width: 35%; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
}
.content-container { flex: 2 0 auto; display: flex; flex-flow: column;
}
@media (min-width: 48rem) { .content-container { order: -1; max-width: 65%; }
}
.content { margin: 2rem 3rem 0 3rem;
}
@media (min-width: 48rem) { .content { margin: 4rem 5rem 1rem 4rem; }
}
.lead { text-transform: uppercase; color: #9CA4B1; font-family: 'Ubuntu', sans-serif; font-size: 0.8em; font-weight: bold;
}
.title { color: #4D4E52; font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: 300; letter-spacing: 3px; margin-bottom: 0;
}
@media (min-width: 48rem) { .title { line-height: 3rem; margin-bottom: 2rem; font-size: 3.5rem; }
}
.content-text { color: #B5BBC7; font-family: 'Roboto', sans-serif; font-size: 0.9em;
}
.signup-container { font-family: 'Roboto', sans-serif; color: #545B67; text-transform: uppercase; font-size: 0.7rem; font-weight: bold;
}
.signup { display: flex; align-items: center; border: 1px solid #9CA4B1; border-radius: 5px; padding: 1.25rem 0; margin: 1rem 0;
}
.signup:hover { box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.5); border: 1px solid white;
}
@media (min-width: 48rem) { .signup { padding: 0rem 0; }
}
@media (min-width: 62.25rem) { .signup { padding: 1rem 0; }
}
.svgs { margin: 0 1rem 0 1rem;
}
@media (min-width: 34rem) { .svgs { margin: 0 2rem 0 2rem; }
}
@media (min-width: 48rem) { .svgs { padding: 1rem 0; }
}
.svgs .google { fill: #D75949;
}
.svgs .facebook { fill: #3B5998;
}
.svgs .twitter { fill: #4099FF;
}
.svg { height: 1.2rem; width: 1.2rem;
}
footer { border-top: 1px solid #B5BBC7; padding: 0 1rem;
}
@media (min-width: 34rem) { footer { display: flex; align-items: center; justify-content: space-between; }
}
@media (min-width: 48rem) { footer { display: flex; align-items: center; justify-content: space-between; margin-top: -1.2rem; }
}
@media (min-width: 90.625rem) { footer { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0 1rem 0; }
}
footer p { font-family: 'Open Sans', sans-serif; font-size: 1rem; color: #545B67;
}
footer a { text-decoration: none;
}
footer a .email { color: #9DC950; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-size: 0.625rem;
}
footer .link { display: flex; align-items: center;
}
footer .arrow { fill: #9DC950; margin-left: 1rem;
}

Weekly UI - Become a member - Script Codes JS Codes

//https://dribbble.com/shots/2314157-Daily-UI-Day-1/attachments/439137
//Design by
//https://dribbble.com/gilhuybrecht
"use strict";
Weekly UI - Become a member - Script Codes
Weekly UI - Become a member - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 9,835 Kb
Views 12,144
Do you need developer help for Weekly UI - Become a member?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fred Hawk (osycon) Script Codes
Name
Weekly UI - Invisionapp Sign up
CSS Flexbox 3 col example
Weekly UI - ToDo mobile design
Weekly UI - Dropbox Hero Component
Weekly UI - Airbnb Footer Component
Calcul
Weekly UI - Statue of liberty
Quotastic
Camper News
Weekly UI - Make Reservations
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!