inspiration Archives - csshint - A designer hub

Task Manager UI with CSS Grid

admin — Tue, 25 Aug 2020 06:30:42 +0000

Check Out thsi Cool Task Manager UI with CSS Grid Designed and developed by Aysenur Turk.

Task Manager UI with CSS Grid

HTML

[code language=”html”]

[/code]

CSS / SCSS

[code language=”css”]
@import url(‘https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap’);

:root {
–body-bg-color: #e4e6f5;
–border-color: #e5e4e9;
–theme-bg-color: #fff;
–body-color: #1b1f31;
–main-color: #7a7e9d;
–main-light-color: #a1a4b9;
–title-color: #979dc3;
–body-font: "Jost", sans-serif;
–button-bg-color: #eaeefc;
–button-color: #4d76fd;
–unselected-mail: #f1f2f7;
–calendar-border-color: #cbcfe0;
–main-container-bg: #f0f0f7;
}

* {
outline: none;
box-sizing: border-box;
}

html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}

body {
font-family: var(–body-font);
background-color: var(–body-bg-color);
color: var(–body-color);
font-size: 15px;
}

img {
max-width: 100%;
}

.container {
background-color: var(–theme-bg-color);
display: flex;
max-width: 1600px;
height: 100vh;
overflow: hidden;
margin: 0 auto;
}

.user-profile-area {
width: 360px;
border-right: 1px solid var(–border-color);
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow: auto;
}

.task-manager {
font-size: 15px;
color: var(–title-color);
font-weight: 700;
text-align: center;
height: 70px;
letter-spacing: 0.7px;
line-height: 70px;
position: sticky;
top: 0;
z-index: 3;
text-transform: uppercase;
background-color: var(–theme-bg-color);
border-bottom: 1px solid var(–border-color);
}

.user-photo {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
}

.user-name {
font-weight: 600;
margin: 15px 0 8px;
}

.user-mail {
color: var(–main-light-color);
font-size: 12px;
font-weight: 600;
}

.user-profile {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}

.side-wrapper {
padding: 25px 40px;
border-bottom: 1px solid var(–border-color);
&:last-child {
border-bottom: none;
}
}

.user-notification {
display: flex;
justify-content: center;
align-items: center;
margin-top: 25px;
svg {
width: 36px;
padding: 10px;
flex-shrink: 0;
border-radius: 50%;
overflow: visible;
background-color: var(–button-bg-color);
color: var(–button-color);
}
}

.notify {
position: relative;
&:not(:last-child) {
margin-right: 25px;
}
&.alert {
position: relative;
&:before {
content: "2";
font-size: 9px;
font-weight: 700;
position: absolute;
background-color: #ff537b;
width: 14px;
height: 14px;
border-radius: 50%;
top: -3px;
display: flex;
justify-content: center;
align-items: center;
right: 0px;
color: #fff;
}
&:last-child:before {
content: "5";
}
}
}

.progress {
margin-top: 5px;
border-radius: 4px;
background-color: #e7e7ef;
height: 8px;
overflow: hidden;
&-bar {
background-color: var(–button-color);
border-radius: 4px;
width: 35%;
height: 100%;
animation: progressAnimation 6s;
transition: 0.3s linear both;
transition-property: width, background-color;
}
&-status {
margin-top: 30px;
text-align: right;
color: var(–main-color);
font-size: 10px;
font-weight: 600;
}
}

@keyframes progressAnimation {
0% {
width: 5%;
background-color: #a2b6f5;
}
100% {
width: 35%;
}
}

