janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first styling of website

Browse Source
This commit is contained in:
janis
2022-12-13 13:36:43 +01:00
parent 0f1cf6e52b
commit f7da68b483
2 changed files with 94 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
website/css/style.css Normal file
View File

@@ -0,0 +1,83 @@
/*
*
* impress.js Website
*
*
*/
body {
background-color: #dcdcdc;
/*TODO: Choose better font*/
font-family: sans-serif;
}
/*
TITLE
*/
/* This is the tile element with the background image and the title */
.title {
/* TODO: Add background image*/
/* make div full width (well technically oversized and move it to -1% offset */
display: block;
width: 103vw;
height: 100vh;
margin-top: -1vh;
margin-left: -1vw;
text-align: center;
}
.title-content {
position: relative;
top: 20vh;
}
.title-buttons {
position: relative;
top: 40vh;
}
.type-animation {
font-size: 500%;
}
/*
*
* GENERAL ITEMS
*
*/
/* Buttons */
.button {
display: inline-block;
background-color: green;
text-decoration: none;
color: white;
font-size: 150%;
margin: 5px;
font-weight: bold;
padding: 30px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 50px;
}
.button:hover {
background-color: lightgreen;
}
/*
*
* CONTENT BOX
*
*/
.content {
width: 80vw;
margin-left: 10vw;
}

17
website/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<title>impress.js - the stunning javascript presentation framework</title> <title>impress.js - the stunning javascript presentation framework</title>
<meta name="description" content="impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com"> <meta name="description" content="impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com">
<link rel="stylesheet" href="./css/style.css">
<!--I am using jquery for the fancy typing animation and button animations (plus loading of the navbar and footer)--> <!--I am using jquery for the fancy typing animation and button animations (plus loading of the navbar and footer)-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>-->
</head> </head>
@@ -10,12 +11,16 @@
<!--Here, the navbar is inserted by jquery--> <!--Here, the navbar is inserted by jquery-->
<div id="navbar"></div> <div id="navbar"></div>
<div class="title"> <div class="title">
<h1 class="type-animation">impress.js</h1> <div class="title-content">
<a class="button" id="demobutton" href="./demo/index.html">Watch the demo</a> <h1 class="type-animation">impress.js</h1>
<br> </div>
<a class="button go-impress" href="./docs/home.html">Get started!</a> <div class="title-buttons">
<!--TODO: Add a direct download link for the file--> <a class="button" id="demobutton" href="./demo/index.html">Watch the demo</a>
<a class="button download-base" href="https://raw.githubusercontent.com/impress/impress.js/master/js/impress.js">Download</a> <br>
<a class="button go-impress" href="./docs/home.html">Get started!</a>
<!--TODO: Add a direct download link for the file-->
<a class="button download-base" href="https://raw.githubusercontent.com/impress/impress.js/master/js/impress.js">Download</a>
</div>
</div> </div>
<div class="content"> <div class="content">
<div class="create"> <div class="create">