htmlcss
Mikhail Ronchyk
@ -3,14 +3,16 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
|
||||
|
||||
<title>HighNeed.pl</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--Navbar-->
|
||||
<div class="navbar">
|
||||
<div class="container flex">
|
||||
|
||||
306
highneed/static/css/style.css
Normal file
@ -0,0 +1,306 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
|
||||
|
||||
:root {
|
||||
--background-green: #64BE7B;
|
||||
--background-dark-green: #347945;
|
||||
--background-light-green: #D7FBDF;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: 'Lato', sans-serif;
|
||||
color: black;
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration:none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: var(--background-green);
|
||||
border-bottom: 5px solid var(--background-dark-green);
|
||||
color: white;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.navbar ul{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: white;
|
||||
padding: 10px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.navbar a:hover{
|
||||
border-bottom: 3px #fff solid;
|
||||
}
|
||||
|
||||
.navbar .flex {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Showcase*/
|
||||
|
||||
.showcase {
|
||||
background-color: var(--background-green);
|
||||
color: var(--background-dark-green);
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.article1 {
|
||||
/*background-image: url("../images/background.jpg");*/
|
||||
color: white;
|
||||
}
|
||||
|
||||
.article2 {
|
||||
background-color:var(--background-light-green);
|
||||
}
|
||||
|
||||
.maps {
|
||||
background-color: var(--background-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.map-responsive {
|
||||
overflow: hidden;
|
||||
padding-bottom: 75%;
|
||||
position: relative;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.map-responsive iframe {
|
||||
left: auto;
|
||||
left: auto;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.art1-img {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.art2-img {
|
||||
border-radius: 100%;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.showcase h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.showcase p{
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.showcase .grid{
|
||||
overflow: visible;
|
||||
grid-template-columns: 55% 45%;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.showcase-form {
|
||||
background-color: var(--background-light-green);
|
||||
color: var(--background-dark-green);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
||||
padding: 20px;
|
||||
margin: 10px 250px;
|
||||
|
||||
display:grid;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
/* change inside showcase */
|
||||
.showcase-form .form-control{
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.showcase-form input[type='text'],
|
||||
.showcase-form input[type='email'],
|
||||
.showcase-form input[type='password']{
|
||||
border:0;
|
||||
background-color:var(--background-light-green);
|
||||
border-bottom: 2px solid var(--background-green);
|
||||
width:100%;
|
||||
padding:3px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.showcase-form input:focus{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
.divider-bottom {
|
||||
position: relative;
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.divider-bottom svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(130% + 1.3px);
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.divider-bottom .shape-fill {
|
||||
fill: var(--background-light-green)
|
||||
}
|
||||
|
||||
|
||||
/* Utilities */
|
||||
.container {
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
overflow:auto;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
color: var(--background-dark-green);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
width:220px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display:inline-block;
|
||||
padding: 10px 30px;
|
||||
cursor: pointer;
|
||||
background: var(--background-green);
|
||||
color:white;
|
||||
border:none;
|
||||
border-radius:40px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background-color:var(--background-dark-green);
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
grid-gap: 10px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-gap: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.inc-events{
|
||||
background-color:var(--background-light-green);
|
||||
}
|
||||
.inc-events .flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inc-events .card{
|
||||
text-align:center;
|
||||
margin:15px 10px 40px;
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
|
||||
.inc-events .card h3{
|
||||
font-size:20px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.inc-events .card:hover {
|
||||
transform:translateY(-10px);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 120px;
|
||||
background-color: var(--background-green);
|
||||
border-top: 5px solid var(--background-dark-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.two-btn{
|
||||
display:grid;
|
||||
justify-content:center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.marg{
|
||||
margin:20px;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.categories{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
padding:20px 0;
|
||||
border-bottom:5px solid var(--background-dark-green);
|
||||
}
|
||||
|
||||
.btn-list{
|
||||
margin: 0 20px;
|
||||
width: 150px;
|
||||
}
|
||||
BIN
highneed/static/images/img-1.png
Normal file
|
After Width: | Height: | Size: 419 KiB |
BIN
highneed/static/images/img-2.png
Normal file
|
After Width: | Height: | Size: 223 KiB |
BIN
highneed/static/images/img-article-m.jpg
Normal file
|
After Width: | Height: | Size: 142 KiB |
BIN
highneed/static/images/img-article-s.jpg
Normal file
|
After Width: | Height: | Size: 132 KiB |
BIN
highneed/static/images/img-article.jpg
Normal file
|
After Width: | Height: | Size: 226 KiB |
BIN
highneed/static/images/img-article2-m.jpg
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
highneed/static/images/img-article2-s.jpg
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
highneed/static/images/img-article2.jpg
Normal file
|
After Width: | Height: | Size: 98 KiB |
BIN
highneed/static/images/img-map-m.png
Normal file
|
After Width: | Height: | Size: 398 KiB |
BIN
highneed/static/images/img-map-s.png
Normal file
|
After Width: | Height: | Size: 134 KiB |
BIN
highneed/static/images/img-map.png
Normal file
|
After Width: | Height: | Size: 1019 KiB |
BIN
highneed/static/images/test.jpg
Normal file
|
After Width: | Height: | Size: 158 KiB |
BIN
highneed/static/images/test1.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |