Copy link to clipboard
Copied
Is codepen.io really a great a source for grabbing HTML and CSS items for building websites? Because, im now at a point where I almost feel like it isn't, and half the codes on that site don't work properly with broken links and or images and such. I grab something from there and I feel like it takes me a few steps back. Your opinion, and if you have another site for a better resource, please let me know. thanks.
Tittle was edited by Moderator.
CodePen, JS Fiddle, Bootsnips and other code sharing sites are testing grounds. Sometimes the code works OK or not. Use at your own risk and do your own testing.
Copy link to clipboard
Copied
CodePen, JS Fiddle, Bootsnips and other code sharing sites are testing grounds. Sometimes the code works OK or not. Use at your own risk and do your own testing.
Copy link to clipboard
Copied
im kinda notcing that, I have this top nav bar that I edited from Codepen.io and everytime I add an image carousel underniethe it, it just screws up the dropdown nav portion of it.
Copy link to clipboard
Copied
Are you using Bootstrap & jQuery?
Which versions?
Copy link to clipboard
Copied
None of the above, heres the HTML and CSS code for it.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>S.T. Graffix - Illustrator</title>
<link href="stg-style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 24px;
color: #0061ff;
}
</style>
</head>
<body>
<h1><font class="textcoloured">S.T. Graffix:</font> Specializing In Graphic Design & Apparel Printing</h1>
<div id="container">
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="drawings.html">Drawings</a></li>
<li><a href="illustrator.html">illustrator</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="shirts.html">Printed Shirts</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div>
<div>
<div class="carousel">
<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
<div class="slide-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Timisoara_-_Regional_Business_Centre.jpg">
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">
<span>‹</span>
</label>
<label for="img-2" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">
<div class="slide-image">
<img src="http://www.timisoaranight.gruzphoto.eu/IMG_8554.jpg">
</div>
<div class="carousel-controls">
<label for="img-1" class="prev-slide">
<span>‹</span>
</label>
<label for="img-3" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">
<div class="slide-image">
<img src="https://speakzeasy.files.wordpress.com/2015/05/twa_blogpic_timisoara-4415.jpg">
</div>
<div class="carousel-controls">
<label for="img-2" class="prev-slide">
<span>‹</span>
</label>
<label for="img-1" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" id="img-dot-1"></label>
<label for="img-2" class="carousel-dot" id="img-dot-2"></label>
<label for="img-3" class="carousel-dot" id="img-dot-3"></label>
</div>
</ul>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ffffff;
color: #fff;
margin: 0px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #0061ff;
line-height: 60px;
margin-top: 30px;
text-align:left;
margin-left: 60px;
font-size:50px;
font-family: 'Bree Serif', 'serif';
}
.textcoloured {
color: #000000
}
#container {
margin: 0 auto;
}
nav {
margin: 50px 0;
background-color: #0061ff;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #0061ff;
transition: 0.5s;
}
nav a {
display:block;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
transition: 0.5s;
}
nav a:hover {
background-color: #000000;
transition: 0.5s;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
opacity: 0.0;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
opacity: 1.0;
top -20px;
animation-name: fadein;
animation-duration: 0.5s;
z-index: -1;
}
@keyframes fadein {
from {opacity: 0.0; top: -20px;}
to {opacity: 1.0; top: 60px;}
}
/* Dropdown */
nav ul ul li {
width:190px;
float:none;
display:list-item;
position: relative;
transition: 0.5s;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
.carousel {
margin-left: 35%;
margin-right: 30%;
}
ul.slides {
display: block;
position: relative;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ul.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}
.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}
.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #fff;
}
.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}
.slide-image:hover + .carousel-controls label{
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}
.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
margin: 10px;
}
input:checked + .slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .carousel-controls label {
display: block;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
opacity: 1;
}
input:checked + .slide-container .nav label { display: block; }
Im thinking this Div line may or may not have something to do with it, im not 100% sure.
Copy link to clipboard
Copied
Fix your code errors.
Copy link to clipboard
Copied
thats another problem Im having with getting things from Codepen, errors
Copy link to clipboard
Copied
I don't know how they got there but these errors are in your markup.