[UI][FAQ] FAQ page progress, assets folder and assets added
This commit is contained in:
rainydaysavings
Hugo Sales
parent
124e1a70c1
commit
9d36861076
132
public/assets/css/faq/base.css
Normal file
132
public/assets/css/faq/base.css
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/* GENERAL ----------------------------*/
|
||||
body, html
|
||||
{
|
||||
background-image: linear-gradient(to right bottom, #485563, #404c59, #38434f, #313a45, #29323c);
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: #F6F6F6;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.drop-down ul li
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.drop-down ul li ul a
|
||||
{
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.drop-down ul li ul
|
||||
{
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: 0.8em 1.5em 1.5em 0.8em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.drop-down ul li:hover ul
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drop-down ul li ul a:hover
|
||||
{
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#hover-effect:hover
|
||||
{
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
a:link
|
||||
{
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: #F6F6F6;
|
||||
}
|
||||
a:visited
|
||||
{
|
||||
outline: 0;
|
||||
color: #F6F6F6;
|
||||
}
|
||||
/*-------------------------------------*/
|
||||
|
||||
/* HEADER -----------------------------*/
|
||||
#header
|
||||
{
|
||||
margin-top: 2em;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-items
|
||||
{
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
/* MENU -------------------------------*/
|
||||
#menu
|
||||
{
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#menu-png
|
||||
{
|
||||
height: 2em;
|
||||
}
|
||||
/*-------------------------------------*/
|
||||
|
||||
/* INSTANCE ---------------------------*/
|
||||
#instance
|
||||
{
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#align-mid
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
#logo
|
||||
{
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
#down-arrow
|
||||
{
|
||||
height: 1em;
|
||||
}
|
||||
/*-------------------------------------*/
|
||||
|
||||
/* SEARCH -----------------------------*/
|
||||
#search
|
||||
{
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#search-png
|
||||
{
|
||||
height: 2em;
|
||||
}
|
||||
/*-------------------------------------*/
|
||||
|
||||
/*-------------------------------------*/
|
||||
|
||||
BIN
public/assets/images/drop.png
Normal file
BIN
public/assets/images/drop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
public/assets/images/logo.png
Normal file
BIN
public/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/assets/images/menu.png
Normal file
BIN
public/assets/images/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
public/assets/images/search.png
Normal file
BIN
public/assets/images/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -1,20 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset='UTF-8'>
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
{% block stylesheets %}
|
||||
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base.css') }}">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
{% block header %}
|
||||
{% block body %}
|
||||
<div id='header'>
|
||||
<nav class='drop-down flex-item' id='menu'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class='hover-effect'>
|
||||
<img id='menu-png' src="{{ asset('assets/images/menu.png') }}"/>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a>Bookmarks</a></li>
|
||||
<li><a>Messages</a></li>
|
||||
<li><a>Settings</a></li>
|
||||
<li><a>Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class='drop-down flex-item' id='instance'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class='hover-effect align-mid'>
|
||||
<img id='logo' src="{{ asset('assets/images/logo.png') }}"/>
|
||||
<span> GNUsocial </span>
|
||||
<img id='down-arrow' src="{{ asset('assets/images/drop.png') }}"/>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a>Main Page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class='flex-item' id='search'>
|
||||
<img id='search-png' src="{{ asset('assets/images/search.png') }}"/>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
{% block javascripts %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{% extends "base.html.twig" %}
|
||||
{% extends 'faq/base.html.twig' %}
|
||||
Loading…
Reference in New Issue
Block a user