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 |
Codecademy Bass Project | 2,924 Kb |
Newsroom Codecademy project | 2,967 Kb |
Uematsu | 2,512 Kb |
CODECADEMY EXCURSION | 2,432 Kb |
CODECADEMY BOLT | 3,159 Kb |
Wikipedia Viewer | 2,619 Kb |
Twitch APP FREECODECAMP | 2,022 Kb |
A Pen by David Carranza | 1,539 Kb |
React practice | 4,427 Kb |
HEADLINES CODECADEMY PROJECT | 2,674 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 |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Test | Dviate | 2,668 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Flip test | Madhes | 1,635 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 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!