My CodePen Projects

Developer
Sarah Dunlap
Size
3,111 Kb
Views
6,072
  1. My CodePen Projects Previews
  2. My CodePen Projects HTML Codes
  3. My CodePen Projects CSS Codes

How do I make an my codepen projects?

What is a my codepen projects? How do you make a my codepen projects? This script and codes were developed by Sarah Dunlap on 18 January 2023, Wednesday.

My CodePen Projects Previews
IQ Test

My CodePen Projects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My CodePen Projects</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <!--Start Header --> <header> <div class="row"> <div class="col-md-6"> <img src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/sd_logo.jpg" class="img-logo" alt="logo with the letters sd"> </div> <div class="col-md-6 name"> <h1>SARAH DUNLAP</h1> <h3>DEVELOPER | CAT FRIEND</h3> <div class='nav-buttons'> <a href="#featuredWork"><button type="button" class="btn btn-primary btn-md navButton">CodePen Projects</button></a> <a href="#contactSarah"><button type="button" class="btn btn-primary btn-md navButton">Contact</button></a> </div> </div> </div> </header> <!--End Header --> <hr> <img class="img-responsive expand" src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/woman_airplane.jpg" alt="woman in front of airplane"> <!--Start Featured Work --> <section> <a name="featuredWork"> </a> <h2 class="featured-work-title">Featured CodePen Projects</h2> <div class="featured-work"> <!--First Row --> <div class="row"> <div class="col-md-4"> <img class="img-responsive work-example" src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/tic_tac_toe.jpg" alt="tic tac toe"> <h3>Tic Tac Toe</h3> <a href="https://codepen.io/SarahDunlap/pen/yOrOQJ" class="example-link" target="_blank">https://codepen.io/SarahDunlap/pen/yOrOQJ</a> </div> <div class="col-md-4"> <img class="img-responsive work-example" src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/card_game.jpg" alt="card game image"> <h3>Card Game</h3> <a href="https://codepen.io/SarahDunlap/pen/gPoMWY" class="example-link" target="_blank">https://codepen.io/SarahDunlap/pen/gPoMWY</a> </div> <div class="col-md-4"> <img class="img-responsive work-example" src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/colors2.jpg" alt="image of navigation menu"> <h3>Colors</h3> <a href="https://codepen.io/SarahDunlap/pen/xVGoLP" class="example-link" target="_blank">https://codepen.io/SarahDunlap/pen/xVGoLP</a> </div> </div> <!--Second Row --> <div class="row"> <div class="col-md-4"> <img class="img-responsive work-example" src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/pomodoro_clock.jpg" alt="pomodoro clock"> <h3>Pomodoro Clock</h3> <a href="https://codepen.io/SarahDunlap/pen/jbJJve" class="example-link" target="_blank">https://codepen.io/SarahDunlap/pen/jbJJve</a> </div> <div class="col-md-4"> <img class="img-responsive work-example" src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/javascript_calculator.jpg" alt="calculator"> <h3>Calculator</h3> <a href="https://codepen.io/SarahDunlap/pen/avMrMP" class="example-link" target="_blank">https://codepen.io/SarahDunlap/pen/avMrMP</a> </div> <div class="col-md-4"> <img class='img-responsive work-example' src="http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/reddit_api.jpg" alt="image of the word reddit and a text box"> <h3>Reddit API</h3> <a href="https://codepen.io/SarahDunlap/pen/bpQdjr" class="example-link" target="_blank">https://codepen.io/SarahDunlap/pen/bpQdjr</a> </div> </div> </div> </section> <!--End Featured Work --> <!--Start Contact --> <section class="contact"> <a name="contactSarah"></a> <a href="https://www.linkedin.com/in/sarahdunlap" target="_blank" class='linkedIn'><i class="fa fa-linkedin-square fa-4" aria-hidden="true"></i></a> <a href="https://github.com/SarahDunlap" target="_blank" class='github'><i class="fa fa-github-square" aria-hidden="true"></i></a> <a href="http://www.applepopdesign.com" target="_blank" class='website'><i class="fa fa-globe" aria-hidden="true"></i></a> </section> <!--End Contact --> </div> <!--Footer --> <footer class="footer"> <p>Created By Sarah Dunlap</p> </footer> </body>
</body>
</html>

My CodePen Projects - Script Codes CSS Codes

/* Main Styling */
body { background-color: #2d3c49;
}
.container { background-color: #fff; margin-top: 30px; padding: 30px;
}
h1,h2,h3,h4,h5 { font-family: 'Roboto', sans-serif;
}
hr { border-top: 4px solid #7d97ad;
}
/* Header */
.name { text-align: right;
}
.name h1 { font-size: 48px; margin-bottom: 0px;
}
.name h3 { margin-top: 0px; font-size: 21px;
}
.nav-buttons a {color:#fff;}
.nav-buttons a:hover {text-decoration:none;}
/* Featured Work Section */
.featured-work-title { color: #7d97ad; margin-left: 20px;
}
.featured-work { text-align: center;
}
.featured-work h3 { text-transform: uppercase; font-size: 25px; margin-bottom: 0px;
}
a.example-link { font-size: 14px; text-decoration: none; color: #000;
}
a.example-link:hover { color:#02b3e4;
}
.col-md-4 { padding-bottom: 20px;
}
.work-example { padding: 10px; background-color: #f2f2f2; margin: 0 auto;
}
.expand {width:100%;}
/* Contact Section*/
.contact {font-size: 55px; text-align:center;}
.fa-github-square {color: #333;}
.fa-github-square:hover {color: #000;}
.fa-globe {color:#2d3c49;}
.fa-globe:hover {color:#BD232A;}
/* Footer */
.footer { text-align:center; color: #fff; margin-top: 10px;
}
/* Smaller Screens */
@media only screen and (max-width: 992px) { img.img-logo { margin-left:auto; margin-right: auto; display: block; } .name { text-align:center; }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) { .name h1 { font-size: 30px; } .name h3 { display:none; }
}
My CodePen Projects - Script Codes
My CodePen Projects - Script Codes
Home Page Home
Developer Sarah Dunlap
Username SarahDunlap
Uploaded January 18, 2023
Rating 3
Size 3,111 Kb
Views 6,072
Do you need developer help for My CodePen Projects?

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!

Sarah Dunlap (SarahDunlap) Script Codes
Name
Wikipedia Search
Pomodoro Clock
Handy Tool For Work
JavaScript Calculator
Work in Progress
Colors
Reddit API
Cat Clicker
Rotate Circle
Rock Paper Scissors
Create amazing video scripts 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!