个人作品集

最新推荐文章于 2021-12-03 19:55:35 发布
最新推荐文章于 2021-12-03 19:55:35 发布
阅读量536 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jackson_577/article/details/117605772
版权

模仿的freecodecamp的一个作品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集展示页</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html{
            box-sizing: border-box;
            font-size: 62.5%;
            scroll-behavior: smooth;
        }
        @media(max-width:65rem){
            html{
                font-size: 60%;
            }
        }
        body{
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            font-size: 1.8rem;
            line-height: 1.4;
            color: #f0f0f0;
            overflow-x: hidden;
        }
        h1,h2{
            font-family: 'Raleway', sans-serif;
            font-weight: 700;
            text-align: center;
        }
        h1{
            font-size: 6rem;
        }
        h2{
            font-size: 3.8rem;
        }
        a{
            text-decoration: none;
            color: #f0f0f0;
        }
        img{
            display: block;
            width: 100%;
        }
        nav{
            background:#be3144;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content:space-between;
            align-items: center;
            width: 100%;
            z-index: 10;
        }
        ul{
            list-style: none; 
        }
        #navbar>img{
            display: flex;
            max-width: 300px;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-left: 20px;
        }
        .nav-list{
            display: flex;
            margin-right: 2rem;
            margin-top: 0;
            margin-bottom: 0;
        }
        .nav-list a{
            display: block;
            font-size: 2.2rem;
            padding: 2rem;
        }
        .nav-list a:hover{
            background-color: #45567d;
        }
        .welcome-section{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 2;
            width: 100%;
            height: 100vh;
            background-color: #000;
            background-image: linear-gradient(62deg,#3a3d40 0%,#181719 100%);
        }
        .welcome-section h1{
            font-size: 6rem;
            font-weight: bolder;
        }
        .welcome-section p{
            font-family:'Poppins', sans-serif;
            font-size: 3rem;
            font-style: italic;
            color: #be3144;
            font-weight: 200;
        }
        .projects-section{
            padding: 10rem 2rem;
            text-align: center;
            background-color: #45567d;
        }
        .projects-title{
            max-width: 640px;
            margin: 0 auto 6rem auto;
            border-bottom: solid #f0f0f0 0.2rem;
        }
        .projects-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
            grid-gap:4rem;
            max-width: 1280px;
            width: 100%;
            margin: 0 auto;
            margin-bottom: 6rem;
        }
        .project-image{
            height: calc(100% - 6.8rem);
            width: 100%;
            object-fit: cover;
        }
        .project-a{
            background-color: #303841;
            border-radius: 2px;
            box-shadow: 1px 1px 2px rgb(0 0 0/ 50%);
        }
        .project-p{
            padding: 2rem 0.5rem;
            font-size: 2rem;
        }
        .code{
            color: #303841;
            transition: color 0.3s ease-in-out;
        }
        .project-a:hover .code{
            color:#ff7f50;
        }
        .btn{
            width: 15rem;
            height: 4.2rem;
            background-color: #303841;
            font-size: 2rem;
            color: #f0f0f0;
            padding: 0.5rem;
            border: none;
            border-radius: 2px;
            transform: translateX(0);
        }
        .btn:hover{
            background-color: #be3144;
            transform: translateX(2);
            cursor: pointer;
            transition: background-color transform 0.3s ease-out;
            
        }
        .contact-section{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: #303841;
            padding: 0 2rem;
            width: 100%;
            height: 80vh;
        }
        .contact-section h1{
            font-size: 6rem;
            margin-bottom: 2rem; 
        }
        .contact-section p{
            font-style: italic;
            font-weight: 200;
        }
        .contact-links{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
            max-width: 980px;
            margin-top: 4rem;
        }
        .contact-links a{
            font-size: 2.4rem;
            padding:1rem 2rem;
            text-shadow: 2px 2px 1px #1f1f1f;
            transition: transform 0.3s ease-out;
        }
        .contact-links a:hover{
            transform: translateY(8px);
        }
        .footer{
            display: flex;
            justify-content:space-evenly;
            background-color:#303841;
            font-weight: 300;
            border-top: #be3144 4px solid;
            padding: 2rem;
        }
        .footer > p{
            margin: 2rem;
        }
    </style>
