Highlighted

Is Codepen.io is a good source for building websites?

Participant ,
May 03, 2019

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

Views

883

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Is Codepen.io is a good source for building websites?

Participant ,
May 03, 2019

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

Views

884

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 03, 2019 0
Adobe Community Professional ,
May 03, 2019

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 2
Participant ,
May 03, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0
Adobe Community Professional ,
May 03, 2019

Copy link to clipboard

Copied

Are you using Bootstrap & jQuery?

Which versions?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0
Participant ,
May 03, 2019

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>&lsaquo;</span>

                    </label>

                    <label for="img-2" class="next-slide">

                      <span>&rsaquo;</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>&lsaquo;</span>

                    </label>

                    <label for="img-3" class="next-slide">

                        <span>&rsaquo;</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>&lsaquo;</span>

                    </label>

                    <label for="img-1" class="next-slide">

                        <span>&rsaquo;</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.

DIV.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0
Adobe Community Professional ,
May 03, 2019

Copy link to clipboard

Copied

Fix your code errors.  

CC-BugReport.jpg

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0
Participant ,
May 03, 2019

Copy link to clipboard

Copied

thats another problem Im having with getting things from Codepen, errors

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0
Adobe Community Professional ,
May 03, 2019

Copy link to clipboard

Copied

I don't know how they got there but these errors are in your markup.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0