천현우 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
8d8d429e 2 parents 63d0e4a2 0f267d55

Merge branch 'html' into 'main' 

Html_Home



See merge request !2
Inline Side-by-side
Showing 6 changed files with 248 additions and 11 deletions
1 +* {
2 + color:#ffc947;
3 +}
4 +
5 +button:hover {
6 + color:crimson;
7 + background: beige
8 +}
9 +p{
10 + font-size: 50px;
11 + background-color:#ff9800;
12 + color:#f4ff81;
13 +}
14 +button{
15 +
16 + background-color:#c66900;
17 + height: 70px;
18 + width: 300px;
19 + border-width: 2px;
20 + border-style: solid;
21 + border-color: black;
22 + display:block;
23 + font-size: 50px;
24 + font-weight: bold;
25 + display: inline-block;
26 +}
27 +.container{
28 + height:200px;
29 + display:flex;
30 + flex-direction: row;
31 + flex-wrap:nowrap;
32 +}
33 +#start{
34 + margin-right: 150px;
35 + position:relative;
36 + height: 70px;
37 + width: 300px;
38 + border-width: 2px;
39 + border-style: solid;
40 + border-color: black;
41 + font-size: 50px;
42 + font-weight: bold;
43 + display:flex;
44 + flex-direction: row;
45 + flex-wrap:nowrap;
46 +}
47 +#end{
48 + margin-left: 150px;
49 + position:relative;
50 + height: 70px;
51 + width: 300px;
52 + border-width: 2px;
53 + border-style: solid;
54 + border-color: black;
55 + font-size: 50px;
56 + font-weight: bold;
57 + display:flex;
58 + flex-direction: row;
59 + flex-wrap:nowrap;
60 +}
61 +#text{
62 + font-family: 'Do Hyeon', sans-serif;
63 + font-size: 50px;
64 + opacity: 1;
65 + color: gray;
66 + width: 500px;
67 + margin : 0 auto;
68 + display: inline-block;
69 +}
70 +#post{
71 + font-family: 'Do Hyeon', sans-serif;
72 + font-size: 50px;
73 + opacity: 1;
74 + color: gray;
75 + width: 500px;
76 + margin : 0 auto;
77 + display: inline-block;
78 +}
79 +#python{
80 + font-family: 'Do Hyeon', sans-serif;
81 + font-size: 50px;
82 + opacity: 1;
83 + width: 100px;
84 + margin : 0 auto;
85 + display:block;
86 + align-self: center;
87 +}
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 + <link href="Voico_Home.css" rel="stylesheet">
4 <meta charset="utf-8"> 5 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-"> 6 <meta name="viewport" content="width=device-width, initial-">
7 + <link rel="preconnect" href="https://fonts.gstatic.com">
8 + <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Serif+KR:wght@500&family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
9 + <title>Voicoding</title>
6 </head> 10 </head>
11 +
7 <body> 12 <body>
8 - <ol id = "specail" type = "I"> 13 + <p>Voicoding <img src="voico_0.jpg" width=auto height="200"></p>
9 - <li>1</li> 14 + <div id = "project">
10 - <li>2</li> 15 + <h1>
11 - <li>3</li> 16 + <p style="text-align: center;">프로젝트 설명</p> <br>
12 - </ol> 17 + 코딩하기 귀찮은 당신을 위해 준비했습니다<br>
13 - <button> 18 + 당신이 코딩하고 싶은 대로 말만 한다면 저희가 다 이루어 드릴게요!<br>
14 - Start 19 + <a href="http://">매뉴얼링크</a> <br>
15 - </button> 20 + 별로 성가시지 않는 매뉴얼이랑 조금만 따라와 주신다면 바로 코딩 해드릴게요!
16 - <button> 21 + </h1>
17 - Exit 22 + </div>
18 - </button> 23 + <div class="container">
24 + <button id="start">Start</button>
25 + <button id="end">Exit</button>
26 + </div>
27 + <span class="container" id = "text">
28 + 변환전
29 + <li>
30 + 안녕하세요 say something
31 + </li>
32 + </span>
33 + <span id = "post">
34 + 변환후
35 + <li>
36 + 반갑습니다 say something
37 + </li>
38 + </span>
39 + <button id = "python">실행</button>
19 </body> 40 </body>
20 </html> 41 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +:root{
2 + --text-color:#fffde7;
3 + --background-color:#ff94c2;
4 + --accent-color:#ba2d65;
5 +}
6 +
7 +body{
8 + margin : 0;
9 + font-family: 'Source Sans Pro';
10 +}
11 +a{
12 + text-decoration:none;
13 + color:var(--text-color);
14 +
15 +}
16 +.menu{
17 + display:flex;
18 + justify-content:space-between;
19 + align-items:center;
20 + background-color:var(--background-color);
21 + padding: 8px 12px;
22 +}
23 +.menu_bar_content li:hover{
24 + background-color:var(--accent-color);
25 + border-radius: 4px;
26 +}
27 +.menu_bar_icons li:hover{
28 + background-color:var(--accent-color);
29 + border-radius: 4px;
30 +}
31 +.menu_bar_logo{
32 + font-size: 20px;
33 +
34 +}
35 +.menu_bar_logo i{
36 + color:var(--accent-color);
37 +}
38 +.menu_bar_content{
39 + display:flex;
40 + list-style: none;
41 + padding-left: 0;
42 +}
43 +.menu_bar_content li{
44 + padding: 8px 12px;
45 +}
46 +.menu_bar_icons{
47 + list-style: none;
48 + display: flex;
49 + padding-left:0;
50 +}
51 +.menu_bar_icons li{
52 + padding: 8px 12px;
53 +}
54 +.menu_toggle{
55 + display: none;
56 + position: absolute;
57 + right:32px;
58 + font-size: 24px;
59 +}
60 +@media screen and (max-width: 500px) {
61 + .menu{
62 + flex-direction: column;
63 + align-items: flex-start;
64 + padding: 8px 24px;
65 + }
66 + .menu_bar_content{
67 + display:none;
68 + flex-direction:column;
69 + align-items:center;
70 + width: 100%;
71 + }
72 + .menu_bar_content li{
73 + width: 100%;
74 + text-align: center;
75 + }
76 + .menu_bar_icons{
77 + display:none;
78 + justify-content: center;
79 + width: 100%;
80 + }
81 + .menu_toggle{
82 + display: block;
83 + }
84 + .menu_bar_content.active,
85 + .menu_bar_icons.active{
86 + display:flex;
87 + }
88 +}
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <link href="Voico_Menu.css" rel="stylesheet" type="text/css">
5 + <meta charset="UTF-8">
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 + <title>Voicoding</title>
9 + <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 + <script src="menu.js" defer></script>
11 + <link rel="preconnect" href="https://fonts.gstatic.com">
12 + <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 +</head>
14 +<body>
15 + <nav class="menu">
16 + <div class="menu_bar_logo">
17 + <i class="fas fa-microphone-alt"></i>
18 + <a href="Voico_Home.html">Voicoding</a>
19 + </div>
20 + <ul class="menu_bar_content">
21 + <li><a href="Voico_Home.html">Home</a></li>
22 + <li><a href="">Manual</a></li>
23 + <li><a href="">Contact</a></li>
24 + </ul>
25 + <ul class="menu_bar_icons">
26 + <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
27 + <li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
28 + </ul>
29 + <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
30 + </nav>
31 +
32 +</body>
33 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +const toggleBtn = document.querySelector('.menu_toggle');
2 +const menu = document.querySelector('.menu_bar_content');
3 +const icons = document.querySelector('.menu_bar_icons');
4 +
5 +toggleBtn.addEventListener('click', () => {
6 + menu.classList.toggle('active');
7 + icons.classList.toggle('active');
8 +})
...\ No newline at end of file ...\ No newline at end of file
No preview for this file type