</head>
<body>
    <nav id="navbar">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="">
        <ul class="nav-list">
            <li><a href="#welcome-section">About</li></a>
            <li><a href="#projects">Product</li></a>
            <li><a href="#contact">Contact</li></a>
        </ul>
    </nav>

    <section id="welcome-section" class="welcome-section">
        <h1>We Are Family</h1>
        <p>a web-learning student</p>
    </section>

    <section id="projects" class="projects-section">
        <h2 class="projects-title">These are some of my projects</h2>
        <div class="projects-grid">
        <a href="file:///C:/Users/86188/Desktop/web%E5%BC%80%E5%8F%91/%E7%BD%91%E9%A1%B5/Lover.html" class="project-a" target="_blank">    
            <img src="file:///C:/Users/86188/Pictures/QQ%E5%9B%BE%E7%89%8720210514171335.png" alt="" class="project-image">
                <p class="project-p">
                    <span class="code"><</span>
                     Tribute Page
                    <span class="code">/></span>
                </p>
        </a>
        <a href="file:///C:/Users/86188/Desktop/web%E5%BC%80%E5%8F%91/%E7%BD%91%E9%A1%B5/%E8%87%AA%E6%88%91%E4%BB%8B%E7%BB%8D.html" class="project-a" target="_blank">
            <img src="C:/Users/86188/Desktop/web开发/网页/表单.png" alt="" class="project-image">
            <p class="project-p">
                <span class="code"><</span>
                Submit Form
                <span class="code">/></span>
            </p>
        </a>
        <a href="file:///C:/Users/86188/Desktop/web%E5%BC%80%E5%8F%91/%E7%BD%91%E9%A1%B5/%E4%BA%A7%E5%93%81%E7%99%BB%E9%99%86%E9%A1%B5.html" target="_blank" class="project-a">
            <img src="C:/Users/86188/Desktop/web开发/网页/产品登陆页.png" alt="" class="project-image">
            <p class="project-p">
                <span class="code"><</span>
                Product Landing
                <span class="code">/></span>
            </p>
        </a>
        <a href="file:///C:/Users/86188/Desktop/web%E5%BC%80%E5%8F%91/%E7%BD%91%E9%A1%B5/%E6%8A%80%E6%9C%AF%E6%96%87%E6%A1%A3%E9%A1%B5%E9%9D%A2.html" target="_blank" class="project-a">
            <img src="C:/Users/86188/Desktop/web开发/网页/技术文档页面.png" alt="" class="project-image">
            <p class="project-p">
                <span class="code"><</span>
                Technical Documentation Page
                <span class="code">/></span>
            </p>
        </a>
        <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" class="project-a"target="_blank">
            <img src="C:/Users/86188/Desktop/web开发/网页/计算器.png"  alt="" class="project-image" >
            <p class="project-p">
                <span class="code"><</span>
                JavaScript Calculator
                <span class="code">/></span>
            </p>
        </a>
        <a href="https://codepen.io/freeCodeCamp/full/KzXQgy" class="project-a"target="_blank">
            <img src="C:/Users/86188/Desktop/web开发/网页/游戏.png"  alt="" class="project-image" >
            <p class="project-p">
                <span class="code"><</span>
                Play Game
                <span class="code">/></span>
            </p>
        </a>
        </div>
        <a href="https://codepen.io/FreeCodeCamp/" target="_blank" class="a">
            <button class="btn">Show All </button>
        </a>
    </section>

    <section class="contact-section">
        <div class="contact-head">
            <h1>Let's Work Together</h1>
            <p>Web-learning is very interesting</p>
        </div>
        <div class="contact-links">
            <a href="https://www.qq.com" target="_blank">QQ</a>
            <a href="https://www.wechat.com" target="_blank">WeChat</a>
            <a href="http://www.qqemail.com" target="_blank">Email</a>
            <a href="http://www.baidu.com" target="_blank">Call Me</a>
        </div>
    </section>

    <footer class="footer">
        <p>**This is just a fake portfolio. All the projects and contact details given are not real.</p>
        <p>© Created by Qian </p>
    </footer>