.task {
&-status {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
&-stat {
text-align: center;
}
&-number {
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
}
&-condition {
font-size: 12px;
color: var(–main-color);
font-weight: 700;
}
&-tasks {
margin-top: 4px;
font-size: 10px;
font-weight: 600;
color: var(–main-light-color);
}
}

.project {
&-title {
text-transform: uppercase;
font-weight: 700;
margin-bottom: 18px;
}
&-department {
position: relative;
vertical-align: middle;
padding: 0 30px;
color: var(–main-color);
font-size: 13px;
font-weight: 600;
margin-top: 14px;
&:before {
position: absolute;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
top: 10;
left: 0;
}
&:nth-child(1):before {
border: 3px solid #b36dfb;
}
&:nth-child(2):before {
border: 3px solid #625be8;
}
&:nth-child(3):before {
border: 3px solid #fec267;
}
&:nth-child(4):before {
border: 3px solid #fc6679;
}
}
}

.members {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 50%;
}

.team-member {
display: flex;
justify-content: space-between;
}

.main-area {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}

.header {
height: 70px;
width: 100%;
border-bottom: 1px solid var(–border-color);
}

.search-bar {
height: 70px;
position: relative;

input {
height: 100%;
width: 100%;
display: block;
background-color: transparent;
border: none;
color: var(–body-color);
padding: 0 35px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=’http://www.w3.org/2000/svg’ width=’24’ height=’24’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%23a1a4b9′ stroke-width=’3′ stroke-linecap=’round’ stroke-linejoin=’round’ class=’feather feather-search’%3e%3ccircle cx=’11’ cy=’11’ r=’8’/%3e%3cpath d=’M21 21l-4.35-4.35’/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 18px;
background-position: 0 50%;
font-family: var(–body-font);
font-weight: 600;
font-size: 14px;
&::placeholder {
color: var(–main-light-color);
}
}
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px 0 30px;
}

.inbox-calendar {
margin-right: 200px;
}

.color-menu {
flex-shrink: 0;
}

.msg {
padding: 30px;
background-color: var(–unselected-mail);
border-bottom: 1px solid var(–border-color);
display: flex;
align-items: center;
transition: 0.4s ease;
&-title {
font-weight: 600;
font-size: 14px;
}
&-date {
font-size: 11px;
color: var(–main-light-color);
font-weight: 600;
margin-top: 5px;
}
}

.selected-bg {
background-color: var(–theme-bg-color);
}

.msg-department {
display: flex;
justify-content: space-between;
text-transform: uppercase;
position: sticky;
top: 0;
left: 0;
z-index: 3;
font-weight: 700;
letter-spacing: 0.8px;
background-color: var(–theme-bg-color);
border-left: 4px solid #b36dfb;
svg {
width: 12px;
}
}

.inbox {
overflow: auto;

&-container {
border-right: 1px solid var(–border-color);
width: 420px;
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}
}
.main-container {
display: flex;
flex-grow: 1;
overflow: hidden;
background-color: var(–main-container-bg);
}

.mail-members {
width: 40px;
height: 40px;
margin-left: auto;
}

.mail-choice {
display: none;
}

.mail-choice + label:before {
content: "";
display: flex;
width: 35px;
height: 35px;
border: 2px solid var(–main-light-color);
margin-right: 15px;
border-radius: 50%;
transition: 0.3s;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’28’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%23a1a4b9′ stroke-width=’4′ stroke-linecap=’round’ stroke-linejoin=’round’ class=’feather feather-check’%3e%3cpath d=’M20 6L9 17l-5-5’/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}

.mail-choice:checked + label:before {
border-color: green;
background-color: var(–button-color);
border-color: var(–button-color);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’28’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%23fff’ stroke-width=’4′ stroke-linecap=’round’ stroke-linejoin=’round’ class=’feather feather-check’%3e%3cpath d=’M20 6L9 17l-5-5’/%3e%3c/svg%3e");
}

.mail-choice:checked .msg {
background-color: red;
}

.add {
&-task {
position: sticky;
flex-shrink: 0;
bottom: 0;
left: 0;
height: 80px;
margin-top: auto;
border-top: 1px solid var(–border-color);
display: flex;
align-items: center;
background-color: var(–theme-bg-color);
animation: slideUp .45s .4s both;
}
&-button {
position: sticky;
bottom: 10px;
background-color: var(–button-color);
border: 0;
margin: auto;
padding: 10px 30px;
color: #fff;
font-size: 12px;
font-weight: 600;
border-radius: 20px;
flex-shrink: 0;
z-index: 1;
cursor: pointer;
}
}

.mail-detail {
display: flex;
animation: slideX .6s both;
flex-direction: column;
overflow: auto;
background-color: var(–theme-bg-color);
&-profile {
display: flex;
align-items: center;
}
&-header {
border-bottom: 1px solid var(–border-color);
padding: 16px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
&-name {
font-size: 14px;
font-weight: 600;
margin-left: 10px;
white-space: nowrap;
}
}

@keyframes slideX {
0% {
opacity: 0;
transform: translateX(200px);
}
}

.inbox-detail {
width: 44px;
height: 44px;
}

.mail-icons {
flex-shrink: 0;
svg {
width: 42px;
height: 42px;
padding: 13px;
flex-shrink: 0;
margin-left: 10px;
border-radius: 50%;
overflow: visible;
background-color: var(–button-bg-color);
color: var(–button-color);
&:first-child {
margin-left: 0;
}
}
}

.mail-contents {
padding: 30px;
&-subject {
display: flex;
align-items: center;
}
&-title {
font-weight: 700;
font-size: 17px;
margin-left: 5px;
}
}

.mail {
padding-left: 55px;
font-size: 14px;
color: var(–main-light-color);
&-time {
font-weight: 600;
display: flex;
align-items: center;
font-size: 13px;
svg {
width: 12px;
margin-right: 8px;
}
}
&-inside {
padding: 20px 0 30px;
border-bottom: 1px solid var(–border-color);
color: var(–main-color);
line-height: 1.8em;
}
&-checklist {
padding: 20px 0;
display: flex;
align-items: center;
border-bottom: 1px solid var(–border-color);
& .mail-choice + label:before {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-right: 12px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=’http://www.w3.org/2000/svg’ width=’14’ height=’18’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%23fff’ stroke-width=’4′ stroke-linecap=’round’ stroke-linejoin=’round’ class=’feather feather-check’%3e%3cpath d=’M20 6L9 17l-5-5’/%3e%3c/svg%3e");
}
label {
display: flex;
align-items: center;
color: var(–button-color);
font-weight: 600;
font-size: 13px;
}
&-date {
margin-left: 16px;
font-size: 13px;
}
}
}

.assignee {
font-size: 13px;
margin-bottom: 10px;
:last-child {
margin-bottom: 0;
}
}

.mail-assign {
padding: 20px 0;
border-bottom: 1px solid var(–border-color);
}

.mail-doc {
display: flex;
align-items: center;
padding: 30px 0;
flex-shrink: 0;
justify-content: space-between;
&-name {
color: var(–body-color);
font-weight: 600;
font-size: 15px;
margin-bottom: 3px;
}
&-date {
font-size: 13px;
}
&-wrapper {
display: flex;
align-items: center;
svg {
margin-right: 15px;
background-color: var(–button-bg-color);
color: var(–button-color);
width: 50px;
padding: 9px;
border-radius: 4px;
}
}
&-icons {
svg:not(:last-child) {
margin-right: 8px;
}
}
}

.mail-textarea {
display: flex;
background-color: var(–unselected-mail);
padding: 30px 0;
border-top: 1px solid var(–border-color);
position: sticky;
bottom: 0;
justify-content: space-between;
margin-top: auto;
left: 0;
overflow: hidden;
height: 80px;
flex-shrink: 0;
input {
border: none;
background-color: transparent;
font-size: 15px;
width: 100%;
padding: 0 30px;
color: var(–main-color);
&::placeholder {
color: var(–main-light-color);
}
}
}

.textarea-icons {
display: flex;
align-items: center;
}

.attach {
padding: 30px;
border-right: 1px solid var(–border-color);
border-left: 1px solid var(–border-color);
svg {
color: var(–main-color);
}
}

.send {
padding: 30px;
background-color: var(–button-color);
svg {
color: var(–theme-bg-color);
}
}

.inbox-calendar-checkbox {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 3;
cursor: pointer;
}

.toggle-page {
overflow: hidden;
z-index: 2;
}

.inbox-calendar {
position: relative;
width: 220px;
border-radius: 20px;
height: 36px;
display: flex;
align-items: center;
overflow: hidden;
flex-shrink: 0;
}

.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
background-color: var(–unselected-mail);
transition: 0.3s ease all;
z-index: 1;
}

.toggle-page:before,
.toggle-page:after,
.toggle-page span {
position: absolute;
top: 4px;
width: 100px;
height: 10px;
font-size: 12px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
border-radius: 20px;
transition: 0.3s ease all;
}

.toggle-page:before {
content: "";
left: 4px;
background-color: var(–button-color);
}

.toggle-page span {
color: var(–theme-bg-color);
z-index: 1;
left: 6px;
}

.toggle-page:after {
content: "Calendar";
right: 4px;
color: var(–main-light-color);
}

.inbox-calendar-checkbox:checked + .toggle-page span {
color: var(–main-light-color);
}

.inbox-calendar-checkbox:checked + .toggle-page:before {
left: 109px;
}

.inbox-calendar-checkbox:checked + .toggle-page:after {
color: var(–theme-bg-color);
}

//Calender

.calendar {
display: grid;
width: 100%;
grid-template-columns: repeat(7, minmax(195px, 1fr));
grid-template-rows: 57px;
grid-auto-rows: 120px;
overflow: auto;

&-wrapper {
width: 100%;
margin: auto;
margin-top: 0;
overflow: auto;
border-radius: 10px;
background: #fff;
max-width: 975px;
border: 1px solid var(–calendar-border-color);
}
}

.days {
font-size: 12px;
font-weight: 700;
color: var(–main-color);
text-align: center;
line-height: 60px;
&:not(:nth-of-type(7n + 7)) {
border-right: 1px solid var(–calendar-border-color);
}
}

.day {
padding: 15px;
overflow: hidden;
font-weight: 700;
font-size: 13px;
border-right: 1px solid var(–calendar-border-color);
border-top: 1px solid var(–calendar-border-color);
&:nth-of-type(7n + 7) {
border-right: 0;
}
&.not-work {
color: var(–main-color);
}
&.project-market {
background-color: #f5eafd;
border-left: 3px solid #b86df7;
transition: 0.2s ease;
cursor: pointer;
display: flex;
flex-direction: column;
&:hover {
transform: scale(1.3);
border: 0;
border-radius: 4px;
background-image: linear-gradient(
to top,
#6625dc,
#7739e3,
#874cea,
#965df1,
#a46ef8
);
color: #fff;
font-size: 15px;
.project-detail {
color: #fff;
font-size: 9px;
&:before {
top: 2px;
}
}
.hover-title {
display: block;
font-size: 8px;
padding-left: 18px;
margin-top: 5px 0 3px;
}
.popup-check {
display: block;
width: 12px;
margin-left: auto;
margin-top: 6px;
}
}
}
&.project-design {
background-color: #eeeffd;
border-left: 3px solid #736eeb;
}
&.project-develop {
background-color: #fef6e8;
border-left: 3px solid #ffc263;
}
&.project-finance {
background-color: #fee9ec;
border-left: 3px solid #ff647a;
transition: 0.2s ease;
cursor: pointer;
&:hover {
background-image: linear-gradient(
to top,
#f7224b,
#fa3d5d,
#fd526e,
#fe637e,
#ff748e
);
transform: scale(1.3);
border: 0;
border-radius: 4px;
color: #fff;
font-size: 15px;
.popup-check {
display: block;
width: 12px;
margin-left: auto;
margin-top: 10px;
}
.project-detail {
color: #fff;
font-size: 9px;
&:before {
top: 2px;
background-color: #ce283e;
}
}
.hover-title {
display: block;
font-size: 8px;
padding-left: 18px;
margin-top: 5px;
}
}
}
}

.hover-title {
display: none;
color: #fff;
}

.popup-check {
display: none;
}

.hide {
display: none;
}

.project-detail {
color: #783cae;
font-size: 10px;
position: relative;
margin-top: 5px;
padding-left: 20px;
line-height: 1.4em;
& + & {
margin-top: 5px;
}
&:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #b86df7;
top: 4px;
left: 10px;
}
&.design {
color: #4844c1;
&:before {
background-color: #6f69ea;
}
}
&.develop {
color: #de9d3a;
&:before {
background-color: #ffc263;
}
}
&.finance {
color: #e85b6f;
&:before {
background-color: #fd667a;
}
}
}

