Home page is slightly finished

6418ba66 · Florian Shllaku · 2170436e · 6418ba66 · 6418ba66 · 6418ba66
Commit 6418ba66 authored 6 years ago by Florian Shllaku
Showing with 193 additions and 52 deletions
css/main.css
img/backgroundd.jpg
img/logo.png
index.html
--- a/css/main.css
+++ b/css/main.css
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  @media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+      font-size: 3.5rem;
+    }
+  }
+
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  @media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+      font-size: 3.5rem;
+    }
+  }
+
+  /*
+ * Globals
+ */
+
+/* Links */
+a,
+a:focus,
+a:hover {
+  color: #fff;
+}
+
+/* Custom default button */
+.btn-secondary,
+.btn-secondary:hover,
+.btn-secondary:focus {
+  color: #333;
+  text-shadow: none; /* Prevent inheritance from `body` */
+  background-color: #fff;
+  border: .05rem solid #fff;
+}
+
+
+/*
+ * Base structure
+ */
+
+html,
+body {
+  height: 100%;
+  background-color: #333;
+}
+
+body {
+  display: -ms-flexbox;
+  display: flex;
+  color: #fff;
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+}
+
+.cover-container {
+  max-width: 42em;
+}
+
+
+/*
+ * Header
+ */
+.masthead {
+  margin-bottom: 2rem;
+}
+
+.masthead-brand {
+  margin-bottom: 0;
+}
+
+.nav-masthead .nav-link {
+  padding: .25rem 0;
+  font-weight: 700;
+  color: rgba(255, 255, 255, .5);
+  background-color: transparent;
+  border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: rgba(255, 255, 255, .25);
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+
+@media (min-width: 48em) {
+  .masthead-brand {
+    float: left;
+  }
+  .nav-masthead {
+    float: right;
+  }
+}
+
+
+/*
+ * Cover
+ */
+.cover {
+  padding: 0 1.5rem;
+}
+.cover .btn-lg {
+  padding: .75rem 1.25rem;
+  font-weight: 700;
+}
+
+
+/*
+ * Footer
+ */
+.mastfoot {
+  color: rgba(255, 255, 255, .5);
+}
+
+i{
+    padding-top: 5px;
+}
+
+body{
+    background-color: black;
+    height: 100%; 
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+body, html{
+    height: 100%;
+}
--- a/img/backgroundd.jpg
+++ b/img/backgroundd.jpg
--- a/img/logo.png
+++ b/img/logo.png
--- a/index.html
+++ b/index.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <title>The Best Currency Exchange website ever</title>
-    <meta charset="UTF-8">
-    <meta name="description" content="Currency Exchange Website">
+  <head>
+    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <!-- Imported Bootstrap4 using CDN -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
-	<link rel= "stylesheet" href="style/main.css">
-
-</head>
-<body>
-
-<nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
-	<div class="container">
-	  <a class="navbar-brand" href="#">Start Bootstrap</a>
-	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		  </button>
-	  <div class="collapse navbar-collapse" id="navbarResponsive">
-		<ul class="navbar-nav ml-auto">
-		  <li class="nav-item active">
-			<a class="nav-link" href="#">Home
-				  <span class="sr-only">(current)</span>
-			</a>
-		  </li>
-		  <li class="nav-item">
-			<a class="nav-link" href="#">About</a>
-		  </li>
-		  <li class="nav-item">
-			<a class="nav-link" href="#">Services</a>
-		  </li>
-		  <li class="nav-item">
-			<a class="nav-link" href="#">Contact</a>
-		  </li>
-		</ul>
-	  </div>
-	</div>
-  </nav>
-  </body>
-  <!-- Full Page Image Header with Vertically Centered Content -->
-<header class="masthead">
-	<div class="container h-100">
-	  <div class="row h-100 align-items-center">
-		<div class="col-12 text-center">
-		  
-		</div>
-	  </div>
-	</div>
+    <meta name="description" content="Currency Exchange Website">
+    <meta name="author" content="Florian Shllaku, Hakeem Shrief">
+    <title>Currency Exchange</title>
+    <!-- Connecting with Google Material for websit's logo/icon autorenew-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Setting up BootstrapCDN -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <!-- Main Custom styles for the website  -->
+    <link href="css/main.css" rel="stylesheet">
+  </head>
+  <body class="text-center" background="/home/gorilla/Desktop/Garlix/img/backgroundd.jpg">
+    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+  <header class="masthead mb-auto">
+    <div class="inner">
+      <i class="material-icons masthead-brand img-fluid">autorenew</i>
+      <h3 class="masthead-brand">XCHANGE</h3>
+      <nav class="nav nav-masthead justify-content-center">
+        <a class="nav-link active" href="#">Home</a>
+        <a class="nav-link" href="#">Fiat</a>
+        <a class="nav-link" href="#">Crypto</a>
+        <a class="nav-link" href="#">Charts</a>
+        <a class="nav-link" href="#">Subscribe</a>
+      </nav>
+    </div>
  </header>
-  <script src="js/script.js"></script> <!-- Not to be used yet.-->
-  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>	
+  <main role="main" class="inner cover">
+    <h1 class="cover-heading">Free Currency Converter</h1>
+    <p class="lead">Currency converter and exchange rate for Dollar, Pound, Euro and all other currencies. Calculate live currency and foreign exchange rates with this free currency converter.</p>
+    <p class="lead">
+      <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
+    </p>
+  </main>

+  <footer class="mastfoot mt-auto">
+    <div class="inner">
+      <p>Develeoped and Designed by <a href="#">&#169;Garlix</a>.</p>
+    </div>
+  </footer>
+</div>
 </body>
 </html>