Course_FromCodeToReal/index.html at main · JunWang666/Course_FromCodeToReal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>王君威</title>
  <link href="styles/style.css" rel="stylesheet" />
  <link href="styles/card.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

  <style>
    /* 清除默认边距，确保全屏 */
    body, html {
      margin: 0;
      padding: 0;
    }

    /* 首屏全屏大图容器 */
    .hero-section {
      height: 100vh; /* 100% 视口高度 */
      background-image: url('image/mainpost.jpg');
      background-size: cover; /* 图片等比例缩放铺满 */
      background-position: center; /* 图片居中显示 */
      position: relative;
    }

    /* 左下角文字区域 */
    .bottom-left-text {
      position: absolute;
      bottom: 50px;
      left: 50px;
      color: white; /* 假设大图偏暗，使用白字。如果图亮可以改黑色 */
      text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* 加点阴影防止看不清 */
    }

    .signature {
      font-size: 28px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .name {
      font-size: 16px;
      opacity: 0.9;
    }

    /* 下方的内容区 */
    .content-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }

    .social-links {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <div class="hero-section">
    <div class="bottom-left-text">
      <div class="signature">
        发现把脑子放在枕头上，<br>
        眼睛闭上几个小时，会很舒服
      </div>
      <div class="name">计算机茅班 王君威</div>
    </div>
  </div>

  <div class="content-container">
    <div class="social-links">
      <a href="https://blogs.goudaijun.top/" class="icon-link">
        <i class="fa-solid fa-blog"></i> Blogs
      </a>
      <a href="https://github.com/JunWang666" class="icon-link">
        <i class="fa-brands fa-github"></i> Github
      </a>
    </div>

    <div class="divider"></div>

    <div class="content-section">
      <h2>课程记录</h2>
      <a href="content/week1.html" class="card-link">
        <p class="card-title">Week1</p>
        <p class="card-desc">HTML Log</p>
      </a>
      <a href="content/week2.html" class="card-link">
        <p class="card-title">Week2</p>
        <p class="card-desc">SolidWorks 基本操作</p>
      </a>
      <a href="content/week3.html" class="card-link">
        <p class="card-title">Week3</p>
        <p class="card-desc">Bambu Studio 学习报告</p>
      </a>
      <a href="content/week5.html" class="card-link">
        <p class="card-title">Week5</p>
        <p class="card-desc">焊接实践</p>
      </a>
      <a href="content/week6.html" class="card-link">
        <p class="card-title">Week6</p>
        <p class="card-desc">ESP32开发学习</p>
      </a>
      <a href="content/pcb.html" class="card-link">
        <p class="card-title">PCB设计</p>
        <p class="card-desc">PCB设计学习</p>
      </a>
      <a href="content/mojv.html" class="card-link">
        <p class="card-title">金属铸造与沙模制作</p>
        <p class="card-desc">金属铸造与沙模制作</p>
      </a>
      <a href="content/middle.html" class="card-link">
        <p class="card-title">中期项目报告</p>
        <p class="card-desc">中期项目报告：外壳设计与结构建模</p>
      </a>
      <a href="https://blogs.goudaijun.top/p/260530/" class="card-link">
        <p class="card-title">Hackson-Day1</p>
        <p class="card-desc">我们希望做一个足够小巧且时尚的环境检测设备，可以一直被当作挂件随身携带，24小时的检测你身边的环境信息，汇总数据并给出建议。</p>
      </a>
      <a href="content/hackson_2.html" class="card-link">
        <p class="card-title">Hackson-Day2</p>
        <p class="card-desc">Hackathon Day 2：算法、签名与硬件调试</p>
      </a>
    </div>
  </div>

  <script src="scripts/main.js"></script>
</body>

</html>