</body>
</html>
Jackson_577
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个人作品集网站
02-10
Thiago Nunes Batista-个人投资组合网站 我在这里介绍一些项目，我的联系方式和我自己。 如何在本地主机上运行此项目 克隆存储库 git clone https://github.com/thiagonunesbatista/personal-portfolio-website.git 输入克隆的文件夹并安装依赖项 cd personal-portfolio-website &amp;&amp; npm install 开始项目 npm run dev
personal_portfolio_page1:freecodecamp上的响应式Web设计项目的个人作品集
03-29
personal_portfolio_page1:freecodecamp上的响应式Web设计项目的个人作品集
Personal-Portfolio-Webpage:FreeCodeCamp挑战的个人作品集网页
05-13
个人档案页 FreeCodeCamp挑战的个人投资组合网页。
作品集
aiwanghuan5017的博客
03-26 161
作品集作品集邮箱爬虫博客游戏，pythonhtmlcss作品集1. 软件课设--邮箱管理软件demogithub源代码2. 豆瓣爬虫--爬取前250名电影信息github源代码3. 个人博客--powerd by flaskgithub源代码4. 天气预报查询github源代码5. 多人聊天室github源代码6. 图片瀑布流网站demogithub源代码7. 图片墙demogith...
freecodecamp小项目---个人网站
神以灵的博客
05-06 3225
这个简陋的网站只用了html和css效果； 项目效果： html代码： JZX WebPage  jzx about interests contact WHO AM I My name is jzx.I'm studying in ZhongBei University now. My hometown is a small city named SuiN...
Personal-Portfolio：按照freecodecamp响应式Web设计项目的指导方针，创建了一个个人投资组合页面。
02-18
Personal-Portfolio：按照freecodecamp响应式Web设计项目的指导方针，创建了一个个人投资组合页面。
原生实现freeCodeCamp上的Build a Personal Portfolio Webpage
行云出岫
11-22 717
目标网站： 设计一个类似于: https://codepen.io/freeCodeCamp/full/YqLyXB/的个人作品集。 完成效果图： 心得体会： 一开始最大的困扰是怎么监听滚动滑动，搜索工具是个好东西，用JQuery来操作dom很容易就解决了这个问题。后面编码中的问题主要就是布局里的东西，比如input和textarea的placeholder属性的字体样式默认是不同的，以及输入框怎...
个人作品集项目
02-14
在IT行业中，个人作品集项目是展示技能和经验的重要方式，尤其对于前端开发者而言。这个“个人作品集项目”很可能是一个静态网站或者一个简单的应用程序，它利用了多种技术和设计元素来创造出一个吸引人的在线存在。...
个人作品集：展示我的个人作品的作品集
02-11
在IT行业中，一个个人作品集是展示技能和经验的重要途径，尤其对于网页设计师、前端开发者或是数字艺术家来说更是如此。这个“个人作品集：展示我的个人作品的作品集”项目，显然是一个HTML创建的在线个人简历或者...
Portfolio-Page:freeCodeCamp 响应式网页设计证书的作品集页面
05-31
投资组合页面 freeCodeCamp 响应式网页设计证书的作品集页面 为 fCC 项目完成。 随着时间的推移，这肯定会被重新设计并添加更多内容。 主图像是我用尼康D34拍摄的照片。 使用的调色板： : GitHub io: 版权所有 (c) 2020 罗伯特·德斯蒙德
portfolio:我在2020年为freeCodeCamp的挑战之一而创建的个人投资组合页面的改进版本
04-10
＃文件夹 使用HTML，CSS，Bootstrap和JS创建的个人作品集页面。 :backhand_index_pointing_right: 现场演示可以在找到。 初始版本| 使用过HTML，CSS和JS 从中学到应用 最终版本| 还使用了Bootstrap 改良设计 使用Bootstrap来提高响应速度 添加了“体验”部分，并删除了“联系”部分中的表格 在项目部分使用轮播，而不仅仅是显示图像
freecodecamp//响应式 Web 设计//项目实战——1制作一个致敬业（Build a Tribute Page）
weixin_37877794的博客
08-19 1000
项目的具体要求见：https://learn.freecodecamp.one/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/ 本人自己写的代码详情在：https://codepen.io/janmie-cjm/pen/rNeLPVZ HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
freecodecamp新手自己写的第一个网页
weixin_34088838的博客
03-01 186
刚刚开始学习HTML+CSS,好的开始是成功的一半！http://s.codepen.io/lance19595/debug/yMeJJw/bZMQWyWwovpA 转载于:https://blog.51cto.com/12643561/1902484
学习FreeCodeCamp//响应式网页设计笔记记录 //制作一个致敬页
weixin_45931377的博客
12-03 672
第一次写博客不知道说什么直接上代码： <html> <style> #main { background-color: #F0FFFF; width: 100%; height: 100%; } #img-div { background-color: #F5F5DC; width: 90%; height: 45%; margin: 0 auto; } #image { max-width:...
小小flash作品全集
最新发布
05-12
小小flash作品全集是一个包含多个小型flash作品的集合。这些作品通常是由个人或团队在业余时间所制作的，涵盖了不同风格和主题的内容。 这些小小flash作品可以是游戏、动画、交互式教育课件等等，都以flash技术为基础。作品中可能会包括精美的画面、有趣的音效、流畅的动画以及有趣的互动方式，同时还可能有各种各样的挑战或游戏关卡，吸引着玩家或观众的注意力。 小小flash作品全集往往充满了可爱、有趣、创新的元素，让人们在轻松的娱乐中不知不觉中积累知识、提高思维能力、增强耐性和勇气。 同时，小小flash作品全集也是一些优秀的创意和设计的展示平台，让不少业余设计师和动画爱好者获得了展示自己作品的机会。 总之，小小flash作品全集不仅是一项有趣的娱乐活动，也是一种创意和设计的体现，可以带给人们很多快乐和启示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值