.week-month {
display: flex;
height: 30px;
}

.button {
border: 1px solid var(–button-color);
border-radius: 25px 0 0 25px;
color: var(–button-color);
padding: 8px 16px;
font-weight: 600;
font-family: var(–body-font);
font-size: 12px;
flex-shrink: 0;
cursor: pointer;
background-color: transparent;
&.active {
background-color: var(–button-color);
color: var(–theme-bg-color);
}
}

.button-month {
border-radius: 0 25px 25px 0;
margin-left: -2px;
}

.calender-tab {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 975px;
margin: auto;
width: 100%;
padding-bottom: 30px;
}

.current {
&-month {
position: relative;
padding: 0 10px;
font-weight: 600;
}
&-year {
font-size: 12px;
color: var(–main-color);
font-weight: 600;
margin-top: 5px;
}
}

.month-change {
display: flex;
flex-direction: column;
align-items: center;
}

.button-weekends,
.button-task {
border-radius: 25px;
}

.button-task {
margin-left: 15px;
}

.button-weekends {
border-color: var(–main-light-color);
color: var(–main-light-color);
}

.calendar-container {
flex-direction: column;
width: 100%;
padding: 30px 50px;
overflow: auto;
display: none;
&.calendar-show {
display: flex;
}
}

.color-menu {
flex-shrink: 0;
border-radius: 50%;
position: relative;
overflow: hidden;
width: 32px;
height: 32px;
svg {
position: absolute;
z-index: 8;
width: 17px;
top: 7px;
right: 8px;
fill: #fff;
pointer-events: none;
}
}

