added photos, fonts, nav bar
This commit is contained in:
aj
parent
777abcd210
commit
d37010a2e2
BIN
static/art/horse.jpg
Normal file
BIN
static/art/horse.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
static/art/self.jpg
Normal file
BIN
static/art/self.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 842 KiB |
@ -1,7 +0,0 @@
|
|||||||
h3 {
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
font-family: 'Ubuntu', sans-serif;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
}
|
|
||||||
105
static/style.css
105
static/style.css
@ -1,71 +1,116 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: 'Open Sans', arial;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #51688e;
|
background-color: #111725;
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: white;
|
|
||||||
font-family: 'Ubuntu', sans-serif;
|
|
||||||
font-size: 14vw;
|
|
||||||
text-shadow: 3px 3px 3px #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: white;
|
|
||||||
font-family: 'Ubuntu', sans-serif;
|
|
||||||
font-size: 4vw;
|
|
||||||
text-shadow: 3px 3px 3px #aaa;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Ubuntu', sans-serif;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-shadow: 2px 2px 2px #aaa;
|
/*text-shadow: 1px 1px 1px #aaa;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Ubuntu', sans-serif;
|
font-size: 20px;
|
||||||
font-size: 4vw;
|
padding: 10px;
|
||||||
text-shadow: 2px 2px 2px #aaa;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gallerystrip img {
|
||||||
|
height: auto;
|
||||||
|
margin: 0px;
|
||||||
|
border: 6px solid #484c55;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
div.gallerystrip {
|
||||||
background-color: #58518e;
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.title {
|
||||||
|
color: white;
|
||||||
|
font-size: 14vw;
|
||||||
|
font-family: 'Megrim', arial;
|
||||||
|
text-shadow: 2px 2px 2px #aaa;
|
||||||
|
|
||||||
|
background-color: #070c1a;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
width: 60vw;
|
width: 45vw;
|
||||||
height: 18vw;
|
height: 18vw;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
ul.navbar {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
border-radius: 5px 15px;
|
||||||
|
box-shadow: 5px 5px grey;
|
||||||
|
margin: 10px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #333;
|
background-color: #1e2028;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar li {
|
ul.navbar li {
|
||||||
float: left;
|
float: left;
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar a {
|
ul.navbar li a {
|
||||||
display: block;
|
display: block;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
-webkit-transition: background-color 0.4s;
|
||||||
|
url_for('static', filename='style.css') transition: background-color 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar a:hover {
|
ul.navbar a:hover {
|
||||||
background-color: #111;
|
background-color: #00030a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul.navbar li.right {float: right;}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
ul.navbar li.right,
|
||||||
|
ul.navbar li {float: none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="col-"] {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
/* For desktop: */
|
||||||
|
.col-1 {width: 8.33%;}
|
||||||
|
.col-2 {width: 16.66%;}
|
||||||
|
.col-3 {width: 25%;}
|
||||||
|
.col-4 {width: 33.33%;}
|
||||||
|
.col-5 {width: 41.66%;}
|
||||||
|
.col-6 {width: 50%;}
|
||||||
|
.col-7 {width: 58.33%;}
|
||||||
|
.col-8 {width: 66.66%;}
|
||||||
|
.col-9 {width: 75%;}
|
||||||
|
.col-10 {width: 83.33%;}
|
||||||
|
.col-11 {width: 91.66%;}
|
||||||
|
.col-12 {width: 100%;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row::after {
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
display: table;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>sarsoo</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='art.css') }}">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<h1>sarsoo</h1>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<ul class="navbar">
|
|
||||||
<li><a href="/">home</a></li>
|
|
||||||
<li><a href="/art">art</a></li>
|
|
||||||
<li><a href="https://github.com/sarsoo">github</a></li>
|
|
||||||
<li><a href="https://www.last.fm/user/sarsoo">last.fm</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="gallery">
|
|
||||||
<a target="_blank" href="{{ url_for('static', filename='art/freddie.jpg') }} ">
|
|
||||||
<img src="{{ url_for('static', filename='art/freddie.jpg') }}" alt="Freddie Gibbs" width="600" height="400">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
23
templates/base.html
Normal file
23
templates/base.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>sarsoo/{% block title %}{% endblock %}</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Megrim|Open+Sans:600" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h1 class="title">andy</h1>
|
||||||
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<ul class="navbar">
|
||||||
|
<li><a href="/">home</a></li>
|
||||||
|
<li class="right"><a href="https://www.instagram.com/pack_it_in_/">art ig</a></li>
|
||||||
|
<li class="right"><a href="https://www.last.fm/user/sarsoo">last.fm</a></li>
|
||||||
|
<li class="right"><a href="https://github.com/sarsoo">github</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,21 +1,16 @@
|
|||||||
<!doctype html>
|
{% extends 'base.html' %}
|
||||||
<html>
|
|
||||||
<head>
|
{% block title %}home{% endblock %}
|
||||||
<title>sarsoo</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% block content %}
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
|
<div class="row">
|
||||||
</head>
|
<p style="text-align:center">electronic engineering student</p>
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<h1>sarsoo</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<br><br>
|
|
||||||
<ul class="navbar">
|
<div class="gallerystrip row">
|
||||||
<li><a href="/">home</a></li>
|
<img src="{{ url_for('static', filename='art/freddie.jpg') }}" alt="freddie gibbs" class="col-4">
|
||||||
<li><a href="/art">art</a></li>
|
<img src="{{ url_for('static', filename='art/self.jpg') }}" alt="me" class="col-4">
|
||||||
<li><a href="https://github.com/sarsoo">github</a></li>
|
<img src="{{ url_for('static', filename='art/horse.jpg') }}" alt="tempation of saint anthony" class="col-4">
|
||||||
<li><a href="https://www.last.fm/user/sarsoo">last.fm</a></li>
|
</div>
|
||||||
</ul>
|
{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user