2021-1-open-source / BaseBallSimulator

Go to a project
Toggle navigation Toggle navigation pinning
정주희
4cdcab3d 1 parent 68b5746d

html_css_updated

Inline Side-by-side
Showing 9 changed files with 641 additions and 24 deletions
body{
background-image:url(https://t1.daumcdn.net/cfile/blog/155A204A5026656D0E);
background-repeat: no-repeat;
background-size: cover;
}
.container1{
display:flex;
justify-content: center;
align-items: baseline;
padding:50px 0px 0px 0px;
}
.logo{
font-size:40px;
color:white;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#menu{
margin:60px 250px 0px 250px;
height:90px;
width:1000px;
}
#menu ul li{
list-style:none;
color:white;
background-color:#011638;
float:left;
line-height:30px;
vertical-align:middle;
text-align:center;
display:inline;
}
#menu .me{
text-decoration:none;
color:white;
display:inline-block;
width:250px;
font-size:20px;
font-weight:bold;
font-family: "Trebuchet MS", Dotum, Arial;
}
#menu .me:hover{
color:#D499B9;
background-color: #2E294E;
}
.row{
display:flex;
justify-content: space-evenly;
padding: 0px 0px 50px 0px;
}
<!DOCTYPE html>
<html>
<head>
<title> Calendar </title>
<link rel="stylesheet" type="text/css"href="calendar.css">
</head>
<body>
<div class="container1">
<span class="logo">Welcome to Baseball Simulator</span>
</div>
<nav id="menu">
<ul>
<li>
<a class="me" href="main.html">Home</a>
</li>
<li>
<a class="me" href="introduction.html">Introduction</a>
</li>
<li>
<a class="me" href="calendar.html">Calendar</a>
</li>
<li>
<a class="me" href="simulation.html">Simulation</a>
</li>
</ul>
</nav>
<div class="container2">
<div class="row row1">
<span class="item1">
<a href="http://www.statiz.co.kr/team.php?opt=0&sopt=1&year=2021&team=%EC%82%BC%EC%84%B1">
<img src="pngs/samsung.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item2">
<a href="http://www.statiz.co.kr/team.php?opt=0&sopt=1&year=2021&team=NC">
<img src="pngs/nc.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item3">
<a href="http://www.statiz.co.kr/team.php?opt=0&sopt=1&year=2021&team=LG">
<img src="pngs/LG.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item4">
<a href="http://www.statiz.co.kr/team.php?opt=0&sopt=1&year=2021&team=KT">
<img src="pngs/kt.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item5">
<a href="http://www.statiz.co.kr/team.php?opt=0&sopt=1&year=2021&team=SSG">
<img src="pngs/ssg.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
</div>
<div class="row row2">
<span class="item6">
<a href="http://www.statiz.co.kr/team.php?cteam=%EB%91%90%EC%82%B0%2BOB&year=2021&opt=0&sopt=1">
<img src="pngs/dusan.png" style="display:block; margin:0 auto; width:150px; height:150px;"alt="">
</a>
</span>
<span class="item7">
<a href="http://www.statiz.co.kr/team.php?cteam=%ED%9E%88%EC%96%B4%EB%A1%9C%EC%A6%88&year=2021&opt=0&sopt=1">
<img src="pngs/kiwoom.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item8">
<a href="http://www.statiz.co.kr/team.php?opt=0&sopt=1&year=2021&team=KIA">
<img src="pngs/kia.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item9">
<a href="http://www.statiz.co.kr/team.php?cteam=%ED%95%9C%ED%99%94%2B%EB%B9%99%EA%B7%B8%EB%A0%88&year=2021&opt=0&sopt=1">
<img src="pngs/hanhwa.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
<span class="item10">
<a href="http://www.statiz.co.kr/team.php?cteam=%EB%A1%AF%EB%8D%B0&year=2021&opt=0&sopt=1">
<img src="pngs/Lotte.png" style="display:block; margin:0 auto; width:150px; height:150px;" alt="">
</a>
</span>
</div>
</div>
</body>
</html>
body{
background-image:url(https://t1.daumcdn.net/cfile/blog/155A204A5026656D0E);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container1{
display:flex;
justify-content: center;
align-items: baseline;
padding:50px 0px 0px 0px;
}
.logo{
font-size:40px;
color:white;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#menu{
margin:60px 250px 0px 250px;
height:90px;
width:1000px;
}
#menu ul li{
list-style:none;
color:white;
background-color:#011638;
float:left;
line-height:30px;
vertical-align:middle;
text-align:center;
display:inline;
}
#menu .me{
text-decoration:none;
color:white;
display:inline-block;
width:250px;
font-size:20px;
font-weight:bold;
font-family: "Trebuchet MS", Dotum, Arial;
}
#menu .me:hover{
color:#D499B9;
background-color: #2E294E;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title> Introduction </title>
<link rel="stylesheet" type="text/css"href="introduction.css">
</head>
<body>
<div class="container1">
<span class="logo">Welcome to Baseball Simulator</span>
</div>
<nav id="menu">
<ul>
<li>
<a class="me" href="main.html">Home</a>
</li>
<li>
<a class="me" href="introduction.html">Introduction</a>
</li>
<li>
<a class="me" href="calendar.html">Calendar</a>
</li>
<li>
<a class="me" href="simulation.html">Simulation</a>
</li>
</ul>
</nav>
</body>
</html>
body{
background-image:url(https://t1.daumcdn.net/cfile/blog/155A204A5026656D0E);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container1{
display:flex;
justify-content: center;
align-items: baseline;
padding:50px 0px 0px 0px;
}
.logo{
font-size:40px;
color:white;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#menu{
margin:60px 250px 0px 250px;
height:90px;
width:1000px;
}
#menu ul li{
list-style:none;
color:white;
background-color:#011638;
float:left;
line-height:30px;
vertical-align:middle;
text-align:center;
display:inline;
}
#menu .me{
text-decoration:none;
color:white;
display:inline-block;
width:250px;
font-size:20px;
font-weight:bold;
font-family: "Trebuchet MS", Dotum, Arial;
}
#menu .me:hover{
color:#D499B9;
background-color: #2E294E;
}
.container2{
width:50%;
height:600px;
float:left;
}
.container3{
width:50%;
height:200px;
float:left;
}
.container4{
width:20%;
height:400px;
float:left;
}
.container5{
width:30%;
height:400px;
float:left;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title> Baseball Simulator </title>
<span style = "font-size:2.0em; color: white;"><p style="text-align:center;">Welcome to Baseball Simulator</p></span>
<style>
body{
background-image:url(https://t1.daumcdn.net/cfile/blog/155A204A5026656D0E);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<link rel="stylesheet" type="text/css"href="main.css">
</head>
<body>
<input type = "button" name = "go to sim" value = "GO Simulator">
<input type = "button" name = "go to cal" value = "GO Calendar">
<body>
<div class="container1">
<span class="logo">Welcome to Baseball Simulator</span>
</div>
<nav id="menu">
<ul>
<li>
<a class="me" href="main.html">Home</a>
</li>
<li>
<a class="me" href="introduction.html">Introduction</a>
</li>
<li>
<a class="me" href="calendar.html">Calendar</a>
</li>
<li>
<a class="me" href="simulation.html">Simulation</a>
</li>
</ul>
</nav>
<div class="container2">
<a href="https://sports.news.naver.com/kbaseball/record/index.nhn?category=kbo&year=2021"><img src="pngs/rank.jpg" style="display:block; margin:0 auto; width:600px; height:400px;"></a>
</div>
<div class="container3">
<a href="https://sports.news.naver.com/kbaseball/schedule/index.nhn"><img src="pngs/today.jpg" style="display:block; margin:0 auto; width:655px; height:150px;"></a>
</div>
<div class="container4">
<img src="pngs/1.jpg" style="display:block; margin:0 auto; width:200px; height:100px;">
</div>
<div class="container5">
<iframe width="400" height="200" src="https://www.youtube.com/embed/dL_79KkHmQE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>
\ No newline at end of file
</html>
......
File mode changed
body{
background-image:url(https://t1.daumcdn.net/cfile/blog/155A204A5026656D0E);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container1{
display:flex;
justify-content: center;
align-items: baseline;
padding:50px 0px 0px 0px;
}
.logo{
font-size:40px;
color:white;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#menu{
margin:60px 250px 0px 250px;
height:90px;
width:1000px;
}
#menu ul li{
list-style:none;
color:white;
background-color:#011638;
float:left;
line-height:30px;
vertical-align:middle;
text-align:center;
display:inline;
}
#menu .me{
text-decoration:none;
color:white;
display:inline-block;
width:250px;
font-size:20px;
font-weight:bold;
font-family: "Trebuchet MS", Dotum, Arial;
}
#menu .me:hover{
color:#D499B9;
background-color: #2E294E;
}
.container2{
width:25%;
height:600px;
float:left;
}
.team{
font-size:24px;
color:white;
font-family: sans-serif;
text-align:center;
}
.a{
height:50px;
}
.selection{
padding:0px 10px 15px 10px;
height:80px;
}
.t1{
width:50px;
height:30px;
color: #6AAFE6;
border: 1px solid #6AAFE6;
background: white;
font-size:15px;
border-radius:5px;
}
.row{
display:flex;
justify-content: space-evenly;
padding: 0px 5px 10px 0px;
}
.container3{
width:50%;
height:100%;
float:left;
}
.container4{
width:25%;
height:600px;
float:left;
}
.t2{
width:50px;
height:30px;
color: #6f2108;
border: 1px solid #6f2108;
background: white;
font-size:15px;
border-radius:5px;
}
.l{
width:33%;
height:200px;
float:left;
}
.vs{
width:200px;
height:200px;
}
#vss{
font-size:40px;
color:white;
text-align:center;
}
.simul{
height:150px;
display:flex;
float:left;
margin-top:50px;
margin-left:250px;
}
.but{
height:150px;
margin: 0px auto;
}
.simulbtr{
width:250px;
height:50px;
color: #c9d6de;
border: 1px solid #c9d6de;
background: black;
font-size:30px;
border-radius:5px;
}
.tb{
padding: 10px 0px 0px 135px;
}
table{
border: 1px solid #444444;
background-color:white;
border-collapse:collapse;
}
td{
border:1px solid #444444;
padding: 10px;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title> Simulation </title>
<link rel="stylesheet" type="text/css"href="simulation.css">
</head>
<body>
<div class="container1">
<span class="logo">Welcome to Baseball Simulator</span>
</div>
<nav id="menu">
<ul>
<li>
<a class="me" href="main.html">Home</a>
</li>
<li>
<a class="me" href="introduction.html">Introduction</a>
</li>
<li>
<a class="me" href="calendar.html">Calendar</a>
</li>
<li>
<a class="me" href="simulation.html">Simulation</a>
</li>
</ul>
</nav>
<div class="container2">
<div class="a">
<p class="team">원정팀</p>
</div>
<div class="selection">
<div class="row row1">
<button type="submit" class="t1">삼성</button>
<button type="submit" class="t1">NC</button>
<button type="submit" class="t1">LG</button>
<button type="submit" class="t1">KT</button>
<button type="submit" class="t1">SSG</button>
</div>
<div class="row row2">
<button type="submit" class="t1">두산</button>
<button type="submit" class="t1">키움</button>
<button type="submit" class="t1">KIA</button>
<button type="submit" class="t1">한화</button>
<button type="submit" class="t1">롯데</button>
</div>
</div>
<div class="tb">
<table>
<tbody>
<tr>
<td>1번 타자</td><td>-</td>
</tr>
<tr>
<td>2번 타자</td><td>-</td>
</tr>
<tr>
<td>3번 타자</td><td>-</td>
</tr>
<tr>
<td>4번 타자</td><td>-</td>
</tr>
<tr>
<td>5번 타자</td><td>-</td>
</tr>
<tr>
<td>6번 타자</td><td>-</td>
</tr>
<tr>
<td>7번 타자</td><td>-</td>
</tr>
<tr>
<td>8번 타자</td><td>-</td>
</tr>
<tr>
<td>9번 타자</td><td>-</td>
</tr>
<tr>
<td>선발 투수</td><td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container3">
<div class="l">
<img src="pngs/dusan.png" class="vs" style="margin:0px 0px 0px 50px;">
</div>
<div class="l">
<p id="vss">VS</p>
</div>
<div class="l">
<img src="pngs/kia.png" class="vs">
</div>
<div class="simul">
<div class="but">
<button type="submit" class="simulbtr">시뮬레이션</button>
</div>
<div class="result">
</div>
</div>
</div>
<div class="container4">
<div class="a">
<p class="team">홈팀</p>
</div>
<div class="selection">
<div class="row row1">
<button type="submit" class="t2">삼성</button>
<button type="submit" class="t2">NC</button>
<button type="submit" class="t2">LG</button>
<button type="submit" class="t2">KT</button>
<button type="submit" class="t2">SSG</button>
</div>
<div class="row row2">
<button type="submit" class="t2">두산</button>
<button type="submit" class="t2">키움</button>
<button type="submit" class="t2">KIA</button>
<button type="submit" class="t2">한화</button>
<button type="submit" class="t2">롯데</button>
</div>
</div>
<div class="tb">
<table>
<tbody>
<tr>
<td>1번 타자</td><td>-</td>
</tr>
<tr>
<td>2번 타자</td><td>-</td>
</tr>
<tr>
<td>3번 타자</td><td>-</td>
</tr>
<tr>
<td>4번 타자</td><td>-</td>
</tr>
<tr>
<td>5번 타자</td><td>-</td>
</tr>
<tr>
<td>6번 타자</td><td>-</td>
</tr>
<tr>
<td>7번 타자</td><td>-</td>
</tr>
<tr>
<td>8번 타자</td><td>-</td>
</tr>
<tr>
<td>9번 타자</td><td>-</td>
</tr>
<tr>
<td>선발 투수</td><td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>