.colorpicker {
border: none;
border-radius: 50%;
width: 50px;
height: 55px;
top: -8px;
right: -8px;
position: absolute;
cursor: pointer;
}

@media screen and (max-width: 1270px) {
.mail-icons {
svg:not(:first-child) {
display: none;
}
}
}

@media screen and (max-width: 1160px) {
.inbox-container {
width: 370px;
}
.user-profile-area {
width: 320px;
}
}

@media screen and (max-width: 1070px) {
.inbox-container {
display: none;
}
.mail-detail-header .mail-icons {
svg {
display: inline-block;
}
}
}

@media screen and (max-width: 960px) {
.inbox-calendar {
margin-right: 100px;
}
}

@media screen and (max-width: 870px) {
.user-profile-area {
display: none;
}
}

@media screen and (max-width: 530px) {
.search-bar {
display: none;
}
.mail-textarea {
padding: 0;
height: 60px;
}
.button-weekends {
display: none;
}
}

@media screen and (max-width: 485px) {
.mail-icons {
svg:not(:first-child) {
display: none;
}
}
.inbox-calendar {
margin-right: 0;
}
.calendar-container {
padding: 30px 20px;
}
}

@media screen and (max-width: 370px) {
.mail-doc-icons,
.mail-checklist-date {
display: none;
}
}

