Adwaith Rao
4 年前
共有 2 个文件被更改，包括 54 次插入 和 10 次删除
合并视图
Diff 选项
-
+41 -3css/style.css
-
+13 -7index.html
+ 41
- 3
css/style.css
查看文件
| @@ -17,17 +17,55 @@ body { | |||||
| font-weight: 700; | font-weight: 700; | ||||
| } | } | ||||
| .background { | |||||
| position: absolute; | |||||
| background-color: #161616; | |||||
| width: 100%; | |||||
| height: 60vh; | |||||
| overflow: hidden; | |||||
| } | |||||
| .background::after { | |||||
| content: ""; | |||||
| position: absolute; | |||||
| bottom: -30px; | |||||
| left: -20%; | |||||
| width: 140%; | |||||
| height: 60px; | |||||
| background: white; | |||||
| border-radius: 50%; | |||||
| } | |||||
| .foreground { | |||||
| position: relative; | |||||
| padding: 1px; | |||||
| } | |||||
| header{ | header{ | ||||
| text-align: center; | text-align: center; | ||||
| color : white; | |||||
| margin: 110px auto 20px; | |||||
| } | } | ||||
| .tabs-holder { | .tabs-holder { | ||||
| width: 75%; | |||||
| margin: 0 auto; | |||||
| text-align: center; | text-align: center; | ||||
| padding: 10px; | |||||
| background-color : #222222; | |||||
| color: white; | |||||
| border-radius: 500px; | |||||
| display: grid; | |||||
| grid-template-columns: 0.5fr 0.5fr; | |||||
| } | } | ||||
| .tab { | .tab { | ||||
| border-radius : 4px; | border-radius : 4px; | ||||
| background-color : green; | |||||
| color : white; | |||||
| padding: 10px; | |||||
| border-radius: 500px; | |||||
| font-size: 13px; | |||||
| } | |||||
| .tab.active { | |||||
| background-color : #59c692; | |||||
| } | } | ||||
+ 13
- 7
index.html
查看文件
| @@ -10,15 +10,21 @@ | |||||
| <link rel="stylesheet" href="./css/style.css"> | <link rel="stylesheet" href="./css/style.css"> | ||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <header> | |||||
| <h1>Work With Us</h1> | |||||
| <h4>Totally we have 11 job openings</h4> | |||||
| </header> | |||||
| <div class="tabs-holder"> | |||||
| <section class="tab">Employment</section> | |||||
| <div class="background"></div> | |||||
| <div class="foreground"> | |||||
| <header> | |||||
| <h1>Work With Us</h1> | |||||
| <h4>Totally we have 11 job openings</h4> | |||||
| </header> | |||||
| <div class="tabs-holder"> | |||||
| <section class="tab active">Employment</section> | |||||
| <section class="tab">Internship</section> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </body> | </body> | ||||
| </html> | </html> | ||||