janishutz-website/development-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first styling & more content

Browse Source
This commit is contained in:
janis
2023-01-16 08:23:05 +01:00
parent 3ca65ca743
commit 237a20c8cc
8 changed files with 95 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
css/style.css Normal file
View File

@@ -0,0 +1,39 @@
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: rgb(122, 188, 255);
font-size: calc(15pt + 0.4vw);
}
.centered {
width: 90%;
margin: 3%;
margin-top: 0%;
padding: 2%;
background-color: rgba(223, 223, 223, 0.8);
border-radius: 50px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.heading-wrapper {
width: 90%;
margin: 3%;
margin-bottom: 0%;
padding: 2%;
background-color: rgba(0, 0, 149, 1);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
color: white;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.heading {
font-size: 3rem;
}

23
index.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Home :: Development - janishutz.com</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="nav"></div>
<div class="heading-wrapper">
<h1 class="heading">Development</h1>
<h2 class="subheading">Get your new online presence</h2>
</div>
<div class="centered">
<h2 class="biggest text-centered">Just starting a small business and looking for a website to get started?</h2>
<p class="normal text-centered">I build websites from scratch using HTML, CSS & JavaScript, the languages that make up most of the web and are the foundation of well-known frameworks like wordpress. But in contrast to frameworks, websites built from scratch tend to perform better, both when it comes to loading times and when it comes to Google rankings, if given the same keywords and descriptions.</p>
<p class="normal text-centered">Get a website with a Node.js backend, if you require more advanced features like contact forms or a blog. If you do not require any of this, you can just get a simple static website you can host anywhere.</p>
<p class="normal text-centered">Not sure where to host your website and how to set it up? I can help you out by setting up your website directly with a hosting provider.</p>
<p class="normal text-centered">Interested? Feel free to contact me below!</p>
<p class="normal bold text-centered">Order your new website here today!</p>
<a class="button" href="/order.html">Contact me</a>
</div>
</body>
</html>

0
server.js → js/loader.js
View File

3
js/orderwebsite.js Normal file
View File

@@ -0,0 +1,3 @@
$(document).ready(function () {
$( '#contactForm' ).load( '/modules/contactForm.html' )
});

17
modules/contactForm.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form action="https://api.janishutz.com/contact/fromDevelopment" method="post">
<label for="name">Full name</label><br>
<input type="text" name="name" id="name" placeholder="Your full name" required><br>
<label for="mail">Your email address</label><br>
<input type="email" name="mail" id="mail" placeholder="Your email address" required><br>
<label for="name">Your message</label><br>
<textarea name="name" id="name" placeholder="Your message" required minlength="50"></textarea><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>

0
modules/footer.html Normal file
View File

0
modules/nav.html Normal file
View File

13
order.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Order :: Development - janishutz.com</title>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
<script defer src="/js/orderwebsite.js"></script>
</head>
<body>
<h1>Contact me for an offer</h1>
<div id="contactForm"></div>
</body>
</html>