.anim-y {
animation: slideUp .6s both;
}

@for $i from 2 through 10 {
.anim-y:nth-child(#{$i}) {
animation-delay: #{$i*0.14}s;
}
}

@keyframes slideUp {
0% {
transform: translateY(76px) scale(.92);
opacity: 0;
}
}

[/code]

[code language=”js”]
$(‘.mail-choice’).change(function() {
if($(this).is(":checked")) {
$(this).parent().addClass(‘selected-bg’);
} else {
$(this).parent().removeClass(‘selected-bg’);
}
});

const colorInput = document.getElementById("colorpicker");

colorInput.addEventListener("input", (e) => {
document.body.style.setProperty("–button-color", e.target.value);
});

$(‘.inbox-calendar’).click(function(){
$(‘.calendar-container’).toggleClass(‘calendar-show’);
$(‘.inbox-container’).toggleClass(‘hide’);
$(‘.mail-detail’).toggleClass(‘hide’);
});

[/code]

Task Manager UI with CSS Grid

See the Pen Task Manager UI with CSS Grid by Aysenur Turk
(@TurkAysenur) on CodePen.

The post Task Manager UI with CSS Grid appeared first on csshint - A designer hub.

100+ Inspirational Motivational Quotes

admin — Sun, 01 Mar 2020 07:26:11 +0000

