搬运1——一个精美网页

效果图

代码

HTML

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>CodePen - Calendar Plan - Tasks Events App  #DailyPractice</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i|IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i|Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Ramabhadra" rel="stylesheet"><!-- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> --><link rel="stylesheet" href="https://anandchowdhary.github.io/ionicons-3-cdn/icons.css" integrity="sha384-+iqgM+tGle5wS+uPwXzIjZS5v6VkqCUV7YQ/e/clzRHAxYbzpUJ+nldylmtBWCP0" crossorigin="anonymous"><link rel="stylesheet" href="./style.css"></head>
<body>
<!-- partial:index.partial.html -->
<div class="mobile-wrapper"><!--======= Header =======--><header class="header"><div class="container"><span>Welcome Back!</span><h1>Calendar Plan</h1><div class="menu-toggle"><div><span></span><span></span><span></span></div></div></div></header><!--======= Today =======--><section class="today-box" id="today-box"><span class="breadcrumb">Today</span><h3 class="date-title">May 15, 2018</h3><div class="plus-icon"><i class="ion ion-ios-add"></i></div></section><!--======= Upcoming Events =======--><section class="upcoming-events"><div class="container"><h3>Lastest Events</h3><div class="events-wrapper"><div class="event"><i class="ion ion-ios-flame hot"></i><h4 class="event__point">11:00 am</h4><span class="event__duration">in 30 minutes.</span><p class="event__description">Monday briefing with the team (...).</p></div><div class="event"><i class="ion ion-ios-flame done"></i><h4 class="event__point">12:00 pm</h4><span class="event__duration">in 1 hour.</span><p class="event__description">Lunch with Paul Mccartney @Burgers House!</p></div><div class="event active"><i class="ion ion-ios-radio-button-on icon-in-active-mode"></i><h4 class="event__point">14:00 pm</h4><p class="event__description">Meet clients from project.</p></div><div class="event"><i class="ion ion-ios-flame-outline upcoming"></i><h4 class="event__point">20:45 pm</h4><span class="event__duration">in 45 minutes.</span><p class="event__description">Watch sci-fi series.</p></div><div class="event"><i class="ion ion-ios-flame-outline upcoming"></i><h4 class="event__point">23:15 pm</h4><span class="event__duration">in 20 minutes.</span><p class="event__description">Customer dialog on Skype.</p></div></div><button class="add-event-button"><span class="add-event-button__title">Add Event</span><span class="add-event-button__icon"><i class="ion ion-ios-star-outline"></i></span> </button></div></section>
</div>
<!-- partial --><script  src="./script.js"></script></body>
</html>

CSS

