Advanced Web Design (HTML / CSS / PHP)
Homepage Design
Sitemap Sample
Contact page sample
Blog Page Sample
Webpage Sample
Webpage sample
Mobile webpage design
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Mobile Webpage Sample
Webpage Process
Design Document Process
Design Document Process
Color Scheme Process
Design Document Process
Branding Process
Branding Process
HTML / CSS / PHP Coding LANGUAGES
HTML Code: Eventpage.html
Stylesheet for PHP: Style.css
Stylesheet for PHP: Style.css
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>eventpage</title>
<link href="file:///Macintosh HD/Users/loritolentino/Desktop/wk5_homework guide/wk5.css" rel="stylesheet" type="text/css">
</head>
<div id="logo">
<a href="file:///Macintosh HD/Users/Documents/Unnamed Site 2/Logo_scs.png"><img src="../Southcoastsound_FTP_SITE/Logo_scs.png" alt="logo" style="width:200px;height:195px;"></a></div>
<header>
<div class="topnav">
<ul>
<li><a href="eventpage.html">Events</a></li>
<li><a href="file:///Macintosh HD/Users/loritolentino/Desktop/wk5_homework guide/about">About</a></li>
<li><a href="file:///Macintosh HD/Users/loritolentino/Desktop/wk5_homework guide/blog">Blog</a></li>
<li><a href="file:///Macintosh HD/Users/loritolentino/Desktop/wk5_homework guide/shoutout">Contact</a></li>
</ul>
</div>
</header>
<body>
<!social media icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="socialmedia">
<a href="https://www.facebook.com/" class="fa fa-facebook"></a>
<a href="https://soundcloud.com/discover" class="fa fa-soundcloud"></a>
<a href="https://open.spotify.com/"class="fa fa-spotify"></a>
<a href="https://www.instagram.com/" class="fa fa-instagram"></a>
<a href="https://www.youtube.com/" class="fa fa-youtube"></a>
</div>
<div class="kidevent">
<h2>South Coast Sound Events</h2>
<div class="box" style="background-color:#bbb">
<h3>Kids Out & About</h3>
<p><b>Rhode Island:</b></p>
RI kids Out & About: <a>"https://providence.kidsoutandabout.com/content/music-children-rhode-island"</a>
<p><b>Kids Music Clubhouse:</b></p>Locations:
<p><b>Kids Music Network:</b></p>Network with friends:
<a href= "Childrens Music Network: https://childrensmusic.org/">"Childrens Music Network: https://childrensmusic.org/"</a>
</div>
<div class="box" style="background-color:#ccc">
<h3>21 + Events</h3>
<p><b>Music Cafe':</b></p>Coffee shops and Tunes:
<p><b>Adult Music Camp:</b></p>Snow Pond:
<p><b>Live Music:</b></p> Hula La Island Music:
<a href= "http://www.hesaidshesaidri.com">"http://www.hulala.com"</a>
<p><b>Senior Singing Lessons:</b></p> Adult Singing Classes:
<a href= "http://www.southcoastmt.com">"http://www.hulala.com"</a>
<p><b>Activity Ideas:</b></p> Music Activities:
<a href= "http://www.goldencarers.com">"http://www.goldencarers.com"</a>
<p><b>Social Seniors:</b></p> Single Senior Activities:
<a href= "http://www.kensak.com">"http://www.kensak.com"</a>
</div>
</div>
<div class="form">
<form action="/action_page.php">
<p> Sign-up here for event updates. Thank you for checking us out! </p>
<label for="name">Email:</label><br>
<input type="text" id="lname" name="lname" value="Doe"> <input type="submit" value="Submit"><br><br>
</form>
</div>
<footer>
<h4>© southcoast sound</h4>
<a href="events.html">Events</a>
<a href="blog.html">Blog</a>
<a href="blog.html">Contact</a>
</footer>
</body>
</html>
Stylesheet for PHP: Style.css
Stylesheet for PHP: Style.css
Stylesheet for PHP: Style.css
/*
Theme Name: southcoastsound
Theme URI: http://southcoastsound.com (can
leave blank)
Description: Child theme of blankslate
Author: Lori
Author URI: southcoastsound.com
Template: blankslate
*/
body {
background-color:#8A8787;
}
header {
padding: 60px;
background-color: black;
font-size: 30px;
}
h1 {
color: yellow;
font-size: 30px;
font-family:righteous;
font-weight: lighter;
align-content: center;
margin-left: 300px;
margin-right: 300px;
}
header li {
display: inline;
}
p {
font-size:15px;
font-weight: lighter;
align-content: center;
color: black;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
line-height: 1.2;
}
#logo {
float: left;
position: absolute;
top: 20px;
padding: 10px;
}
h2 {
font-family: righteous;
text-align: center;
font-size: 40px;
color: yellow;
padding: 20px;
margin-bottom: 0;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*text boox*/
.box, .a {
float: left;
width: 33.33%;
padding: 10px;
box-sizing: border-box;
height: 700px;
font-size: 15px;
}
h3, .p {
font-size: 30px;
color: yellow;
background-color: black;
text-align: center;
font-family: righteous;
font-weight: lighter;
margin-top: 0px;
padding: 20px;
}
p {
color: yellow;
height: 40px;
text-align: center;
padding: 20px;
}
a {
color: #4E4B4B;
padding: 20px;
}
label, .p {
font-family: righteous;
color: yellow;
align-content: center;
}
input {
color: white;
}
form {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: 20px;
padding: 20px;
background-color:#363434;
text-align: center;
color: yellow;
}
form input {
color: black;
text-align: center;
background-color:#312F2F;
padding: 10px;
font-family: righteous;
}
/* Top Navigation buttons */
.topnav, a li {
position: absolute; top: 0; right: 0;
color: yellow;
padding: 10px 20px;
font-family :righteous;
font-weight: lighter;
font-size: 20px;
}
/* Nav color hover */
.topnav, a:hover {
color: gray;
}
/*photo column*/
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 350px;
margin-top: 40px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.fa-facebook {
font-size: 60px;
color:blue;
padding: 10px;
float: right;
}
.fa-instagram {
color:darkred;
padding: 10px;
float: right;
}
.fa-soundcloud {
color:orange;
padding: 10px;
float: right;
}
.fa-youtube {
color:white;
padding: 10px;
float:right;
}
.fa-spotify {
color:greenyellow;
padding: 10px;
float:right;
}
.socialmedia {
font-size: 20px;
position: absolute; top: 5; right: 0;
}
.socialmedia a:hover {
background-color: purple;
color: black;
}
footer, h4 {
text-align: center;
font-size: 20px;
padding: 10px;
background-color: black;
color: yellow;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: right;
}
}
PHP code : Index.php
Stylesheet for PHP: Style.css
PHP code : Index.php
<?php get_header(); ?>
<main id="content">
<h1>South Coast Sound Blog</h1>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="column">
< a href="<?php the_permalink( );?>">
<h2><?php the_title( );?></h2>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
</a>
<div class="entry-meta">
<span class="author vcard"><?php the_author_posts_link(); ?></span>
<span class="meta-sep"> | </span>
<span class="entry-date"><?php the_time( get_option( 'date_format' ) ); ?></span>
<span class="meta-sep"> | </span>
<span class="entry-date"><?php the_category( ', ' );?></span>
</div>
<?php the_excerpt( );?>
</div>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</main>
<?php get_footer(); ?>
Copyright © 2025 RaH's World - All Rights Reserved.
This website uses cookies.
We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.