Skip to content

Commit 4619bfd

Browse files
mihrab34mihrab34
committed
style nav and hero image
1 parent 51eb07e commit 4619bfd

File tree

6 files changed

+61
-109
lines changed

6 files changed

+61
-109
lines changed

‎_config.yml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Site settings
2-
title: Everything Open Source
2+
title: Home
33
email: everythingopensource@gmail.com
44
description: >-
55
Official website to document all activities happening in the everything open source community
@@ -8,6 +8,10 @@ url: "" # the base hostname & protocol for your site, e.g. http://example.com
88
twitter_username: jekyllrb
99
logo: static/img/site/evos.jpg
1010

11+
# site details
12+
overview: Empowering individuals and organizations to embrace code and no-code Open Source contributions
13+
14+
1115
# Everything Open Source Social Links
1216
twitter: "http://twitter.com/Everything_Open"
1317
github: "https://github.com/Everything-Open-Source"

‎_includes/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<footer>
1+
<footer class="card-footer">
22
<div class="container">
33
<div class="content">
44
<!-- <div class="footer-logo">

‎_includes/header.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<nav>
2-
<div class="nav container">
1+
<nav class="navbar fixed-top align-items-center">
2+
<div class="container">
33
<div class="logo">
44
<a class="navbar-brand" href="/">
55
<img class="header-logo" src="{{site.logo}}" alt="Logo" height="45px" />
66
</a>
77
</div>
88

9-
<ul class="nav-links">
10-
<li><a href="/about/">About</a></li>
11-
<li><a href="#">Programs</a></li>
12-
<li><a href="#">Code of Conduct</a></li>
13-
<li><a href="https://mesrenyamedogbe.hashnode.dev/" target="_blank">Blog</a></li>
9+
<ul class="nav justify-content-end">
10+
<li class="nav-item"><a href="/about/" class="nav-link">About</a></li>
11+
<li class="nav-item"><a href="#" class="nav-link">Programs</a></li>
12+
<li class="nav-item"><a href="#" class="nav-link">Code of Conduct</a></li>
13+
<li class="nav-item"><a href="https://mesrenyamedogbe.hashnode.dev/" class="nav-link" target="_blank">Blog</a></li>
1414
</ul>
1515
</div>
1616
</nav>

‎_includes/home.html‎

Lines changed: 1 addition & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -17,103 +17,7 @@
1717
<body>
1818
<section>{% include header.html %}</section>
1919

