Add files via upload
This commit is contained in:
Krzysztof
+142
@@ -0,0 +1,142 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>BeonWeb</title>
|
||||||
|
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
|
||||||
|
<link rel="stylesheet" media="screen" href="stylesheet.css" />
|
||||||
|
<script src="https://kit.fontawesome.com/e4c3899c65.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="nav">
|
||||||
|
<div class="intro">
|
||||||
|
<i class="fas fa-spider"></i>
|
||||||
|
<h3>BeonWeb</h3>
|
||||||
|
<p>Centrum części Internetu, gdzie ty możesz być częścią.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu">
|
||||||
|
<a class="active" href="">Strona główna</a>
|
||||||
|
<a href="">Wiadomości</a>
|
||||||
|
<a href="">Dzienna dawka memów</a>
|
||||||
|
<a href="">Rekomendowane playlisty</a>
|
||||||
|
<a href="">Blog</a>
|
||||||
|
</div>
|
||||||
|
<div class="left-column">
|
||||||
|
<div class="post">
|
||||||
|
<div class="author">
|
||||||
|
<img src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg" />
|
||||||
|
<a class="name" href="#">user/Krzysiek [Właściciel]</a>
|
||||||
|
<div class="date">Dodano: 17.11.2019 o 17:17 na s/Memes</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">Piękna chwila. :)</div>
|
||||||
|
<div class="image"><img src="https://i1.kwejk.pl/k/obrazki/2019/11/d7gUGwdwcHP6AgPY.jpg"><a href="https://i1.kwejk.pl/k/obrazki/2019/11/d7gUGwdwcHP6AgPY.jpg"></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="options">
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-heart"></i>
|
||||||
|
<p>Polajkuj!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-share"></i>
|
||||||
|
<p>Udostępnij!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-comment"></i>
|
||||||
|
<p>Skomentuj!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-flag"></i>
|
||||||
|
<p>Zgłoś!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-beer"></i>
|
||||||
|
<p>Postaw piwko!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post">
|
||||||
|
<div class="author">
|
||||||
|
<img src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg" />
|
||||||
|
<a class="name" href="#">user/Krzysiek [Właściciel]</a>
|
||||||
|
<div class="date">Dodano: 17.11.2019 o 17:07 na s/Blog</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">Prędkość pisania!</div>
|
||||||
|
<div class="text">Tak szybko tutaj robię to wszystko, że aż napisałem drugi post. Potem zostanie dodany memik, który będzie może z jakiejś grupy Facebookowej, a wiadomości zostaną zrobione kiedy indziej. Jeżeli masz mema, z którym chciałbyś się podzielić to możesz się skontaktować mailowo na razie: krzysiek-smaga@outlook.com
|
||||||
|
<br>
|
||||||
|
Kto by się spodziewał, że to będzie tak bjutiful wyglądało. Aż zasługuje na kebaba. Zamówi mi ktoś? :)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="options">
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-heart"></i>
|
||||||
|
<p>Polajkuj!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-share"></i>
|
||||||
|
<p>Udostępnij!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-comment"></i>
|
||||||
|
<p>Skomentuj!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-flag"></i>
|
||||||
|
<p>Zgłoś!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-beer"></i>
|
||||||
|
<p>Postaw piwko!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post">
|
||||||
|
<div class="author">
|
||||||
|
<img src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg" />
|
||||||
|
<a class="name" href="#">user/Krzysiek [Właściciel]</a>
|
||||||
|
<div class="date">Dodano: 17.11.2019 o 16:51 na s/Blog</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">Witaj Świecie!</div>
|
||||||
|
<div class="text">A więc tak, jest to pierwszy post na tak zwanym blogu. Wyglądem przypomina strasznie Reddita, wiem. Choć nie będzie działać jak Reddit. Na tej stronie, będę dodawał posty tylko ja oraz osoby przeze mnie uprawnione. Jak widać w zakładkach, pojawiać się będą dzienne memy, rekomendowane playlisty na Spotify, posty, które będę pisał ja oczywiście oraz jakieś newsy, które będę pisał jak będzie mi się chciało z Polski lub świata. Co ciekawe, to nie jest na WordPressie. To wszystko jest pisane całym HTML oraz CSS do wyglądu, nie ma żadnego skryptu jak na ten czas. Nie ma jeszcze dawania polubień oraz komentarzy, ale i tak przyciski zostaną dodane, aby powkurzać osoby. Udostępnianie może będzie możliwe.</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="options">
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-heart"></i>
|
||||||
|
<p>Polajkuj!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-share"></i>
|
||||||
|
<p>Udostępnij!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-comment"></i>
|
||||||
|
<p>Skomentuj!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-flag"></i>
|
||||||
|
<p>Zgłoś!</p>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="fas fa-beer"></i>
|
||||||
|
<p>Postaw piwko!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="end">
|
||||||
|
<i class="fas fa-blog"></i>
|
||||||
|
<div class="text">Tutaj droga przeglądania się kończy, wróc wkrótce, po coś nowego :)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-column">
|
||||||
|
<h1>Zajrzyj tutaj!</h1>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+195
@@ -0,0 +1,195 @@
|
|||||||
|
* {
|
||||||
|
margin: 0px;
|
||||||
|
font-family: 'GlacialIndifferenceRegular';
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
background-color: rgb(45, 116, 180);
|
||||||
|
color: white;
|
||||||
|
padding: 24px 10%;
|
||||||
|
min-height: 128px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Początek strony */
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
width: 512px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro i {
|
||||||
|
font-size: 64px;
|
||||||
|
float: right;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro p {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro h3 {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu */
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
background-color: rgb(45, 45, 45);
|
||||||
|
padding: 8px 10%;
|
||||||
|
color: white;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a {
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a:hover {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a .active {
|
||||||
|
background-color: rgb(45, 116, 180);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Columns */
|
||||||
|
|
||||||
|
.left-column {
|
||||||
|
width: 55%;
|
||||||
|
float: left;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-column {
|
||||||
|
margin-left: 1%;
|
||||||
|
width: 24%;
|
||||||
|
float: left;
|
||||||
|
background-color: rgb(45,45,45);
|
||||||
|
padding: 4px 8px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lewa kolumna */
|
||||||
|
|
||||||
|
.post {
|
||||||
|
padding: 8px;
|
||||||
|
background-color: rgb(45,45,45);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .author {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .author img {
|
||||||
|
float: left;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .author .name {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .author .name:hover{
|
||||||
|
color: rgb(45, 116, 180);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .author .date {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .line {
|
||||||
|
height: 2px;
|
||||||
|
width: 55%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1px;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin: 4px 0px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .content {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .content .title {
|
||||||
|
font-size: 36px;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .content .image {
|
||||||
|
text-align: center;
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .content .image img {
|
||||||
|
max-width: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options .button {
|
||||||
|
background-color: rgb(45, 116, 180);
|
||||||
|
min-width: 96px;
|
||||||
|
padding: 4px;
|
||||||
|
width: auto;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options .button i {
|
||||||
|
float: left;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options .button p {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: rgb(45,45,45);
|
||||||
|
margin: 0px 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end i {
|
||||||
|
font-size: 24px;
|
||||||
|
float:left;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end .text{
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prawa kolumna */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width:800px){
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user