Minimalist Email - Flex Box

Developer
Emerson Thompson
Size
3,540 Kb
Views
28,336
  1. Minimalist Email - Flex Box Previews
  2. Minimalist Email - Flex Box HTML Codes
  3. Minimalist Email - Flex Box CSS Codes

How do I make an minimalist email - flex box?

What is a minimalist email - flex box? How do you make a minimalist email - flex box? This script and codes were developed by Emerson Thompson on 11 August 2022, Thursday.

Minimalist Email - Flex Box Previews
IQ Test

Minimalist Email - Flex Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimalist Email - Flex Box</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header"><span class="logo">Minimalist Email</span></header>
<main class="main"> <aside class="sidebar"><a class="item current">Inbox</a><a class="item">Sent</a><a class="item">Junk</a></aside> <div class="content"> <ul class="list"> <li class="item no-read"><span class="title">Title email lorem ipsum</span><span class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> <li class="item no-read"><span class="title">Title email lorem ipsum</span><span class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> <li class="item"><span class="title">Title email lorem ipsum</span><span class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> <li class="item"><span class="title">Title email lorem ipsum</span><span class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> </ul> </div>
</main>
</body>
</html>

Minimalist Email - Flex Box - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
* { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;
}
html,
body { width: 100%; height: 100%; font-family: "Source Sans Pro", sans-serif; background-color: #EEE;
}
.header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-height: 50px; padding: 10px; background-color: #2a82bb;
}
.header .logo { text-align: center; color: rgba(255, 255, 255, 0.2); border: 2px solid; padding: 2px 10px; text-transform: uppercase;
}
.main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: calc(100vh - 50px);
}
.main .sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; background-color: #434C55;
}
.main .sidebar .item { width: 100%; padding: 15px; text-align: center; color: rgba(255, 255, 255, 0.5);
}
.main .sidebar .item:hover { background-color: rgba(0, 0, 0, 0.1);
}
.main .sidebar .item.current { background-color: rgba(0, 0, 0, 0.2); color: #FFF;
}
.main .content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%;
}
.main .content .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin: 15px;
}
.main .content .list .item { position: relative; display: block; width: 100%; padding: 10px; border: 1px solid #DDD; border-bottom: none; background-color: #FFF; cursor: pointer;
}
.main .content .list .item:last-child { border-bottom: 1px solid #DDD;
}
.main .content .list .item .title { display: block; width: 100%; color: rgba(0, 0, 0, 0.5);
}
.main .content .list .item .excerpt { color: rgba(0, 0, 0, 0.3);
}
.main .content .list .item:hover { background-color: #EEEEEE;
}
.main .content .list .item.no-read:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 3px; height: 100%; background-color: #27ae60;
}
.main .content .list .item.no-read .title { font-weight: bold; color: #000;
}
@media( min-width: 580px ) { .main { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .main .sidebar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 25%; } .main .sidebar .item { text-align: left; } .main .content { width: 75%; }
}
Minimalist Email - Flex Box - Script Codes
Minimalist Email - Flex Box - Script Codes
Home Page Home
Developer Emerson Thompson
Username thompsonemerson
Uploaded August 11, 2022
Rating 3
Size 3,540 Kb
Views 28,336
Do you need developer help for Minimalist Email - Flex Box?

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!

Emerson Thompson (thompsonemerson) Script Codes
Name
Ripple Button - Material Design
Hashtag Instagram - jQuery
Milligram - Logo Animation SVG
Logo Hover Animate CSS3
Brazil Map SVG
Filtro de palavras com JavaScript
Hashtag Instagram - AngularJS
Hello World - ReactJS
Reactions Facebook
Hello World - Angular 2
Create amazing blog posts 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!