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 {
|
||||
background-color: #51688e;
|
||||
}
|
||||
|
||||
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;
|
||||
background-color: #111725;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
color: white;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-size: 20px;
|
||||
text-shadow: 2px 2px 2px #aaa;
|
||||
/*text-shadow: 1px 1px 1px #aaa;*/
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
color: white;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-size: 4vw;
|
||||
text-shadow: 2px 2px 2px #aaa;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.gallerystrip img {
|
||||
height: auto;
|
||||
margin: 0px;
|
||||
border: 6px solid #484c55;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #58518e;
|
||||
div.gallerystrip {
|
||||
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;
|
||||
width: 60vw;
|
||||
width: 45vw;
|
||||
height: 18vw;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
ul.navbar {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
border-radius: 5px 15px;
|
||||
box-shadow: 5px 5px grey;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
background-color: #1e2028;
|
||||
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
ul.navbar li {
|
||||
float: left;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
ul.navbar li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
-webkit-transition: background-color 0.4s;
|
||||
url_for('static', filename='style.css') transition: background-color 0.4s;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
background-color: #111;
|
||||
ul.navbar a:hover {
|
||||
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>
|
||||
<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 href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>sarsoo</h1>
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}home{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="row">
|
||||
<p style="text-align:center">electronic engineering student</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<div class="gallerystrip row">
|
||||
<img src="{{ url_for('static', filename='art/freddie.jpg') }}" alt="freddie gibbs" class="col-4">
|
||||
<img src="{{ url_for('static', filename='art/self.jpg') }}" alt="me" class="col-4">
|
||||
<img src="{{ url_for('static', filename='art/horse.jpg') }}" alt="tempation of saint anthony" class="col-4">
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user