Skip to content

Commit

Permalink
Wireframes, WIP Blog page HTML and CSS added
Browse files Browse the repository at this point in the history
  • Loading branch information
@KTKCodes
KTKCodes committed Aug 15, 2024
1 parent ce9be5f commit 25a432c
Show file tree
Hide file tree
Showing 9 changed files with 306 additions and 47 deletions.
2 changes: 1 addition & 1 deletion WIP.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="WIP.html">Learn</a>
Expand Down
Binary file added Wireframe/Events Wireframe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/Home Wireframe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/WIP Wireframe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions blog.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

body {
font-family: "Source Sans 3", sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Lora", sans-serif!important;
font-weight: 600 !important;
}

li a:hover{
background-color: #ff914d;
transition: 0.4s;
border-radius: 0.25rem;
}

footer {
background-color: lightpink;
display: flex;
justify-content: center;
padding: 1rem;
}

footer p {
margin: 0!important;
}


.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}

.navbar-brand img {
mix-blend-mode: multiply;
}

.navbar-brand {
display: flex;
}

.navbar-brand p {
margin-top: 0.75rem;
}

.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
padding: 0 4rem;
}

.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;

}

.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}

.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}

.flex-auto {
flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
.h-md-250 { height: 250px; }
}

/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
}
.blog-pagination > .btn {
border-radius: 2rem;
}

/*
* Blog posts
*/
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}

227 changes: 184 additions & 43 deletions blogs.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,185 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>South Arts Hub</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<ul class="topnav">
<li><a href="events.html"><b>Events</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="news.html">News</a></li>
<li><a href="learn.html">Learn</a></li>
<li style="float:left"><img src="img\staticlogo.png" alt="logo" height=50px></li>
<li style="float:left"><a href="index.html">South Arts Hub</b></a></li>
</ul>

<footer>
<div class="container mt-5">
<div class="row row-cols-4">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>South Arts Hub</title>
<link rel="stylesheet" href="blog.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>

<div class="col"><b>Learn</b></div>
<div class="col"><b>News</b></div>
<div class="col"><b>Blogs</b></div>
<div class="col"><b>Events</b></div>

<div class="col">Drawing</div>
<div class="col">Surrey</div>
<div class="col">Social Media for Artists</div>
<div class="col">Craft Fairs</div>

<div class="col">Painting</div>
<div class="col">Hampshire</div>
<div class="col">How to Find Your Style</div>
<div class="col">Exhibitions</div>

</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>


<nav class="navbar navbar-expand-md bg-body-tertiary">
<div class="container">
<!--brand-->
<a class="navbar-brand" href="index.html">
<img src="img/staticlogo.png" alt="Logo" width="45px" class="logopng"><p>South Arts Hub</p>
</a>
<!--Hamburger button/toggler-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--set of links-->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="WIP.html">Learn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="WIP.html">Blogs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="WIP.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</div>
</nav>


<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 link-secondary" href="#"><p>Venues</p></a>
<a class="p-2 link-secondary" href="#"><p>Interviews</p></a>
<a class="p-2 link-secondary" href="#"><p>Workshops & Clubs</p></a>
<a class="p-2 link-secondary" href="#"><p>Art Business Tips</p></a>
<a class="p-2 link-secondary" href="#"><p>Art & Mental Health</p></a>
</nav>
</div>
</div>

<main class="container">

<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
</div>
</div>

<div class="row mb-2">
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

</div>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

</div>
</div>
</div>
</div>

<div class="row g-5">
<div class="col-md-8">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
From South Arts Hub
</h3>

<article class="blog-post">
<h2 class="blog-post-title">Hidden Gems: Unveiling Surrey and Hampshire's Best Art Spaces</h2>
<p class="blog-post-meta">August 14, 2024</p>

