Vytvoreni svatebniho webu s uvodni fotografii

bootstrap-3.3.7-dist/css/svatweb.css

@@ -0,0 +1,85 @@
+@font-face {
+    font-family: 'Glyphicons Halflings';
+    src: url('../fonts/glyphicons-halflings-regular.eot');
+    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
+}
+body {
+  overflow-x: hidden;
+}
+
+.nazevwebu {
+    padding: 10px 16px;
+    float: left;
+    vertical-align: middle;
+    width: 50%;
+}
+
+.userdiv{
+  text-align: right;
+  width: 50%;
+  float: right;
+  vertical-align: middle;
+  padding: 10px 16px;
+}
+
+
+ul.user {
+    list-style: none;
+    
+}
+
+ul.user li {
+    display: inline;
+    font-size: 18px;
+}
+
+ul.user li+li:before {
+    padding: 8px;
+    color: black;
+    content: '\007C';
+}
+
+ul.user li a {
+    color: #0275d8;
+    text-decoration: underline;
+    color: black;
+}
+
+ul.user li a:hover {
+    color: #01447e;
+    text-decoration: none;
+}
+
+.profile-pic {
+  position: relative;
+  display: inline-block;
+  width:100%;
+}
+
+.profile-pic:hover .edit {
+  display: block;
+}
+
+.edit {
+  padding-top: 7px; 
+  padding-right: 7px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: none;
+}
+
+.edit a {
+  color: white;
+}
+
+.img-fluid{
+  object-fit: cover; /* Do not scale the image */
+  width: 100%;
+  max-height: 25em;
+  overflow: auto;
+}
+
+.glyphicon-edit{
+  font-size: 2em;
+}

bootstrap-3.3.7-dist/js/template.js

@@ -0,0 +1,49 @@
+var schemacolor = "#fa8072";
+
+$(document).ready(function(){
+    $("a").hover(function(){
+        $(this).css("color", schemacolor);
+        }, function(){
+        $(this).css("color", "black");
+    });
+    document.getElementById("jmeno").style.color = schemacolor;
+    $(document).on('change', '.btn-file :file', function() {
+		var input = $(this),
+			label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+		input.trigger('fileselect', [label]);
+		});
+
+		$('.btn-file :file').on('fileselect', function(event, label) {
+		    
+		    var input = $(this).parents('.input-group').find(':text'),
+		        log = label;
+		    
+		    if( input.length ) {
+		        input.val(log);
+		    } else {
+		        if( log ) alert(log);
+		    }
+	    
+		});	
+
+});
+function readURL(input) {
+		    if (input.files && input.files[0]) {
+		        var reader = new FileReader();
+		        
+		        reader.onload = function (e) {
+		            $('#uvodni').attr('src', e.target.result);
+		            console.log("Nahrano");
+		        }
+		        
+		        reader.readAsDataURL(input.files[0]);
+		    }
+		}
+
+	function changeImage(){
+		$("#imgInp").change(function(){
+		    readURL(this);
+		}); 	 
+	}
+ 
+ 

bootstrap-3.3.7-dist/svatebni-web.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/template.js"></script>
+
+    <link href="css/svatweb.css" rel="stylesheet">
+
+    <title>Svatební web</title>
+  </head>
+  <body>
+  <!-- Sidebar -->
+
+<nav class="top-panel">
+    <div class="nazevwebu">
+    	<h1 id="jmeno"> Adam & Eva </h1>
+    </div>
+    <div class = "userdiv">
+    <ul class="user">
+    	<li><a href="#"> Úvod </a></li>
+    	<li><a href="#"> Fotogalerie </a></li>
+    	<li><a href="#"> Náš příběh </a></li>
+    	<li><a href="#"><span class="glyphicon glyphicon-plus-sign"></span></a></li>
+    </ul>
+    
+	</div>
+</nav>
+
+<div class="profile-pic">
+	<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
+	<div class="edit"><a href="#"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal"></i></a></div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Úvodní fotografie</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+       <div class="container">
+	<div class="col-md-6">
+    <div class="form-group">
+        <label>Vybrat obrázek</label>
+        <div class="input-group">
+            <span class="input-group-btn">
+                <span class="btn btn-default btn-file">
+                    Procházet<input type="file" id="imgInp">
+                </span>
+            </span>
+        </div>
+
+    </div>
+</div>
+</div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+        <button type="button" class="btn btn-primary" onclick="changeImage()" data-dismiss="modal">Nastavit</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+  </body>
+</html>