HTML + CSS + JS做一个绘画分享网站[开源项目]
2024-05-28 07:22:15
声明:1.此项目仅仅代码开源，DrawPark是此博客的产权，严禁盗用
2.此项目暂时是静态网站
先看一下效果图吧！预览网址:https://drawpark.rth.app/
HTML代码
<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
<head data-info="{"v":"1.0.8125.42964","a":"1980ab5e-114f-45af-8682-4e4e52757090","cn":"OneDeployContainer","az":"{did:92e7dc58ca2143cfb2c818b047cc5cd1, rid: OneDeployContainer, sn: marketingsites-prod-odeastasia, dt: 2018-05-03T20:14:23.4188992Z, bt: 2022-04-01T07:52:08.0000000Z}","ddpi":"1","dpio":"","dpi":"1","dg":"uplevel.web.pc.webkit.chrome","th":"default","m":"zh-cn","l":"zh-cn","mu":"zh-cn","rp":"/zh-cn","f":"13438t1,atperf680t2,tasmigration010,cartemberpl,disablenorefunds,daconvertenabled,enablescarlettmetadata,redirecttogarrison,sha-exp-inlyi9j7ql,enablesaturncf,disableapprestore,15980t1cf","bh":{}}"><meta charset="UTF-8" /><link rel="stylesheet" href="style.css"><meta http-equiv="x-ua-compatible" content="ie=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><script type="text/javascript" src="新建文本文档.js"></script><script type="text/javascript" src="提示.js"></script><title>DrawPark</title><div class="menu-btn"><i class="fas fa-bars fa-2x"></i></div><div class="container"><!-- Nav --><nav class="main-nav"><img src="屏幕截图 2022-04-24 172054.png" alt="Microsoft" class="logo"><ul class="main-menu"><li><a href="#">素描</a></li><li><a href="#">油画</a></li></ul><ul class="right-menu"><li><a href="#"><i class="fas fa-search"></i></a></li><li><a href="#"><i class="fas fa-shopping-cart"></i></a></li></ul></nav><!-- Showcase --><!-- Home cards 1 --><section class="home-cards"><div><img src="http://img0.baidu.com/it/u=3281388362,3938236604&fm=253&app=138&f=JPEG&fmt=auto&q=75&fmt=auto&q=75?w=500&h=500" alt=""><h3>青年头像素描 | Romel.De.La.Torre </h3><p>罗梅尔·德·拉·托雷（Romel de la Torre，1963-），菲律宾裔美国现实主义学院派画家，美国油画家协会和美国肖像协会的签名会员。</p><a href="p1.html">Learn More <i class="fas fa-chevron-right"></i></a></div><div><img src="https://img1.baidu.com/it/u=2224777323,2560998040&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=539" alt="" /><h3>青年头像素描|ZinLim</h3><p>zinlim善于画人体和肖像，有西方艺术大师的风范。他的素描极具视觉冲击力，非常吸引人的眼球，虚实相间，对比明确。他的笔触粗中见细，线条灵动飞舞，挥洒自如，看似潦草，但形神兼备。</p><a href="p2.html">Learn More <i class="fas fa-chevron-right"></i></a></div><div><img src="https://img1.baidu.com/it/u=3249925907,1415301971&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=447" alt="" /><h3>青年头像素描|陈丹青</h3><p>陈丹青是当代最具影响力艺术家，作家，文艺评论家，学者。1980年，陈丹青以具有划时代意义的油画——《西藏组画》而成为中国艺术界巅峰人物，引起极大轰动，至今余韵不绝。</p><a href="p3.html">Learn More <i class="fas fa-chevron-right"></i></a></div><div><img src="https://img2.baidu.com/it/u=527257165,1577662039&fm=253&fmt=auto&app=138&f=JPEG?w=368&h=500" alt="" /><h3>青年头像素描|冉茂芹</h3><p>冉茂芹，1942年出生于中国湖南省，生长，求学于中国大陆上世纪五、六十年代，1959 - 1963广州美术学院附属美术中学毕业，1963 - 1965广州美术学院舞台美术设计专科毕业。1980年移居香港，翌年加盟美西Simic画廊。1988年定居台北。擅长肖像、裸体、风景、静物油画。现为湖南师范大学艺术学院客座教授，广东画院海外特聘画家。作品曾参选全国美展，多次入选广东美展，并获广东省首次颁发的一等奖。</p><a href="p4.html">Learn More <i class="fas fa-chevron-right"></i></a></div></section><!-- Xbox --><section class="xbox"><div class="content"><h2>油画人物</h2><p>油画人物又称为“人物油画”，是油画体裁的主要门类之一。人物油画最能体现出立体感和质感，是西方油画家最钟爱的体裁。由于油画材料的特性粘稠，很适合画立体的人物肖像，所以欧洲历史上的油画名作大多为油画人物。</p></a></div></section><!-- Home cards 2 --><section class="home-cards"><div><img src="屏幕截图 2022-04-22 204143.png" alt="" /><h3>油画人物|作者未知</h3><p>作者未知</p><a href="#">LEARN More <i class="fas fa-chevron-right"></i></a></div><div><img src="屏幕截图 2022-04-22 204034.png" alt="" /><h3>油画人物|作者未知</h3><p>作者未知</p><a href="#">Shop Now <i class="fas fa-chevron-right"></i></a></div><div><img src="屏幕截图 2022-04-22 204252.png" alt="" /><h3>油画人物|作者未知</h3><p>作者未知</p><a href="#">LEARN More <i class="fas fa-chevron-right"></i></a></div><div><img src="屏幕截图 2022-04-24 172421.png" alt="" /><h3>油画人物|作者未知</h3><p>作者未知</p><a href="#">LEARN More <i class="fas fa-chevron-right"></i></a></div></section><!-- Carbon --><section class="carbon dark"><div class="content"><h2>DrawPark2.0发布会</h2><p>敬请期待</p><a href="#" class="btn">Learn More <i class="fas fa-chevron-right"></i></a></div></section><!-- Follow --><section class="follow"><p>关注DrawPark</p><a href="#"><img src="https://img0.baidu.com/it/u=188486391,188154094&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="Facebook"></a></section></div><!-- Links -->* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: #fff;color: #000;font-size: 15px;line-height: 1.5;
}a {color: #262626;text-decoration: none;
}ul {list-style: none;
}.container {width: 90%;max-width: 1100px;margin: auto;
}/* Nav */
.main-nav {display: flex;align-items: center;justify-content: space-between;height: 60px;padding: 20px 0;font-size: 13px;
}.main-nav .logo {width: 110px;
}.main-nav ul {display: flex;
}.main-nav ul li {padding: 0 10px;
}.main-nav ul li a {padding-bottom: 2px;
}.main-nav ul li a:hover {border-bottom: 2px solid #262626;
}.main-nav ul.main-menu {flex: 1;margin-left: 20px;
}.menu-btn {cursor: pointer;position: absolute;top: 20px;right: 30px;z-index: 2;display: none;
}.btn {cursor: pointer;display: inline-block;border: 0;font-weight: bold;padding: 10px 20px;background: #262626;color: #fff;font-size: 15px;;
}.btn:hover {opacity: 0.9;
}.dark {color: #fff;
}.dark .btn {background: #f4f4f4;color: #333;
}/* Showcase */
.showcase {width: 100%;height: 400px;display: flex;flex-direction: column;align-items: center;text-align: center;justify-content: flex-end;padding-bottom: 50px;margin-bottom: 20px;
}.showcase h2, .showcase p {margin-bottom: 10px;
}.showcase .btn {margin-top: 20px;
}/* Home cards */
.home-cards {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;margin-bottom: 40px;
}.home-cards img {width: 100%;margin-bottom: 20px;
}.home-cards h3 {margin-bottom: 5px;
}.home-cards a {display: inline-block;padding-top: 10px;color: #0067b8;text-transform: uppercase;font-weight: bold;
}.home-cards a:hover i {margin-left: 10px;
}/* Xbox */.xbox .content {width: 40%;padding: 50px 0 0 30px;
}.xbox p, .carbon p {margin: 10px 0 20px;
}/* Carbon */
.carbon {width: 100%;height: 350px;background: url('https://i.ibb.co/72cgtsz/carbon.jpg') no-repeat center center/cover;
}.carbon .content {width: 55%;padding: 100px 0 0 30px;
}/* Follow */
.follow {display: flex;align-items: center;justify-content: flex-start;margin: 30px 0 30px;
}.follow * {margin-right: 10px;
}/* Links */
.links {background: #f2f2f2;color: #616161;font-size: 12px;padding: 35px 0;
}.links-inner {max-width: 1100px;margin: 0 auto;padding: 0 20px;display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 10px;align-items: flex-start;justify-content: center;
}.links li {line-height: 2.8;
}/* Footer */
.footer {background: #f2f2f2;color: #616161;font-size: 12px;padding: 20px 0;
}.footer-inner {max-width: 1100px;margin: 0 auto;padding: 0 20px 0 20px;display: flex;align-items: center;justify-content: space-between;
}.footer div {margin-bottom: 20px;display: flex;align-items: center;
}.footer div i {margin-right: 10px;
}.footer ul {display: flex;flex-wrap: wrap;
}.footer li {margin-right: 30px;margin-bottom: 20px;
}@media(max-width: 700px) {.menu-btn {display: block;}.menu-btn:hover {opacity: 0.5;}.main-nav ul.right-menu {margin-right: 50px;}.main-nav ul.main-menu {display: block;position: absolute;top:0;left: 0;background: #f2f2f2;width: 50%;height: 100%;border-right: #ccc 1px solid;opacity: 0.9;padding: 30px;transform: translateX(-500px);transition: transform 0.5s ease-in-out;}.main-nav ul.main-menu li {padding: 10px;border-bottom: #ccc solid 1px;font-size: 14px;}.main-nav ul.main-menu li:last-child {border-bottom: 0;}.main-nav ul.main-menu.show {transform: translateX(-20px);}.home-cards {grid-template-columns: repeat(2, 1fr);}.xbox .content p {display: none;}.xbox .content h2 {margin-bottom: 20px;}.carbon .content {width: 85%;}.links .links-inner {grid-template-columns: repeat(2, 1fr);}
}@media(max-width: 500px) {.home-cards {grid-template-columns: 1fr;}.links .links-inner {grid-template-columns: 1fr;}.links .links-inner ul {margin-bottom: 20px;}
}alert('来自DrawPark公告：1.DrawPark油画部分尚未完成路由2.头顶导航部分尚未完成路由')HTML + CSS + JS做一个绘画分享网站[开源项目]相关推荐
- html+css+js 做一个加解密小网页
孩子第一次做网页,比较菜,勿喷 本来是想做一个ctf的知识站和加解密站当作业交上去,但是时间太短了,又要准备高数和大雾简直人都要没了,就只写了base64,凯撒,和栅栏密码 html <!DOC ...
- 用HTML+CSS+JS做一个漂亮的个人网页
个人网页设计 个人网页(html+css+js)--带背景音乐.樱花飘落效果 页面美观,样式丰富 可以根据自己需求进行修改 源码在这里获取https://download.csdn.net/downl ...
- HTML+CSS+JS做一个好看的个人网页—web网页设计作业
个人网页设计 个人网页(html+css+js)--网页设计作业 带背景音乐(The way I still Love you).樱花飘落效果.粒子飘落效果 页面美观,样式精美 涉及(html+css ...
- 用HTML+CSS+JS做一个漂亮简单的公司网站（JavaScript期末大作业）
- 用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧 效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...
- 用HTML+CSS+JS做一个漂亮简单的游戏网页——全屏游戏美术大赛作品(4个滚动页面)
- 【恋爱交友情侣表白网站模板】HTML+CSS+JS制作一个爱心表白网站
❤ 精彩专栏推荐
- 用js做一个数字华容道
我很喜欢华容道啊,这次用js做一个 话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
- 用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...
最新文章
- (0011) iOS 开发之模拟HTTP请求与响应，返回自己想要的报文。
- #react-native BUG#
- 常用的HTTP请求头与响应头
- php 检查数组为空_检查数组是否为空在PHP中
- 前端调试效率低？试试这10个“Chrome开发者工具”使用技巧
- css中的clip属性rect(top,right,bottom,left);
- 变化世界中的军事地质学
- 数学建模——SPSS的非参数检验
- centos7.6 挂载硬盘
- unity人物添加动作进行播放
- Python绘制双对数曲线
- 服务器微软whql认证,什么是WHQL认证？
- 【单细胞高级绘图】10.KEGG富集结果的圆圈图
- 数字抽奖小程序_小程序直播卖货必看的营销干货：抽奖营销
- 删除单据是提示反写出错，采购系统严格控制执行数量，不允许超过关联的收料通知单数量，并且收料通知单数量不能为负数...
- 如何保存视频会议画面内容？视频会议截图功能
- 华硕笔记本台式机安装系统
- 大学生Dreamweaver网页设计基础知识
- 经典Flash源文件集锦-导航篇＿韩式导航
- K8s集群RBAC认证授权详解