Skip to content

Instantly share code, notes, and snippets.

@dominikbasista

dominikbasista/start.html Secret

Created April 22, 2018 20:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dominikbasista/6de68ba424dc3acbbf9299aec26e54b4 to your computer and use it in GitHub Desktop.
Save dominikbasista/6de68ba424dc3acbbf9299aec26e54b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
*{
margin:0;
padding: 0;
}
html, body{
height: 100%;
}
.section {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection{
height: 50%;
background-color: black;
text-align: center;
font-family: "Roboto";
font-size: 25px;
color: ivory;
}
.sectionOne {
background-image: url("../pictures/walpaper_1.jpg");
}
.sectionTwo {
background-image: url("../pictures/walpaper_2.jpg");
}
nav {
background-color: black;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
height: 40px;
z-index: 100;
width: 100%;
}
nav div {
width:205px;
height: 25;
left: 5px;
top: 7px;
padding-right:10px;
position: relative;
float: left;
/* line-height: 40px;*/
}
nav div img {
width:200px;
height: 25;
}
nav ul{
float:left;
/* padding-bottom: 1em !important;*/
}
nav ul li {
list-style: none;
float:left;
width: 150px;
height: 40px;
background-color: black;
color: aliceblue;
line-height: 40px;
text-align: center;
position: relative;
}
nav ul li:hover{
background-color: #b3042c;
}
nav ul li a {
text-decoration: none;
display: block;
color: ivory;
font-size: 20px;
font-family:'Roboto', sans-serif;
}
nav ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul{
display: block;
}
.login_container{
position:relative;
margin-left:230px;
width: 150px;
height: 30px;
}
/*
.login_button{
display: inline-block;
margin-top:auto;
margin-bottom: auto;
}
.sign_in_button{
display: inline-block;
margin-top:auto;
margin-bottom: auto;
margin-left:15px;
*/
}
.logo{
position: relative;
top: 230px;
margin-left: auto;
margin-right: auto;
/* background-color: yellow;*/
}
.obrazek{
display: block;
position: absolute;
height: 180px;
width: 350px;
top: 230px;
left:450px;
/*
margin-left: auto;
margin-right: auto;
*/
/*
width: 100%;
height: 100%;
*/
}
.book_cont {
position: relative;
height: 330px;
top:3px;
width:600px;
background-color: ivory;
}
.book_container_r{
float:right;
}
.book_container_l{
float:left;
}
.book_cont > img{
position: absolute;
/* float: left;*/
left:10px;
top:20px;
/*
margin-top: auto;
margin-bottom: auto;
*/
}
.media_container{
position: fixed;
bottom: 30px;
right: 30px;
height: 40px;
width: 300px;
}
.media_facebook {
float:right;
padding: 0;
}
.media_youtube {
float:right;
padding: 0;
}
.media_twitter {
float:right;
padding: 0;
}
Raw
start.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="./css/my_style.css" type="text/css">
</head>
<body>
<nav>
<div><a href="#"><img src="./pictures/bare_font_logo.png"></a></div>
<ul>
<li><a>BOOKS</a>
<ul>
<li><a a="#">My Boks</a></li>
<li><a a="#">Books Base</a></li>
<li><a a="#">By Genre</a></li>
<li><a a="#">Top 10</a></li>
<li><a a="#">Newest</a></li>
<li><a a="#">Comming Soon</a></li>
</ul>
</li>
<li><a>WRITERS</a>
<ul>
<li><a a="#">My Writes</a></li>
<li><a a="#">Writers Base</a></li>
<li><a a="#">By Epoque</a></li>
<li><a a="#">Top 10</a></li>
</ul>
</li>
<li><a>COMUNITY</a></li>
<li><a>ABOUT</a></li>
</ul>
<div class="login_container">
<button type="button" class="btn btn-outline-warning btn-sm login_button">Log In</button>
<button type="button" class="btn btn-outline-info btn-sm sign_in_button">Sign Up</button>
</div>
</nav>
<img alt="book lovers logo" src="./pictures/logo_1.png" class="obrazek">
<div class="section sectionOne">
</div>
<div class="subsection subsectionOne">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="my_slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active book_cont book_container_l">
<img src="./books_pictures/eden.jpeg">
</div>
<div class="item active book_cont book_container_r">
<img src="./books_pictures/father.jpeg">
</div>
<div class="item book_cont book_container_l">
<img src="./books_pictures/eden.jpeg">
</div>
<div class="item book_cont book_container_r">
<img src="./books_pictures/father.jpeg">
</div>
</div>
</div>
<a class="left carousel-control" href="#my_slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#my_slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="section sectionTwo">
</div>
<div class="subsection subsectionTwo">
</div>
<div class="media_container">
<div class="media_facebook"><a href="https://www.facebook.com/"><img src="./pictures/facebook.png" width="60" height="60"></a></div>
<div class="media_youtube"><a href="https://www.youtube.com/"><img src="./pictures/youtube.png" width="60" height="60"/></a></div>
<div class="media_facebook"><a href="https://twitter.com/?lang=pl"><img src="./pictures/twitter.png" width="60" height="60"/></a></div>
</div>
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment