Skip to content

Instantly share code, notes, and snippets.

@DaisyDream

DaisyDream/index.html

Last active December 10, 2016 15:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save DaisyDream/111c7205a890fffb9caf7958f7871d63 to your computer and use it in GitHub Desktop.
Save DaisyDream/111c7205a890fffb9caf7958f7871d63 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio
Raw
index.html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<body class="container-fluid">
<div class="topnav" id="topnav">
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
<h2 id="About">
<br>
About
</h2>
<img class=rightSide src="https://scontent-cdg2-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-0/p206x206/10300891_940462199302835_8808762741895224073_n.jpg?oh=8e489af41aa35e3668b0363934f31600&oe=57B71900">
<p>
This section is about me. My name is Amanda and I'm a software developer. Maybe I could include some big words here, but I'm from the military, and we like acronyms, let me throw some of those at you: BSCS from CSF, MSCS from CTU, C++, HTML, CSS, C#.
<br> I like to learn new things and try out different strategies. I am most passionate about just making people's lives better. My hobbies include tabletop RPGs, medieval re-enactment (specifically archery), and music. <br> I began my adventure in
computers with a love of video games. I wanted to program games myself, but have found that I'm also interested in databases and user experience.<br>Through Free Code Camp, I'm learning a lot of things about CSS and JavaScript. Some of it does get boring, because I learned a lot of it before. I recently got excited about changing colors and fonts. I think my strengths lie in utility, though, and not design. I will try to make things look good, but I'm really more interested in making it work.
</p>
<br>
<br>
<div id="Portfolio">
<h2>Portfolio</div></h2>
<p>
<div class="row">
<div class="sample">
<a href="https://codepen.io/DaisyDream/full/yOrxqG/">
<img src="https://scontent.ftxl1-1.fna.fbcdn.net/v/t1.0-9/13177992_1315057241843327_1851663126359751487_n.jpg?oh=8148cdaf5a535d0bbd95df6ed6243289&oe=57A45FE1" alt="quote machine" >
</a>
<div class="desc">Recently made this random quote generator. Let me know if you have some cool quotes to add.</div>
</div>
<div class="sample">
<a href="https://codepen.io/DaisyDream/full/RaJBre/">
<img src="https://scontent.ftxl1-1.fna.fbcdn.net/v/t1.0-9/13240512_1315057518509966_8271393273193603116_n.jpg?oh=e9da356c5cdf2d8c48f1229cf9dfe745&oe=57DA355D" alt="Jane Lindskold" >
</a>
<div class="desc">I made this one to begin testing my skills with text and links. It's about my favorite author.</div>
</div>
<div class="sample">
<img src="https://scontent-vie1-1.xx.fbcdn.net/v/t1.0-9/13241422_1321329234549461_4753422914291494712_n.jpg?oh=3b406a3c1eafd13330bbc9dbc4ce17e1&oe=57C8A690" alt="Weather" width="300" height="200">
<div class="desc">Weather app. the background changes depending on the month. I know the seasons aren't exactly accurate, depending on where you are. I may look into fixing that later</div>
</div>
</div>
</p>
<br>
<div id="Contact">
<h2>Contact</div></h2> If you want to write me a message, put it here. Make sure you include an email address if you want me to respond.<br>
Your Name<br><input type="text" id = "person" name="name"><br>
Comments: <br><input type="text" name="comment" id = "words"> <br>
<button onclick="myFunction()">SUBMIT</button>
<p id="demo"></p>
<br>
<p>
<button class="btn"><a href="https://github.com/DaisyDream"><i class="fa fa-github"></i> My GitHub</button></a>
<button class="btn"><a href="https://www.facebook.com/amanda.b.daley"<i class="fa fa-facebook"></i> Facebook</button></a>
<button class="btn"><a href="https://de.linkedin.com/in/amanda-daley-26212b97"><i class="fa fa-linkedin"></i> LinkedIn</button></a>
</p>
<button onclick="display()">DISP</button>
</body>
Raw
script.js
var comments = [];
function myFunction() {
var inputOne = document.getElementById('person');
var a = inputOne.value;
var inputTwo = document.getElementById('words');
var b = inputTwo.value;
var x;
if (confirm("send this comment?") == true) {
var arr = [a, b];
console.log(arr);
comments.push(arr);
console.log(comments);
x = "Your message has been sent";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
function display(){
for (var i = 0; i<comments.length; i++){
console.log(comments[i]);}}
Raw
style.css
body {
background-color: #9966ff;
color: #000;
font-size: large;
}
.topnav {
border: 5px solid black;
width: 100%;
background-color: blue;
top: 0px;
position: fixed;
display: block;
}
#Contact {
background-color: #336600;
border: 5px solid black;
text-align: center;
color: #000000;
}
#Portfolio {
background-color: #800000;
border: 5px solid black;
text-align: center;
color: #000000;
}
#About {
background-color: #cc00cc;
color: #000000;
border: 5px solid black;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
li a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #1155ee;
color: #000;
}
div.sample {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 350px;
}
.rightSide {
float: right;
}
div.sample img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment