33 lines
8.2 KiB
HTML
33 lines
8.2 KiB
HTML
<!doctype html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="./assets/favicon.ico">
|
|
<title>دفتر انجمن — طرح B</title>
|
|
<style>
|
|
@font-face{font-family:Vazir;src:url('./assets/Vazirmatn-variable.woff2') format('woff2');font-display:swap}
|
|
:root{--navy:#14243f;--blue:#42649a;--paper:#fff9ea;--cream:#f1e8d0;--gold:#f0be54;--white:#fff;--line:#b8b2a4}
|
|
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--navy);font:400 16px/1.85 Vazir,Tahoma,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}::selection{background:var(--gold);color:var(--navy)}
|
|
.wrap{width:min(100% - 56px,1240px);margin:auto}.header{background:var(--navy);color:var(--white);border-bottom:1px solid #66758e}.header .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:92px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand img{height:52px;width:52px;object-fit:contain}.brand span{font-size:14px;font-weight:750;max-width:250px;line-height:1.5}.header nav{display:flex;gap:26px}.header nav a{color:#ecf0f7;text-decoration:none;text-underline-offset:9px;font-size:14px}.header nav a:hover,.header nav a:focus-visible{text-decoration:underline}
|
|
.cover{background:var(--navy);color:var(--paper);overflow:hidden}.cover .wrap{padding-block:70px 90px;display:grid;grid-template-columns:1.3fr .7fr;gap:8%;min-height:620px;align-items:end}.headline{position:relative}h1{font-weight:900;font-size:clamp(48px,7.3vw,112px);letter-spacing:-.035em;line-height:1.16;margin:0;max-width:12ch}h1 span{display:block;color:var(--gold)}.headline:after{content:"";display:block;width:70%;height:1px;background:#8190a3;margin-top:36px}.cover-note{align-self:center;border-top:2px solid var(--gold);background:var(--paper);color:var(--navy);padding:28px 30px 32px}.cover-note p{font-size:19px;line-height:1.8;margin:0 0 24px}.cover-note a{display:inline-block;font-weight:750;text-underline-offset:5px}.cover-note strong{display:block;font-size:13px;color:#49628b;margin-bottom:18px}
|
|
.ribbon{background:var(--gold);padding:16px 0}.ribbon .wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap;font-weight:750}.ribbon span{margin-left:auto}.ribbon a{text-decoration:none;border-bottom:1px solid currentColor}.ribbon a:hover{text-decoration:underline}
|
|
.chapter{padding-block:88px 100px}.chapter-head{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding-bottom:40px;border-bottom:2px solid var(--navy)}.chapter h2{font-size:clamp(36px,4.2vw,62px);line-height:1.25;margin:0}.chapter-head p{font-size:21px;line-height:1.8;margin:0}.ledger{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.ledger div{padding:30px 22px 32px;border-left:1px solid var(--line)}.ledger div:first-child{padding-right:0}.ledger div:last-child{border:0}.ledger h3{font-size:23px;margin:0 0 10px}.ledger p{margin:0;color:#384c69}
|
|
.about{background:var(--cream);padding-block:92px}.about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}.about aside{border-top:2px solid var(--navy);padding-top:22px}.about aside img{width:86px;height:86px;object-fit:contain}.about h2{font-size:clamp(38px,5vw,70px);line-height:1.2;margin:15px 0 26px}.about .name{font-weight:760;font-size:20px;line-height:1.7}.about article{padding-top:34px}.about article p{font-size:20px;line-height:2;max-width:44ch;margin:0 0 32px}.about dl{border-top:1px solid var(--navy);margin:0}.about dl div{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid var(--line);gap:20px;padding:18px 0}.about dt{font-weight:800}.about dd{margin:0;overflow-wrap:anywhere}.about dd a{text-underline-offset:4px}
|
|
.end{background:var(--navy);color:var(--paper);padding:58px 0}.end .wrap{display:flex;justify-content:space-between;align-items:end;gap:30px}.end p{margin:0;font-weight:700;font-size:22px;max-width:30ch}.end a{color:var(--gold);white-space:nowrap}
|
|
@media(max-width:820px){.wrap{width:min(100% - 32px,1240px)}.header .wrap{min-height:75px}.brand img{width:42px;height:42px}.brand span{font-size:12px}.header nav{display:none}.cover .wrap{grid-template-columns:1fr;gap:52px;min-height:0;padding-block:52px 68px}.cover-note{max-width:550px}.ribbon .wrap{gap:12px}.ribbon span{width:100%}.chapter{padding-block:58px}.chapter-head{grid-template-columns:1fr;gap:17px}.chapter-head p{font-size:18px}.ledger{grid-template-columns:1fr}.ledger div,.ledger div:first-child{padding:23px 0;border-left:0;border-bottom:1px solid var(--line)}.ledger div:last-child{border:0}.about{padding-block:60px}.about .wrap{grid-template-columns:1fr;gap:20px}.about article{padding-top:0}.about article p{font-size:18px}.end .wrap{display:block}.end a{display:inline-block;margin-top:22px}}
|
|
@media(max-width:400px){h1{font-size:45px}.about dl div{grid-template-columns:1fr;gap:3px}.cover-note{padding:22px}}
|
|
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header"><div class="wrap"><a class="brand" href="#top"><img src="./assets/favicon.ico" alt="نشان فعلی انجمن"><span>انجمن علمی مهندسی کامپیوتر<br>دانشکدهی فنی و مهندسی شرق گیلان</span></a><nav aria-label="ناوبری طرح"><a href="#top">آغاز</a><a href="#chapter">فعالیتها</a><a href="#about">درباره انجمن</a></nav></div></header>
|
|
<main id="top">
|
|
<section class="cover" aria-labelledby="cover-title"><div class="wrap"><div class="headline"><h1 id="cover-title">انجمن برای <span>یاد گرفتن با هم</span></h1></div><div class="cover-note"><strong>انجمن علمی مهندسی کامپیوتر دانشگاه گیلان</strong><p>در دانشکدهی فنی و مهندسی شرق گیلان، فعالیت انجمن فرصتی برای یادگیری، اشتراک دانش و مشارکت دانشجویان است.</p><a href="#about">انجمن را بشناسید</a></div></div></section>
|
|
<div class="ribbon"><div class="wrap"><span>برای آشنایی با فعالیتها</span><a href="#chapter">برنامههای انجمن</a><a href="#about">مأموریت و ارتباط</a></div></div>
|
|
<section id="chapter" class="chapter wrap" aria-labelledby="chapter-title"><div class="chapter-head"><h2 id="chapter-title">فعالیتهای انجمن</h2><p>از رویدادهای تخصصی تا نوشتههای آموزشی، برنامهها برای یادگیری و ارتباط میان دانشجویان شکل میگیرند.</p></div><div class="ledger"><div><h3>رویدادها</h3><p>کارگاهها، سمینارها و نشستهای علمی.</p></div><div><h3>محتوا</h3><p>مقالات آموزشی و یادداشتهای تخصصی.</p></div><div><h3>همکاری</h3><p>مشارکت دانشجویان و اشتراک تجربه.</p></div></div></section>
|
|
<section id="about" class="about" aria-labelledby="about-title"><div class="wrap"><aside><img src="./assets/favicon.ico" alt="نشان فعلی انجمن"><h2 id="about-title">درباره انجمن</h2><p class="name">انجمن علمی مهندسی کامپیوتر دانشگاه گیلان (دانشکدهی فنی و مهندسی شرق گیلان)</p></aside><article><p>مأموریت انجمن، توانمندسازی دانشجویان با مهارتهای موردنیاز صنعت، ایجاد شبکههای حرفهای و فراهمکردن مسیرهای یادگیری پروژهمحور است.</p><dl><div><dt>ایمیل</dt><dd><a dir="ltr" href="mailto:eastguilanceassociation@gmail.com">eastguilanceassociation@gmail.com</a></dd></div><div><dt>تلگرام</dt><dd><a dir="ltr" href="https://t.me/guilancea">t.me/guilancea</a></dd></div><div><dt>اینستاگرام</dt><dd><a dir="ltr" href="https://instagram.com/guilance.ir">instagram.com/guilance.ir</a></dd></div></dl></article></div></section>
|
|
</main><footer class="end"><div class="wrap"><p>یادگیری پیوسته و اشتراک دانش، از ارزشهای انجمن است.</p><a href="#top">بازگشت به آغاز</a></div></footer>
|
|
</body>
|
|
</html>
|