A list of the best positive inspirational & motivational quotes for success in life that will help boost your confidence & uplift your spirit.

“Don’t Be afraid to Start Over. It’s A Chance to Build Something Better.”

Inspirational Motivational Quotes

“Success is going from failure to failure without losing your enthusiasm.” – Winston Churchill

inspirational & motivational quotes

“If you do not change direction, you may end up where you are heading.” ― Gautam Buddha

“If you want to achieve greatness stop asking for permission.” –Anonymous

“Never let your past determine your future outcome.”

“If you can dream it, you can achieve it.” – Zig Ziglar

“The only way to do great work is to love what you do.” – Steve Jobs

“Life is what we make it, always has been, always will be.” – Grandma Moses

“You may be disappointed if you fail, but you are doomed if you don’t try.” – Beverly Sills

“Don’t Let Yesterday Take Up Too Much Of Today.” – Will Rogers

“If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.” – Steve Jobs

“Dream big and dare to fail.” – Norman Vaughan

“To live a creative life, we must lose our fear of being wrong.” –Anonymous

“Things work out best for those who make the best of how things work out.” –John Wooden

“If you are not willing to risk the usual you will have to settle for the ordinary.” –Jim Rohn

“It does not matter how slowly you go as long as you do not stop.” – Confucius

“Build your own dreams, or someone else will hire you to build theirs.” – Farrah Gray

“Knowledge without wisdom is like water in the sand.” ― Guinean Proverb

“If you don’t start today you won’t finish tomorrow.” — The Golden Mirror

“Don’t try to solve the issue that made you angry while you’re still angry.”

“I didn’t fail the test. I just found 100 ways to do it wrong.” – Benjamin Franklin

“Too many of us are not living our dreams because we are living our fears.” – Les Brown

“You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character.” – Unknown

“Trust because you are willing to accept the risk, not because it’s safe or certain.” –Anonymous

“Challenges are what make life interesting and overcoming them is what makes life meaningful.” – Joshua J. Marine

“Challenges are what make life interesting and overcoming them is what makes life meaningful.” ― J.J. Marine

“People Who Are Crazy Enough To Think They Can Change The World, Are The Ones Who Do.” – Rob Siltanen

“Life is too important to take seriously.” ― Corky Siegel

“Follow your dream wherever it takes you. Be faithful to yourself.”

“Happiness is not something readymade. It comes from your own actions.” – Dalai Lama

“When I let go of what I am, I become what I might be.” – Lao Tzu

“Everything has beauty, but not everyone can see.” – Confucius

“When you feel like giving up, remember why you held on for so long in the first place.” – Unknown

“Never give up on something that you can’t go a day without thinking about.” – Unknown

“Don’t worry about failures, worry about the chances you miss when you don’t even try.” – Jack Canfield

“I am thankful for all of those who said NO to me. Its because of them I’m doing it myself.” – Albert Einstein

“I don’t regret the things I’ve done, I regret the things I didn’t do when I had the chance.” – Unknown

“Life is what happens to you while you’re busy making other plans.” – John Lennon

“Imagine Your Life Is Perfect In Every Respect; What Would It Look Like?” – Brian Tracy

“All our dreams can come true if we have the courage to pursue them.” –Walt Disney

“If you don’t appreciate it, you don’t deserve it.” ― Terry Josephson

“A man is but the product of his thoughts. What he thinks, he becomes.” ― Gandhi

“Your time is limited, so don’t waste it living someone else’s life.” – Steve Jobs

“Winning isn’t everything, but wanting to win is.” – Vince Lombardi

“Either you run the day, or the day runs you.” – Jim Rohn

“Don’t let the world change your smile, let your smile change the world.” ― Tony Robbins

“Failure is part of the process of success. People who avoid failure also avoid success.” ― Robert T. Kiyosaki

“If you’re brave enough to say goodbye, life will reward you with a new hello.” ― Paulo Coelho

“Don’t judge each day by the harvest you reap but by the seeds you plant.” ― Robert Louis Stevenson

