Codecademy Bass Project

Developer
David Carranza
Size
2,924 Kb
Views
28,336
  1. Codecademy Bass Project Previews
  2. Codecademy Bass Project HTML Codes
  3. Codecademy Bass Project CSS Codes

How do I make an codecademy bass project?

What is a codecademy bass project? How do you make a codecademy bass project? This script and codes were developed by David Carranza on 09 October 2022, Sunday.

Codecademy Bass Project Previews
IQ Test

Codecademy Bass Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codecademy Bass Project</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<div class ="jumbotron"> <div class = "container"> <div class ="header"> <div class ="row"> <div class="col-md-3"> <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg'> </div> <div class="col-md-9"> <ul> <li><a href='#'>Features</a></li> <li class ="btn btn-default"><a href='#'>Download</a></li> </ul> </div> </div> </div> <div class="main">	<div class="row"> <div class = "col-md-7"> <h1>Turn Up the Bass</h1> <p>From the newest releases to classic albums, we have the best music for you <br/>to enjoy.</p> </div> </div> </div> </div> </div> <div class ='supporting-1'> <div class = "container"> <div class = 'row'> <div class='col-md-6'> <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg'> </div> <div class='col-md-6'> <h2>Music Just for You</h2> <p>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p> </div> </div> </div> </div> <div class= 'supporting-2'> <div class = "container"> <div class = 'row'> <div class='col-md-6'> <h2>Listen Everywhere</h2> <p>Take your music with you everywhere you go. Listen for free for free on any device - mobile, tablet, and your computer.</p> </div> <div class='col-md-6'> <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg'> </div> </div> </div> </div> <div class ='supporting-3'> <div class = "container"> <div class = 'row'> <div class='col-md-6'> <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg'> </div> <div class='col-md-6'> <h2>Connect with Others</h2> <p>Find the right songs for the right occassions. Let your friends know what you're listening to, and connect with others who share the music you love.</p> </div> </div> </div> </div> <div class= 'supporting-4'> <div class = 'container'> <h2>Try it now</h2> <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/app-store.png'> <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/google-play.png'> </div> </div> <div class='footer'> <div class='container'> <div class='col-md-2'> <h3>Bass</h3> <ul> <li><a href='#'>Install</a></li> <li><a href='#'>Mobile</a></li> </ul> </div> <div class='col-md-2'> <h3>About</h3> <ul> <li><a href='#'>Blog</a></li> <li><a href='#'>Team</a></li> <li><a href='#'>Jobs</a></li> </ul> </div> <div class='col-md-2'> <h3>Support</h3> <ul> <li><a href='#'> Help Center </a></li> <li><a href='#'> Get Started </a></li> <li><a href='#'> Contact Us </a></li> </ul> </div> <div class='col-md-2'> <h3>Community</h3> <ul> <li><a href='#'> Facebook </a></li> <li><a href='#'> Twitter </a></li> <li><a href='#'> Google+ </a></li> </ul> </div> </div> </div> </body>
</body>
</html>

Codecademy Bass Project - Script Codes CSS Codes

* { box-sizing: border-box;
} html,body { margin: 0; padding: 0; color: #fff;
}
.container { max-width: 1000px;
}
/*********** HEADER ***********/
.jumbotron { background: url('https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg') no-repeat center center; background-size: cover; height: 600px;
}
.header .btn-default { border: 0px; border-radius: 0; padding: 8px 30px; background-color: #ff003d; color:#FFF;
}
.header img { width: 100px; height: 100px;
}
.header ul { list-style:none; color:#fff;
}
.header li{ display: inline-block; margin-top: 50px; margin-right: 20px;
}
.header .col-md-9 { text-align: right; color: #fff;
}
.header .btn { margin-bottom: 50px;
}
/*********** MAIN area *********/
.main h1 { padding-top: 60px;
}
/*********** SUPPORTING SECTIONS *********/
.supporting-1 { margin-top: -30px;
}
.supporting-1 img, .supporting-2 img, .supporting-3 img { width: 420px; height: 300px;
}
.supporting-1,
.supporting-2,
.supporting-3 { padding: 65px 40px;
}
.supporting-1, .supporting-3 { background-color: #161718;
}
.supporting-2 { background-color: #000;
}
.supporting-4 h2 { padding-top: 80px;
}
.supporting-4 { background: url('https://s3.amazonaws.com/codecademy-content/projects/bass/feature.jpg') no-repeat center center; background-size: cover; height: 400px; text-align: center;
}
.supporting-4 h2 { padding-top: 120px;
}
/*************************** FOOOTER ***************/
.footer { background-color: #000; padding-top: 75px; padding-bottom: 65px;
}
.footer h3 {
text-transform: uppercase;
font-size: 15px;
}
.footer ul { list-style: none; margin: 0; padding: 0;
}
.footer ul li a { color: #AAAAAA;
}
/**** links ****/
.col-md-9 a { color: #fff;
}
.btn a:hover { color:#333333; text-decoration: none;
}
Codecademy Bass Project - Script Codes
Codecademy Bass Project - Script Codes
Home Page Home
Developer David Carranza
Username HotChaiLatte
Uploaded October 09, 2022
Rating 3
Size 2,924 Kb
Views 28,336
Do you need developer help for Codecademy Bass Project?

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!

David Carranza (HotChaiLatte) Script Codes
Name
Newsroom Codecademy project
Twitch APP FREECODECAMP
Wikipedia Viewer
React practice
Codeacademy Meme Generator jQuery Project
HEADLINES CODECADEMY PROJECT
CODECADEMY EXCURSION
CODECADEMY BOLT
A Pen by David Carranza
Uematsu
Create amazing love letters 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!