@charset "UTF-8";
html {box-sizing: border-box;
}*, *:before, *:after {box-sizing: inherit;
}* {outline: 0;
}body {background: linear-gradient(45deg, #13495f, #764be2, #8373c6, #77d3b9);background-attachment: fixed;height: 100vh;padding: 3rem 0;margin: 0;color: #555;font-family: "Lato", sans-serif;font-size: 14px;
}.container {width: 90%;margin: auto;
}.mobile-wrapper {background: #fff;/* relative with .today-box::before*/z-index: 1;/*positive*/position: relative;/*---------*/width: 380px;min-height: 100%;margin: auto;padding: 10px 0 20px;border-radius: 10px;box-shadow: 0px 10px 30px -10px #000;overflow: hidden;
}.header {padding-bottom: 15px;margin-bottom: 40px;
}
.header .container {position: relative;
}
.header .container span {color: #444;font-family: "Ramabhadra";font-size: 21px;font-weight: 700;
}
.header .container h1 {margin-top: 5px;color: #919294;font-size: 13px;font-weight: 300;
}
.header .container .menu-toggle {width: 25px;height: 25px;background: #fff;padding: 24px;border-radius: 50%;direction: rtl;display: flex;align-items: center;justify-content: center;box-shadow: 0px 10px 30px -14px #000;position: absolute;top: 0;right: 0;cursor: pointer;
}
.header .container .menu-toggle span {display: block;width: 25px;height: 2px;background: #777;border-radius: 2px;transition: all 300ms ease;
}
.header .container .menu-toggle span:not(:last-child) {margin-bottom: 5px;
}
.header .container .menu-toggle span:first-child {width: 20px;
}
.header .container .menu-toggle span:last-child {width: 15px;
}
.header .container .menu-toggle:hover span:first-child, .header .container .menu-toggle:hover span:last-child {width: 100%;
}
.header .container::before {content: "";display: block;width: 0;height: 0;border: 6px solid transparent;border-left-color: #e8e8e8;position: absolute;bottom: -13px;right: 0px;
}
.header .container::after {content: "";display: block;width: calc(100% - 10px);height: 2px;background-color: #e8e8e8;position: relative;top: 8px;
}.today-box {background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;color: #FFF;padding: 37px 40px;position: relative;box-shadow: 0px 0px 40px -9px #485fed;margin-bottom: 50px;
}
.today-box::before {content: "";background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;opacity: 0.4;z-index: -1;display: block;width: 100%;height: 40px;margin: auto;position: absolute;bottom: -13px;left: 50%;transform: translatex(-50%);border-radius: 50%;box-shadow: 0px 0px 40px 0 #485fed;
}
.today-box .breadcrumb {font-weight: 300;position: relative;
}
.today-box .breadcrumb::after {content: "";font-family: "Ionicons";vertical-align: middle;font-size: 12px;font-weight: 100;display: inline-block;color: #fff;text-align: center;position: absolute;left: 45px;top: 3px;
}
.today-box .date-title {font-size: 20px;margin: 7px 0 0 0;letter-spacing: 1px;font-weight: 600;text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
}
.today-box .plus-icon {border: 2px solid rgba(255, 255, 255, 0.6);border-radius: 50%;box-shadow: 0px 10px 30px -14px #000;position: absolute;top: 50%;transform: translateY(-50%);right: 40px;cursor: pointer;transition: all 350ms ease;transition-timing-function: cubic-bezier(0.05, 1.8, 1, 1.57);
}
.today-box .plus-icon:hover {transform: translateY(-40%);
}
.today-box .plus-icon i {font-size: 22px;font-weight: 700;background: #fff;color: #777;width: 45px;height: 45px;border: 6px solid #485fed;border-radius: 50%;display: flex;align-items: center;justify-content: center;
}
.today-box .plus-icon:active {top: 52%;transform: translatey(-52%);right: 38px;box-shadow: 0px 8px 30px -14px #000;
}.upcoming-events .container h3 {color: #333;font-size: 17px;margin-bottom: 30px;position: relative;
}
.upcoming-events .container h3::before {content: "";display: block;width: 58%;height: 2px;background-color: #e8e8e8;position: absolute;top: 60%;transform: translatey(-60%);right: 0;
}
.upcoming-events .container h3::after {content: "";font-family: "Ionicons";color: rgba(0, 0, 0, 0.1);vertical-align: middle;font-size: 36px;font-weight: 100;display: inline-block;background: #fff;color: #919294;width: 38px;text-align: center;position: absolute;right: 60px;top: -10px;
}
.upcoming-events .container .events-wrapper {margin-bottom: 30px;
}
.upcoming-events .container .events-wrapper .event {position: relative;margin-bottom: 25px;padding-left: 30px;cursor: pointer;
}
.upcoming-events .container .events-wrapper .event i {font-size: 24px;font-weight: 100;position: absolute;left: 0;top: -4px;
}
.upcoming-events .container .events-wrapper .event .event__point {margin: 0;color: #555;font-size: 15px;font-weight: 800;letter-spacing: 1px;
}
.upcoming-events .container .events-wrapper .event .event__duration {position: absolute;top: 5px;right: 0;color: #999;font-size: 10px;font-weight: 800;font-style: italic;
}
.upcoming-events .container .events-wrapper .event .event__description {margin-top: 10px;color: #919294;font-size: 13px;font-weight: 300;
}
.upcoming-events .container .events-wrapper .event.active {background: #e8e8e8;padding: 17px 0 5px 60px;margin-bottom: 38px;border-radius: 5px;
}
.upcoming-events .container .events-wrapper .event.active::after {content: "";display: block;width: 90%;height: 10px;background: #fff;border: 2px solid #ddd;border-top: 0;border-radius: 0 0 5px 5px;position: absolute;bottom: -10px;left: 50%;transform: translatex(-50%);
}
.upcoming-events .container .events-wrapper .event.active i {position: absolute;left: 25px;top: 17px;
}
.upcoming-events .container .events-wrapper .event.active .event__description::before, .upcoming-events .container .events-wrapper .event.active .event__description::after {content: "";font-family: "Ionicons";font-size: 32px;display: inline-block;color: #919294;text-align: center;position: absolute;right: 30px;top: 50%;transform: translateY(-50%);cursor: pointer;
}
.upcoming-events .container .events-wrapper .event.active .event__description::before {right: 45px;font-size: 22px;transition: all 550ms ease;transition-timing-function: cubic-bezier(0.05, 1.8, 1, 1.57);
}
.upcoming-events .container .events-wrapper .event.active:hover .event__description::before {transform: translate(15px, -12px);
}.hot {color: #ee6b51;
}.done {color: #999 !important;
}.icon-in-active-mode {color: #43ff28;font-size: 20px !important;
}.upcoming {font-weight: bold;color: #777;
}.add-event-button {display: flex;align-items: center;margin-left: auto;border: 0;padding: 0;background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;border-radius: 50px;cursor: pointer;box-shadow: 0px 0px 40px -9px #485fed;
}
.add-event-button:active {position: relative;top: 2px;left: 2px;
}
.add-event-button .add-event-button__title {color: #FFF;padding: 0 18px 0 23px;text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);font-family: "Lato";font-size: 15px;font-weight: 600;
}
.add-event-button .add-event-button__icon {display: inline-block;background: rgba(255, 255, 255, 0.1);padding: 0 17px 0 12px;height: 100%;
}
.add-event-button .add-event-button__icon i {margin: 0;color: #fff;font-size: 25px;padding: 13px 0;
}

搬运1——一个精美网页相关推荐

ubuntu 安装java插件_Ubuntu下安装JAVA插件欣赏精美网页
感谢cc2.cc的投递. ------------------------------------------------ 记得1998年那时刚接触网络,就被网上那些精美的Java所展现出来的令人炫目 ...
做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
精美网页设计案例_用户体验设计的精美艺术
精美网页设计案例 There are interactive experiences that simply blow you away. You know it's been a positive ...
分享36个收集精美网页设计作品的网站
想设计一个网站,苦思冥想半天也不知道设计成什么样好看,这时候特别想去一个汇集众多精美网页的网站上找找灵感.今天,本文就向大家分享36个收集精美网页设计作品的网站,相信你会喜欢的.如果你有收藏更好的网站 ...
html怎么把图片做成一条花纹,html5 canvas生成精美网页花纹背景图像js插件
这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在canvas中绘制各种花纹图像.生成的背景花纹图像可以是静态的,也可以制作成动态花 ...
用 python 实现一个多线程网页下载器
今天上来分享一下昨天实现的一个多线程网页下载器. 这是一个有着真实需求的实现,我的用途是拿它来通过 HTTP 方式向服务器提交游戏数据.把它放上来也是想大家帮忙挑刺,找找 bug,让它工作得更好. k ...
有了 serverless，前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
创建一个html网页,创建第一个HTML网页(未完待续)
要学会游泳,就必须下水.所以二话不说,我们直接开始制作一个HTML网页,并尝试在在这个网页中添加你所能想象到的所有内容. 构建网页的基本结构网页的基本结构就像是一个三明治,由html标签夹着head ...
前端开发推荐-创建一个精美的jquery图片库效果
在Web和图形设计的世界,jquery它是使用最广泛的技术. 在他的帮助下,我们可以创建很多伟大的事情.丰富的jQuery插件,在互联网上,使我们能够毫不费力地创建幻灯片,表格,动画和其他各种良好的效 ...

搬运1——一个精美网页

效果图

代码

HTML

CSS

搬运1——一个精美网页相关推荐

最新文章

热门文章