s457990/Watch-with-friends
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

landing page ready

Browse Source
This commit is contained in:
Kacper Maj 2020-12-28 20:55:49 +01:00
parent 3e9b182e3d
commit bc10fccb94
2 changed files with 81 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -1,63 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WWF - Watch With Friends</title>
<link rel="stylesheet" type="text/css" id="applicationStylesheet" href="style.css"/>
<!-- <script id="applicationScript" type="text/javascript" src="script.js"></script> -->
<!-- Font Awesome -->
<link
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/2.2.1/mdb.min.css"
rel="stylesheet"
/>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/2.2.1/mdb.min.js"
></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="./main.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand mx-auto" href="#">
<img
src="logo-bez-tla.png"
height="140"
alt=""
loading="lazy"
/>
</a>
</div>
<div class="container-fluid bg-dark">
<button type="button" class="btn btn-warning btn-rounded btn-lg mx-auto" style="background-color: rgb(218, 110, 10);">Create a room!</button>
</div>
</nav>
<div class="background">
<div id="nav" >
<img src="wwf-text.png" alt="text" class="wwf-text">
<img src="logo-bez-tla.png" alt="logo" class="logo">
<button id="create-room" class="centered button-create-room">Stwórz pokój!</button>
</div>
</div>
</body>
</html>

70
style.css
View File

@ -0,0 +1,70 @@
.wwf-text {
/* wwf-text 1 */
display: block;
/* position: fixed; */
margin-left: auto;
margin-right: auto;
margin-top: -5%;
transform: scale(0.4);
filter: drop-shadow(-11px 8px 5px rgba(0, 0, 0, 0.63))
}
.logo {
/* logo-bez-tla 1 */
display: block;
margin-left: auto;
margin-right: auto;
margin-top:-12rem;
transform: scale(0.8);
filter: drop-shadow(-11px 11px 7px rgba(0, 0, 0, 0.63));
}
.background {
/* background-langing-page 1 */
position: absolute;
width: 100%;
height: 100%;
background-position: center;
left: 0px;
top: 0px;
background-image: url(background-langing-page.png);
}
.button-create-room {
box-shadow:inset 0px 1px 0px 0px #cf866c;
background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
background-color:#d0451b;
border-radius:25px;
border:1px solid #942911;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family: Montserrat;
font-size:25px;
padding:10px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #854629;
display: block;
margin-left: auto;
margin-right: auto;
}
.button-create-room:hover {
background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
background-color:#bc3315;
position:relative;
top:-2px;
}
.button-create-room:active {
position:relative;
top:3px;
}