51工具盒子令她反感的，远不是世界的丑陋，而是这个世界所戴的漂亮面具。------《不能承受的生命之轻》
代码如下：
|------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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 | hljs tsx import React from "react"; import clsx from "clsx"; import styles from './index.module.css'; import Layout from "@theme/Layout"; function HomepageHeader() { return ( <header className={clsx('hero', styles.heroBanner)}> <div className={clsx(styles.heroContainer)}> <img className={clsx(styles.heroBannerImg)} src="/brand-kit/homepage-programmer.webp" alt="Programmer"/> <div className={clsx(styles.heroTitleBanner)}> <h1 className="hero__title"> <div>Manage Data in Petabytes</div> <div className={clsx(styles.heroTitleRounds)}> with{' '} <span className={clsx(styles.heroTitleRound)}>Massive Write</span> <span className={clsx(styles.heroTitleRound)}>Any Scale Read</span> <span className={clsx(styles.heroTitleRound)}>Flexible Schema</span> </div> </h1> <div className={clsx(styles.heroBtns)}> <a href="/contact" className={clsx(styles.heroBtn)}>Contact Us</a> <a href="/blog" className={clsx(styles.heroBtn)}>Blog</a> </div> </div> </div> </header> ); } export default function Home(): React.JSX.Element { return ( <Layout description="ScopeDB is a database built directly on top of S3 and unleashes the power of cloud elasticity and workload isolation."> <HomepageHeader/> <main/> </Layout> ); } |
css如下
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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 | hljs css /** * CSS files with the .module.css suffix will be treated as CSS modules * and scoped locally. */ .heroBanner { padding: 4rem 0; position: relative; overflow: hidden; display: flex; justify-content: center; } @media screen and (max-width: 996px) { .heroBanner { padding: 2rem; } } .buttons { display: flex; align-items: center; justify-content: center; } .heroContainer { display: flex; } .heroBannerImg { height: 700px; } .heroTitleBanner { display: flex; flex-direction: column; justify-content: center; } .heroTitleRounds { display: flex; width: 200px; overflow: visible; } .heroTitleRound { opacity: 0; animation: fadeInOut 9s infinite; white-space: nowrap; color: #3071a9; } .heroTitleRound:nth-child(1) { animation-delay: 0s; } .heroTitleRound:nth-child(2) { animation-delay: 3s; } .heroTitleRound:nth-child(3) { animation-delay: 6s; } @keyframes fadeInOut { 0%, 33.33% { opacity: 1; } 33.33%, 100% { opacity: 0; display: none; } } .heroBtns { display: flex; justify-content: center; gap: 10%; margin-top: 20px;; scale: 1.1; } .heroBtn { padding: 10px 16px; border-radius: 12px; margin: 5px; background: rgb(25 91 255); color: #fff; font-family: Poppins, sans-serif; transition: all .25s; cursor: pointer; } .heroBtn:hover { color: #fff; text-decoration: none; box-shadow: 0 10px 20px -10px rgb(25 91 255); transform: translateY(-3px); } |
