Codecademy Junction project //
How do I make an codecademy junction project //?
What is a codecademy junction project //? How do you make a codecademy junction project //? This script and codes were developed by David Carranza on 09 October 2022, Sunday.
Codecademy Junction project // - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codecademy Junction 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> <!-- Working on this project on codepen due to it being an easier platform to work on-->
<html> <head> <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <nav class ="navbar navbar-default navbar-static-top"> <div class="header"> <div class="container"> <div class = "row"> <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" id="logo"/> <ul class ='nav'> <a href="#"> <li>About</li> </a> <a href="#"> <li>Blog</li> </a> <a href='#'> <li>Help</li> </a> <a href='#'> <li>Contact</li> </a> </ul> </div> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <h1>Meet Junction</h1> </div> </div> <div class="supporting"> <div class="container"> <div class = "row"> <div class = 'col-md-4'> <img src='https://s3.amazonaws.com/codecademy-content/projects/junction/read.svg'/> <h3>Hello</h3> <p>Discover new stories and follow your favorite writers.</p> </div> <div class = 'col-md-4'> <img src='https://s3.amazonaws.com/codecademy-content/projects/junction/write.svg'/> <h3>Write</h3> <p>Create stories about our world, or entirely new worlds.</p> </div> <div class = 'col-md-4'> <img src='https://s3.amazonaws.com/codecademy-content/projects/junction/talk.svg'/> <h3>Talk</h3> <p>Join the conversation by talking with your favorite readers and your fans.</p> </div> </div> </div> </div> <div class="button-class"> <div class="container"> <a href="#"> <span class='btn btn-default btn-lg'> Join.</span> </a> </div> </div> </body>
</html>
</body>
</html>
Codecademy Junction project // - Script Codes CSS Codes
* { box-sizing: border-box;
}
html, body { margin: 0; padding: 0; font-family: 'Merriweather', serif;
}
body { background: url('https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg') no-repeat center center fixed; background-size: cover;
}
.container { max-width:940px;
}
/* Header */
.header { margin-bottom: -1px; padding: 10px 0; background-color: rgba(0,0,0,.8);
}
.nav { display: inline;
}
.nav li { display: inline-block; color: #fff; margin-right: 20px; position: relative; top: 6px; width: 40px; padding-bottom: 5px;
}
#logo { width: 40px; height: 40px; float: left; margin-right: 50px;
}
a li:hover { color: rgb(0,255,188); border-bottom: 1px solid #00ffbc
}
/* Jumbotron */
.jumbotron { position: relative; top: 50px; text-shadow: 0 2px 3px rgba(0,0,0,.4); background-color: transparent;
}
.jumbotron h1 { color: #fff; text-align: center;
}
/* Supporting */
.supporting { margin: 40px 0 0 0; text-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.supporting img { width: 140px;
}
.supporting .col-md-4 { text-align: center; color: #fff; margin-bottom: 40px;
}
/*Button class*/
.btn { background-color:rgba(0,255,188,0.5); width: 150px;
}
.button-class { text-align: center; padding: 80px 0;
}
.btn { border: 0px solid transparent;
}
.btn:hover { color: #FFF; background-color: rgba(0,0,0,.5); text-decoration: none;
}
Developer | David Carranza |
Username | HotChaiLatte |
Uploaded | October 09, 2022 |
Rating | 3 |
Size | 2,603 Kb |
Views | 30,360 |
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!
Name | Size |
React practice | 4,427 Kb |
HEADLINES CODECADEMY PROJECT | 2,674 Kb |
Codecademy Bass Project | 2,924 Kb |
A Pen by David Carranza | 1,539 Kb |
Codeacademy Meme Generator jQuery Project | 2,738 Kb |
Uematsu | 2,512 Kb |
Newsroom Codecademy project | 2,967 Kb |
Twitch APP FREECODECAMP | 2,022 Kb |
Wikipedia Viewer | 2,619 Kb |
CODECADEMY EXCURSION | 2,432 Kb |
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!
Name | Username | Size |
HexMaze | Cantelope | 4,825 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
3D-box | Parthviroja | 2,346 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Shopping cart | Andiio | 6,581 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!