<p class="lead">Surrey and Hampshire are brimming with artistic talent, and the counties boast a diverse range of spaces dedicated to showcasing and nurturing creativity. From intimate galleries to expansive art centres, there's something to inspire everyone. Let's uncover some of the hidden gems that the art scene in Surrey and Hampshire has to offer.
<br><br>
<h4><strong>Galleries and Art Centres</strong></h4> <br>
Surrey and Hampshire are home to a number of exceptional galleries and art centres. The <a href="https://www.newashgate.org.uk/" target="_blank">New Ashgate Art Gallery</a> in Farnham is a must-visit, renowned for its collection of contemporary art. For a more intimate experience, consider the <a href="https://www.wattsgallery.org.uk/" target="_blank">Watts Gallery</a> in Guildford, which showcases the work of local artists. In Hampshire, the <a href="" target="_blank">Southampton City Art Gallery</a> houses an impressive permanent collection and hosts exciting temporary exhibitions.
<br><br>
<h4><strong>Independent Art Spaces</strong></h4> <br>
Beyond the established galleries, there's a thriving independent art scene in Surrey and Hampshire. Look out for pop-up shops and exhibitions in local spaces, such as the high street or converted buildings. <a href="https://www.artandgrind.co.uk/" target="_blank">Art and Grind</a> in Guildford often hosts innovative art events and is a cafe, while <a href="https://www.thearthouse.co/" target="_blank">The Art House</a> in Woking provides a platform for emerging artists.
<br><br>
<h4><strong>Studios and Workshops</strong></h4> <br>
If you're keen to get involved in the creative process, why not explore the many studios and workshops in the area? Places like <a href="https://newhouse.art/" target="_blank">New House Art Space</a> offer a variety of classes and courses for artists of all levels, as well as providing studios for artists to rent out. In Hampshire, <a href="https://www.southampton.ac.uk/about/faculties-schools-departments/winchester-school-of-art" target="_blank">The Winchester School of Art</a> is a renowned institution with a strong reputation for producing talented graduates.
<br><br>
<h4><strong>Outdoor Art and Sculpture</strong></h4> <br>
Don't forget to appreciate the art that surrounds you. Surrey and Hampshire boast beautiful countryside, and many artists have taken inspiration from the natural world. <a href="https://thesculpturepark.com/" target="_blank">The Sculpture Park</a> in Churt near Farnham is a delightful place to discover contemporary sculpture in a stunning setting.
<br><br>
There's no doubt that Surrey and Hampshire offer a rich and varied art scene. Whether you're a seasoned art lover or simply looking to explore something new, you're sure to find inspiration in these hidden gems.
</p>

</article>

<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary" href="#">Older</a>
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
</nav>

</div>

<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">About</h4>
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
</div>

<!--<div class="p-4">
<h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">March 2021</a></li>
<li><a href="#">February 2021</a></li>
<li><a href="#">January 2021</a></li>
<li><a href="#">December 2020</a></li>
<li><a href="#">November 2020</a></li>
<li><a href="#">October 2020</a></li>
<li><a href="#">September 2020</a></li>
<li><a href="#">August 2020</a></li>
<li><a href="#">July 2020</a></li>
<li><a href="#">June 2020</a></li>
<li><a href="#">May 2020</a></li>
<li><a href="#">April 2020</a></li>
</ol>
</div>-->

<!--<div class="p-4">
<h4 class="fst-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>-->
</div>
</div>
</div>

</main>

<footer>
<p>Made by KTK | 2024</p>
</footer>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>
Binary file added img/blog header.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="WIP.html">Learn</a>
Expand Down Expand Up @@ -65,10 +65,10 @@ <h1 class="title">Welcome to your local Arts and Culture Hub!</h1> <br>
<h1>Our Mission</h1>
</div>
<div class="col-md-6">
To be the indispensable digital hub for Surrey and Hampshire's thriving arts and culture scene.
<p class="mission">To be the indispensable digital hub for Surrey and Hampshire's thriving arts and culture scene.
We aim to inspire, inform, and connect artists, audiences, and learners through a comprehensive platform that showcases local talent, facilitates artistic growth,
and enriches the cultural fabric of our region. By providing a wealth of information, resources, and opportunities, we strive to make the arts accessible to everyone
and foster a vibrant, creative community.
and foster a vibrant, creative community.</p>
</div>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ h1, h2, h3, h4, h5, h6{
font-size: 2.5rem;
}

.mission {
font-size: 1.2rem;
}

.events {
padding: 4rem 1.25rem;
}
Expand Down

0 comments on commit 25a432c

Please sign in to comment.