Weekly UI - Make Reservations

Developer
Fred Hawk
Size
5,041 Kb
Views
16,192
  1. Weekly UI - Make Reservations Previews
  2. Weekly UI - Make Reservations HTML Codes
  3. Weekly UI - Make Reservations CSS Codes
  4. Weekly UI - Make Reservations JS Codes

How do I make an weekly ui - make reservations?

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

Weekly UI - Make Reservations Previews
IQ Test

Weekly UI - Make Reservations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weekly UI - Make Reservations</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=News+Cycle:700|Oswald:700|Oxygen:300|Work+Sans" 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" style="display: none"> <defs> <symbol id="search"> <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21 c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279 C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19 S32.459,40,21.983,40z"></path> </symbol> </defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none"> <defs> <symbol id="back"> <polygon points="315.869,21.178 294.621,0 91.566,203.718 294.621,407.436 315.869,386.258 133.924,203.718 "></polygon> </symbol> </defs>
</svg>
<div class="wrapper"> <div class="container"> <header class="header"> <nav class="nav"> <svg class="back btn" viewBox="0 0 407.436 407.436"> <use xlink:href="#back"></use> </svg> <svg class="search btn" viewBox="0 0 52.966 52.966"> <use xlink:href="#search"></use> </svg> </nav> <section class="title"><img class="title-img" src="https://unsplash.it/200/200/?random"/> <h1 class="title-text">The water club</h1> </section> </header> <div class="tables"> <header class="table"> <h1 class="table-title">Table For</h1> </header> <div class="counter"> <button class="decrement">-</button> <h2 class="customers">2</h2> <button class="increment">+</button> </div> </div> <div class="date"> <h2 class="date-title">Choose Date & Time</h2> <p class="date-pick">05 <span class="month">may</span> 2017 - 19:30</p> </div> <div class="confirm"> <button>Confirm</button> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Weekly UI - Make Reservations - Script Codes CSS Codes

body svg { height: 0px; width: 0px;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #F4F4F4; height: 100vh; color: #5E606A;
}
.container { width: 30rem; height: 48rem; box-shadow: 0px 2px 10px 0px rgba(156, 156, 156, 0.3); background: white;
}
.header { padding: 3rem 3rem 0 3rem;
}
.nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.nav .back { font-size: 2em;
}
.nav .btn { width: 2rem; height: 2rem; cursor: pointer; fill: #474850;
}
.title { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -0.5rem;
}
.title .title-img { border-radius: 50%; border: solid 7px #474850; width: 8rem; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
}
.title .title-text { margin-top: 2.5rem; color: #5E606A; text-transform: uppercase; font-family: 'Work Sans', sans-serif; font-size: 1.7rem;
}
.tables { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.tables .table-title { font-size: 1.5rem; font-family: 'Oxygen', sans-serif; font-weight: 400;
}
.tables .counter { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.tables .counter button { background: none; border: none; font-size: 2.2rem;
}
.tables .counter .decrement { color: #AAABAF;
}
.tables .counter .increment { color: #5E606A;
}
.tables .counter .customers { font-size: 6rem; padding: 0 4rem; margin: -2rem 0 0 0; font-family: 'News Cycle', sans-serif;
}
.date { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.date .date-title { margin: 1.4rem; font-family: 'Oxygen', sans-serif; font-weight: 400;
}
.date .date-pick { font-size: 1.5rem; font-weight: bold; margin: 0; font-family: 'Oswald', sans-serif; word-spacing: 5px;
}
.date .month { text-transform: uppercase;
}
.confirm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 3rem;
}
.confirm button { background: #474850; border: none; padding: 1.6rem 7rem; color: white; text-transform: uppercase; font-size: 1.2rem; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5); font-family: 'Work Sans', sans-serif; border-radius: 1px;
}

Weekly UI - Make Reservations - Script Codes JS Codes

//https://dribbble.com/shots/2639709-Confirm-Reservation/attachments/528798
//Design By
//https://dribbble.com/goutham-aj
"use strict";
Weekly UI - Make Reservations - Script Codes
Weekly UI - Make Reservations - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 5,041 Kb
Views 16,192
Do you need developer help for Weekly UI - Make Reservations?

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 - Become a member
Lilli
CSS Flexbox 3 col example
Weekly UI - Airbnb Footer Component
Pomodoro Clock
Calcul
Weather App
Portfolio example FCC
Weekly UI - Stripe - Pricing section
Collapsing Text Animation
Create amazing love letters 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!