Weekly UI - Mobile design sketches

Developer
Fred Hawk
Size
4,908 Kb
Views
12,144
  1. Weekly UI - Mobile design sketches Previews
  2. Weekly UI - Mobile design sketches HTML Codes
  3. Weekly UI - Mobile design sketches CSS Codes
  4. Weekly UI - Mobile design sketches JS Codes

How do I make an weekly ui - mobile design sketches?

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

Weekly UI - Mobile design sketches Previews
IQ Test

Weekly UI - Mobile design sketches - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weekly UI - Mobile design sketches</title> <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'> <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="speech-bubble"> <path d="M128 32h512q39.75 0 67.875 28.125t28.125 67.875v352q0 39.75-28.125 67.875t-67.875 28.125h-256l-224 160v-160h-32q-39.75 0-67.875-28.125t-28.125-67.875v-352q0-39.75 28.125-67.875t67.875-28.125zM640 96h-512q-13.25 0-22.625 9.375t-9.375 22.625v352q0 13.25 9.375 22.625t22.625 9.375h96v99.75l139.5-99.75h276.5q13.25 0 22.625-9.375t9.375-22.625v-352q0-13.25-9.375-22.625t-22.625-9.375z"></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="dot-single"> <path d="M249.6 320c0 38.88 31.552 70.4 70.432 70.4s70.368-31.552 70.368-70.4c0-38.88-31.488-70.368-70.368-70.368s-70.432 31.488-70.432 70.368z"></path> </symbol> </defs>
</svg>
<div class="container"> <div class="card"> <div class="card1"> <div class="wrap2"> <h4 class="author">Mark Manson</h4> <h1 class="title">The </br>Dark side </br>of the digital nomad</h1> <button class="travel">Travel</button> </div> <footer class="footer"> <button class="close">Close</button> <div class="dots"> <svg viewBox="0 0 640 640" class="dot active-dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> </div> <div class="bubble"> <svg viewBox="0 0 768 768" class="icon"> <use xlink:href="#speech-bubble"></use> </svg> </div> </footer> </div> </div> <div class="card"> <div class="card2"> <div class="wrap2"> <p><span class="big">T</span>he following is the original piece I wrote fro CNN last year entrepreneurs, also known as "digital nomals." Since the whole "Work Online, Travel the World and Live the Dream" angle had been done to death in a million places, I decided to go the other direction and show the dark side of being a digital nomad -- the challenges one faces, the emotional pitfalls, the social sacrifices.</p> <p>Predictably, CNN hated it. The editors hacked it to pieces and asked me to rewrite sections to make it less gloomy. But I was always fond of te original, so I'm posting it here unabridged.</p> </div> <footer class="footer"> <button class="close">Close</button> <div class="dots"> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot active-dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> <svg viewBox="0 0 640 640" class="dot"> <use xlink:href="#dot-single"></use> </svg> </div> <div class="bubble"> <svg viewBox="0 0 768 768" class="icon"> <use xlink:href="#speech-bubble"></use> </svg> </div> </footer> </div> </div> <div class="card"> <div class="card3"> <div class="header"> <div class="header-left"></div> <div class="header-right"> <div class="commentcount">Comments (45)</div> <div class="closeX">X</div> </div> </div> <div class="content"> <div class="items"><img src="http://placeskull.com/50/50" class="img" /> <div class="information"> <div class="info-header"> <div class="name">jonathandunn</div> <div class="dots"><svg viewBox="0 140 540 540" class="dot"> <use xlink:href="#dot-single"></use> </svg></div> <div class="time">3 hours ago</div> </div> <div class="comment"> Good point! There are travel blogger. Then there are freelancers: coder mainly.</div> </div> </div> <div class="items"><img src="http://placeskull.com/50/50" class="img" /> <div class="information"> <div class="info-header"> <div class="name">roberto98</div> <div class="dots"><svg viewBox="0 140 540 540" class="dot"> <use xlink:href="#dot-single"></use> </svg></div> <div class="time">3 hours ago</div> </div> <div class="comment"> Not one family in amongst that. Being nomadic is easier when you only have 1 person to worry about.</div> </div> </div> <div class="items"><img src="http://placeskull.com/50/50" class="img" /> <div class="information"> <div class="info-header"> <div class="name">danielrubinho</div> <div class="dots"><svg viewBox="0 140 540 540" class="dot"> <use xlink:href="#dot-single"></use> </svg></div> <div class="time">4 hours ago</div> </div> <div class="comment"> Not saying it's not doable, some good friends of mine manage it but would have been a better article with 50/50</div> </div> </div> <div class="items"><img src="http://placeskull.com/50/50" class="img" /> <div class="information"> <div class="info-header"> <div class="name">danielrubinho</div> <div class="dots"><svg viewBox="0 140 540 540" class="dot"> <use xlink:href="#dot-single"></use> </svg></div> <div class="time">5 hours ago</div> </div> <div class="comment"> here people do business from the road (running an IT company, travelling and filming their travel)</div> </div> </div> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Weekly UI - Mobile design sketches - Script Codes CSS Codes

body svg { height: 0px; width: 0px;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; margin-top: 100px;
}
@media (max-width: 730px) { .container { -ms-flex-wrap: wrap; flex-wrap: wrap; }
}
.card { width: 360px; height: 640px; box-shadow: 0 0 15px 0; margin-bottom: 3em;
}
.card1 { padding-top: 150px; height: calc(100% - 150px); text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; background-image: url("http://lorempixel.com/360/640/people/");
}
.wrap2 { padding-left: 2em; padding-right: 2em;
}
.author { color: white;
}
.title { width: 13rem; color: #e3e7eb; font-size: 2.35em; line-height: 1.5;
}
.travel { width: 5rem; padding: 0.6rem;
}
.bubble { width: 25px; height: 25px;
}
.icon { display: inline-block; width: 100%; height: 100%;
}
.dot { display: inline-block; width: 20px; height: 20px; fill: #DADBE0;
}
.active-dot { fill: black;
}
.info-header .dot { width: 20px; height: 20px;
}
button { text-transform: uppercase; width: 4em; background: white; border: none;
}
.footer { height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: white;
}
.card2 { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; background: #F8F9FA;
}
p { padding-top: 1.2em; font-size: 1.2em; color: #898E95; font-family: 'Slabo 27px', serif; letter-spacing: 1px;
}
.card2 p:first-child:first-letter { float: left; font-size: 5em; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; color: black;
}
.header { margin: 2em 2em 0 2em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.header-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 65%;
}
.content { margin: 1.5em 2em 0 2em;
}
.items { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1em; color: #898E95;
}
.img { border-radius: 50%; width: 3em; height: 3em; margin-right: 1em; margin-top: 2em;
}
.information { width: 15em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.info-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1em 0;
}
.name { color: black;
}
.time { font-size: 0.75em;
}

Weekly UI - Mobile design sketches - Script Codes JS Codes

//Design created by
//https://dribbble.com/ghanipradita
//https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147
Weekly UI - Mobile design sketches - Script Codes
Weekly UI - Mobile design sketches - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 4,908 Kb
Views 12,144
Do you need developer help for Weekly UI - Mobile design sketches?

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
CSS Flexbox 3 col example
Weekly UI - Invisionapp Sign up
Pomodoro Clock
Collapsing Text Animation
Portfolio example FCC
Weekly UI - Airbnb Footer Component
Quotastic
Weekly UI - Make Reservations
Lilli
Weekly UI - Dropbox Hero Component
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!