“If you don’t make things happen then things will happen to you.” ― Robert Collier via

“If you want your life to be more rewarding, you have to change the way you think.” ― Oprah Winfrey

“Life is a mirror and will reflect back to the thinker what he thinks into it.” ― Ernest Holmes

“Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.” – Og Mandino

“Most people don’t know how AWESOME they are, until you tell them. Be sure to tell them.” ― Kelvin Ringold

“Your life does not get better by chance, it gets better by a change.” ― Jim Rohn

“Think for yourself and let others enjoy the privilege of doing so too.” ― Voltaire

“The biggest adventure you can ever take is to live the life of your dreams.” ― Oprah Winfrey

“An obstacle is often a stepping stone.” – William Prescott

“The journey of a thousand miles begins with one step.” – Lao Tzu

“Tough times never last, but tough people do.” – Dr. Robert Schuller

“Keep your face to the sunshine and you can never see the shadow.” – Helen Keller

“The best way out is always through.” – Robert Frost

“Make each day your masterpiece.” – John Wooden

“All you need in this life is ignorance and confidence; then success is sure.” ― Mark Twain

“One small positive thought in the morning can change your whole day.” ― Joubert Botha

“Never lose hope, my heart, miracles dwell in the invisible.” ― Rumi

“If you cannot do great things, do small things in a great way.” – Napoleon Hill

“It is never too late to be what you might have been.” – George Eliot

“Always be a first-rate version of yourself, instead of a second-rate version of somebody else.” – Judy Garland

“Success is walking from failure to failure with no loss of enthusiasm.” –Winston Churchill

“Great is the art of beginning, but greater is the art of ending.” ― Henry Longfellow

“Don’t wait. The time will never be just right.” – Napoleon Hill

The post 100+ Inspirational Motivational Quotes appeared first on csshint - A designer hub.

30 Examples of logo with typography for Inspiration and Ideas

admin — Mon, 13 Jan 2020 18:58:43 +0000

Hello guys, Today’s we have collected top 30 Examples of logo with typography for Inspiration and Ideas, i hope these logo typography design will help you to font and color selections.

Scoop

Scoop logo by Dalius Stuoka / dribbble

inspiration Archives - csshint - A designer hub

Task Manager UI with CSS Grid

Task Manager UI with CSS Grid

100+ Inspirational Motivational Quotes

30 Examples of logo with typography for Inspiration and Ideas

Scoop

Stat Castle Logo Design

Fixt Logo Design

FlyNet Logo Design

The Self of Doctor

WARNING

Negative Reality Logo Design

Blind Wordmark

Smash Logo

Disappear Logotype

Big Bang Logo Design

jankes beekeeping

Influentsy Logo

Tie Logo Typography

vPlay Logo Design

Clever Wordmarks

Doctor Wordmark

Milk Logo

DROP

CHECK

USB logo

Pubquiz Logo Design

Plane Logo Design

Umbrella | Wordmark

OPENBOX

Hatchet

Vip1 Identity Project

Attach Logo Design

Codeshift Logo Design

Brigitte Logo Design

10+ Freshest Popular and useful CSS Code Snippet, October 2019

1. Download Button Animation

2. Fluid text hover

3. CSS Card Hover Effects

4. Fancy Exploding Button

5. Social Animation

6. Mobile Menu

7. Variable Fonts Experiment

8. Mini Music Player – VueJS

9. 3D Boxes Loader CSS only

10. Egg Toggle Switch Morph

11. Happy Fun Nav

Designer Challenges : Top 30 Logos With Hidden Meanings

1. Bike

2. Bird

3. Camp

4. Cup

5. Doctor

6. Done

7. Dove

8. Drink

9. Flight

10. Grill

11. Horse

12. House

13. Idea

14. Jazz

15. Kiss

16. Loading

17. Magazine

18. Noodle

19. November

20. Nudist

21. Panda

22. Pin

23. Pirate

24. Question

25. Search

26. Six

27. Sound

28. Vulture

29. Wine

30. Wolf

12 CSS Subscribe Forms examples

1.SUBSCRIBE FORM UI