hicodingclub / club-website-frontend

The official club website frontend source code for HiCoding Club
0 stars 1 forks source link

Member Page HTML Layout #6

Closed toliujiayi closed 4 years ago

toliujiayi commented 4 years ago

The hand-drawn layout is in the following link: https://drive.google.com/open?id=1MaHhauleCgaIi13A2AEFYeFLWINLHWMV

KL1217 commented 4 years ago

`<!DOCTYPE html>

Memebrs Member Picture

What we do

There should be a paragraph here

There should be text here

Teams

Web Development

Quality Assurance




Board Members

`
KL1217 commented 4 years ago

`*{ box-sizing: border-box; }

.mission{ background-color: rgb(56, 109, 189); width: 50%; color: white; padding: 15px; text-align: center; border-radius: 15px; font-size: 36px; }

.p1{ width: 50%; float: right; height: 304px; }

.button { position: relative; display: inline-block;

}

.button .hovertext{ visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; font-size: 15px; }

.button:hover .hovertext { visibility: visible; }

join{

background-color: rgb(56, 109, 189);
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;

}

.btn{ text-align: center; padding: 5px; }

.btn1, .btn2, .btn3, .btn4{ background-color: white; text-align: center; color: #3498DB; border: none; cursor: pointer; } .btn1:hover, .btn1:focus, .btn2:hover, .btn2:focus, .btn3:hover, .btn3:focus, .btn4:hover, .btn4:focus { color: #2980B9; }

.p2{ background-color: rgb(56, 109, 189); width: 92%; padding: 15px; }

.container{ display: table; width: 100%; }

.col{ display: table-cell; padding: 16px; border: 1px solid black; border-radius: 20px; box-shadow: 2px 0 0 0 #888, 0 2px 0 0 #888, 2px 2px 0 0 #888,
2px 0 0 0 #888 inset, 0 2px 0 0 #888 inset; }

@media only screen and (max-width: 600px){ .col{ display: block; width: 100%; } }`