Artist Page Styling v5

Developer
Nathan Gregg
Size
3,275 Kb
Views
6,072
  1. Artist Page Styling v5 Previews
  2. Artist Page Styling v5 HTML Codes
  3. Artist Page Styling v5 CSS Codes
  4. Artist Page Styling v5 JS Codes

How do I make an artist page styling v5?

Test. What is a artist page styling v5? How do you make a artist page styling v5? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Artist Page Styling v5 Previews
IQ Test

Artist Page Styling v5 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Artist Page Styling v5</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="its_a_page" id="artist_page">
<div id="artist_container">
<div class="artist_bit ab_small ab_scroll"> <i class="fa fa-chevron-circle-down fa-2x ab_chevron"></i> <div class="artist_image_div"><img class="artist_img" src="https://farm4.staticflickr.com/3807/13508434583_f1f5171b24_b.jpg"/></div> <p class="artist_name">nathansonic</p> <div class="ab_lg ab_fade"> <div class="lg_artist"><p>nathansonic</p></div> <div class="album_row"> <div class="album_title_div"> <img class="album_img" src="https://farm2.staticflickr.com/1603/24957577775_34e3bde462.jpg"/> <div class="album_title"><p>Album No. 1</p></div> </div> <div class="album_tracks"> <div class="album_track"> <span> The first track </span><i class="fa fa-play"></i><i class="fa fa-plus-circle"></i><i class="fa fa-heart"></i> </div> <div class="album_track"> <span> The second track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The third track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The fourth track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The fifth track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The sixth track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The seventh track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> </div> </div> <div class="album_row"> <div class="album_title_div"> <img class="album_img" src="https://farm2.staticflickr.com/1661/24957577855_80eb30d513.jpg"/> <div class="album_title"><p>Album No. 2</p></div> </div> <div class="album_tracks"> <div class="album_track"> <span> The first track </span><i class="fa fa-play"></i><i class="fa fa-plus-circle"></i><i class="fa fa-heart"></i> </div> <div class="album_track"> <span> The second track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The third track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The fourth track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The fifth track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The sixth track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> <div class="album_track"> <span> The seventh track </span><i class="fa fa-play fa-lg"></i><i class="fa fa-plus-circle fa-lg"></i><i class="fa fa-heart fa-lg"></i> </div> </div> </div> </div>
</div>
</div>
</div>
<!--
var artistlist = [ { "id": "a0", "artist": "Nathan", "albums": [ { "album_title": "Album No. 1", "album_cover": "" }, { "album_title": "Album No. 2", "album_cover": "" }, { "album_title": "Various", "album_cover": "" } ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm4.staticflickr.com/3807/13508434583_f1f5171b24_b.jpg", "biog": "Solo computer noises maker. Kind of simple and cutesy, mixed with textural noises." }, { "id": "a1", "artist": "Lypcyl", "albums": [ { "album_title": "Bedroom Songs", "album_cover": "" }, { "album_title": "Stuff", "album_cover": "" } ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm8.staticflickr.com/7334/11804102536_d799e38e84_k.jpg", "biog": "Electronica and beats from the bedroom" }
];
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Artist Page Styling v5 - Script Codes CSS Codes

*{margin:0;padding:0;font-family: VT323;}
.hidden { display: none;
}
#artist_page { font-family: VT323; position: absolute; top: 0; width: 100%; padding-top: 30px; margin-bottom: 100px;
}
#artist_container { position: relative; width: 80%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-around;
}
.artist_bit { position: relative; margin-bottom: 20px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; border: 1px solid lightgrey; border-radius: 5px; transition: 0.4s; overflow: scroll; font-size: 16px;
}
.ab_scroll { overflow: hidden;
}
.ab_small { height: 250px; width: 350px;
}
.ab_large { height: 350px; width: 70%;
}
.ab_chevron { position: absolute; top: 10px; left: 10px; opacity: 0.5; z-index: 100; transition: 0.4s;
}
.ab_chevron_rotate { transform: rotate(180deg);
}
.artist_image_div { width: 100%; overflow: hidden; transition: 0.4s;
}
.ab_fade { opacity: 0
}
.artist_img { width: 100%;
}
.artist_name { color: black; text-align: center; margin: 5px; width: 100%; padding: 3px; font-weight: bold; font-size: 16px; transition: 0.4s;
}
.ab_lg { width: 100%; position: absolute; top:0;bottom:0;left:0;right:0; transition: 0.4s;
}
.lg_artist { width: 100%; font-size: 28px; text-align: center; height: 40px;
}
.lg_artist p { padding: 10px;
}
.album_row { padding: 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; background-color: white;
}
.album_row div {
}
.album_title_div { flex: 2; display: flex; flex-flow: column nowrap;
}
.album_img { width: 200px;
}
.album_title { font-size: 36px; font-weight: bold;
}
.album_tracks { flex: 4; display: flex; flex-flow: column nowrap; text-align: right;
}
.album_track { padding: 10px; display: flex; flex-flow: row nowrap; justify-content: flex-end; border-bottom: 1px solid lightgrey;
}
.album_track span { margin-right: 10px;
}
.album_track i { padding: 0 5px;
}

Artist Page Styling v5 - Script Codes JS Codes

$(function() { $('.ab_chevron').on("click", function(){ var $this = $(this), $parent = $this.parent('div'); $this.toggleClass('ab_chevron_rotate'); $parent.toggleClass('ab_large').toggleClass('ab_scroll'); $parent.children('.artist_name').toggleClass('ab_fade'); $parent.children('.artist_image_div').toggleClass('ab_fade'); $parent.children('.ab_lg').toggleClass('ab_fade'); })
});
Artist Page Styling v5 - Script Codes
Artist Page Styling v5 - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 3,275 Kb
Views 6,072
Do you need developer help for Artist Page Styling v5?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nathan Gregg (nathansonic) Script Codes
Name
CWB settings
Color Swatch
HTML5 Audio example
Form and Validation V1
CWB Full V3
HTML5 Playlist
Logo Skews etc
CWB logo
Matching 2 Arrays
Sort Isotope
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!