Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

정인영 과제 완성 #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

정인영 과제 완성 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,96 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="./imgs/likelion_logo.svg" />
<title>LIKELION SOGANG</title>
</head>
<body>
<!-- Header -->
<header id="header">
<nav id="header__nav">
<a href="./index.html">
<div class="header__logo">
<img
src="./imgs/likelion_logo.svg"
alt="logo"
id="header__logo__img"
/>
<h1>LIKELION <span id="span__red">SOGANG</span></h1>
</div>
</a>

<ul class="header__link">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- Navbar -->

<!-- Home -->
<section id="home">
<div class="home__profile">
<img
src="./imgs/likelion_white_logo.svg"
alt="logo_white"
id="home__logo__img"
/>
<h2>POSSIBILITY TO REALITY</h2>
</div>
<div class="home__description">
<h3>꿈꾸는 자들에게 가능성을</h3>
<h3>현실로 구현하기 위한 도구를 제공합니다.</h3>
</div>
</section>

<!-- About -->
<section id="about">
<div class="about__activity__container">
<div class="about__activity">
<div class="about__activity__img">
<img src="./imgs/OT.jpg" />
</div>
<h2 class="about__activity__tile">매주 Lion Sprint 진행</h2>
<h3 class="about__activity__subtitle">
중앙 멋쟁이사자처럼에서 제공하는 체계적인 강의와 멋쟁이사자처럼
서강대학교 운영진만의 심화 세션을 통해 웹 서비스에 대한 이해도를
높입니다.
</h3>
</div>
<div class="about__activity">
<div class="about__activity__img">
<img src="./imgs/project.jpg" />
</div>
<h2 class="about__activity__tile">실제 서비스 개발</h2>
<h3 class="about__activity__subtitle">
웹 서비스 지식을 기반으로 실제 웹서비스를 제작합니다. 멋쟁이사자처럼
서강대학교에서는 전통적으로 서강대학교 축제 웹사이트를
제작해왔습니다.
</h3>
</div>
<div class="about__activity">
<div class="about__activity__img">
<img src="./imgs/hackathon.jpg" />
</div>
<h2 class="about__activity__tile">전국 규모 해커톤 참가</h2>
<h3 class="about__activity__subtitle">
프론트와 백엔드로 팀을 꾸려서 중앙 멋쟁이사자처럼과 신촌 대학교
멋쟁이사자처럼의 해커톤에 참여합니다.
</h3>
</div>
</div>
</section>

<!-- contact -->
<section id="contact">
<div class="contact__button">
<a href="https://www.instagram.com/likelion_sg" target="_blank">
<h2 id="contact__title">CONTACT US !</h2>
</a>
</div>
</section>
</body>
</html>
129 changes: 129 additions & 0 deletions reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
125 changes: 125 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
@font-face {
font-family: "Pretendard";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
format("woff");
}

* {
box-sizing: border-box;
}

html {
font-size: 16px;
background-color: black;
}

body {
font-family: "Pretendard";
}

a {
text-decoration: none;
}

header {
padding: 32px;
position: fixed;
top: 0;
width: 100%;
}

nav {
display: flex;
justify-content: space-between;
}

.header__logo {
display: flex;
align-items: center;
}

.header__logo img {
width: 60px;
height: 60px;
}
.header__logo h1 {
font-size: 2rem;
color: white;
}
.header__logo h1 span {
color: red;
}

ul.header__link {
display: flex;
gap: 2rem;
align-items: center;
}

ul.header__link li a {
color: white;
}

section#home {
margin-top: 100px;
}

section#home .home__profile {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}

section#home .home__profile img {
width: 80%;
}

section#home .home__description {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

section#home .home__description h3 {
color: white;
line-height: 150%;
}

section#home .home__profile h2 {
color: white;
font-size: 2rem;
}

.about__activity__container {
display: flex;
margin-top: 50px;
gap: 30px;
justify-content: center;
width: 100%;
}

.about__activity__container .about__activity {
width: 30%;
}

.about__activity__container .about__activity img {
width: 100%;
border-radius: 100%;
}

.about__activity__container .about__activity h2 {
font-size: 2rem;
color: white;
margin-top: 30px;
text-align: center;
}

.about__activity__container .about__activity h3 {
font-size: 0.8rem;
color: white;
margin-top: 40px;
text-align: center;
line-height: 150%;
}