20-
<div class="mini-container" style="margin-bottom: 30px; margin-top: 30px;">
21-
<div class="card h-100">
22-
<div class="card-body">
23-
<h2 class="card-title">Tickets</h2>
24-
</div>
25-
<div class="card-footer">
26-
<p class="text-body-secondary">Tickets are on sale now. Prices are set to suit all budgets, from students to corporate delegates.</p>
27-
<a href="/get-ticket" class="btn btn-primary">Register now</a>
28-
</div>
29-
</div>
30-
</div>
31-
32-
<div class="mini-container">
33-
34-
<div class="row row-cols-1 row-cols-md-2 g-2">
35-
36-
<div class="col">
37-
<div class="card">
38-
<img src="/static/img/site/anna.png" class="card-img-top" alt="">
39-
</div>
40-
</div>
41-
42-
<div class="col">
43-
<div class="card">
44-
<img src="/static/img/site/kojo_speak.png" class="card-img-top" alt="">
45-
</div>
46-
</div>
47-
48-
</div>
49-
50-
<div class="mini-container">
51-
<h2 class="heading" style="margin-bottom: 30px; margin-top: 30px;">What's happening at DjangoCon Africa</h2>
52-
53-
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 g-4">
54-
<div class="col">
55-
<div class="card h-100">
56-
<div class="card-body">
57-
<h5 class="card-title">Talks</h5>
58-
</div>
59-
<div class="card-footer">
60-
<p class="text-body-secondary">Three days of talks, on programming, technology, careers, society and business, with speakers from across the world. <em>We've confirmed our first speakers, more coming soon.</em></p>
61-
<a href="/speakers" class="btn btn-primary">Meet some speakers</a>
62-
</div>
63-
</div>
64-
</div>
65-
66-
<div class="col">
67-
<div class="card h-100">
68-
<div class="card-body">
69-
<h5 class="card-title">Workshops and tutorials</h5>
70-
</div>
71-
<div class="card-footer">
72-
<p class="text-body-secondary">Hands-on training and learning sessions, led by experts in the field.</p>
73-
<p class="text-body-secondary"><em>Details to be published soon.</em></p>
74-
</div>
75-
</div>
76-
</div>
77-
78-
<div class="col">
79-
<div class="card h-100">
80-
<div class="card-body">
81-
<h5 class="card-title">Collaboration</h5>
82-
</div>
83-
<div class="card-footer">
84-
<p class="text-body-secondary">Work together on code, and contribute to major projects - including Django itself</p>
85-
</div>
86-
</div>
87-
</div>
88-
89-
<div class="col col-sm-12 col-md-6">
90-
<div class="card h-100">
91-
<div class="card-body">
92-
<h5 class="card-title">Django Girls</h5>
93-
</div>
94-
<div class="card-footer">
95-
<p class="text-body-secondary">A training workshop aimed at women, providing an introduction to web application development. Tens of thousands of women
96-
across the world have had their introduction to Django through this hugely successful programme</p>
97-
</div>
98-
</div>
99-
</div>
100-
101-
<div class="col col-sm-12 col-md-6">
102-
<div class="card h-100">
103-
<div class="card-body">
104-
<h5 class="card-title">Discovery</h5>
105-
</div>
106-
<div class="card-footer">
107-
<p class="text-body-secondary">DjangoCon Africa is an opportunity to discover places and people as well as technology. It will bring together participants from across Africa and the rest of the world, for mutual understanding of contexts, challenges and opportunities.</p>
108-
</div>
109-
</div>
110-
</div>
111-
</div>
112-
113-
</div>
114-
115-
</div>
116-
20+
<div class="container"></div>
11721
<section>
11822

11923
</section>

‎_layouts/default.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<title>{{ page.title }}</title>
3+
<title>{{ site.title }}</title>
44
<head>
55
<meta charset="utf-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -16,11 +16,18 @@
1616
<!-- <link rel="icon" href="/static/img/site/icon.png" type="image/x-icon"> -->
1717
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
1818
<link rel="stylesheet" href="/static/css/style.css" />
19+
<link rel="preconnect" href="https://fonts.googleapis.com">
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
1922
</head>
2023
<body>
21-
<section class="default-section">
24+
<header class="default-section">
2225
{% include header.html %}
23-
</section>
26+
27+
<div class="header-text">
28+
<h1>{{ site.overview }}</h1>
29+
</div>
30+
</header>
2431

2532
<section>
2633
<div class="container">

‎static/css/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.default-section {
2+
position: relative;
3+
background-image: url("/static/img/site/backevos.jpg");
4+
background-repeat: no-repeat;
5+
background-position: center;
6+
background-size: cover;
7+
min-height: 80vh;
8+
min-width: 100vh;
9+
}
10+
11+
.header-text {
12+
text-align: center;
13+
position: absolute;
14+
top: 50%;
15+
left: 50%;
16+
transform: translate(-50%, -50%);
17+
color: white;
18+
padding: 8rem 0.5rem;
19+
font-family: "Noto Sans", sans-serif;
20+
animation:tracking-in-expand .6s cubic-bezier(.215,.61,.355,1.000) both
21+
}
22+
23+
@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}
24+
25+
.header-text h1 {
26+
font-size: 1.5rem;
27+
}
28+
.logo {
29+
padding: 0.5rem 1rem;
30+
}
31+
32+
.nav .nav-link {
33+
color: #fff;
34+
font-weight: bold;
35+
font-size: 20px;
36+
font-family: 'Roboto', sans-serif;
37+
}

0 commit comments

Comments
 (0)