Skip to content

Instantly share code, notes, and snippets.

@VeronicaM

VeronicaM/daily-css-images-portfolio.markdown

Created February 20, 2017 16:10
Show Gist options
  • Save VeronicaM/37079981f2c3cb54cf035ba1a291bf7d to your computer and use it in GitHub Desktop.
Save VeronicaM/37079981f2c3cb54cf035ba1a291bf7d to your computer and use it in GitHub Desktop.
Download ZIP
Daily CSS Images Portfolio
Raw
daily-css-images-portfolio.markdown

Daily CSS Images Portfolio

A portfolio template for the Daily CSS Images challenge, just update your name, insert your thoughts, and update the img src URLs | Need help? See our guide: https://medium.com/dailycssimages/daily-css-images-portfolio-template-6087907b5d07#.8y3mpbw7a

Not signed up? Sign up here: http://dailycssimages.com/

Daily CSS Images is a 100% free 50-day challenge where you will receive a pure CSS image challenge right to your inbox each weekday.

I am thankful for any feedback, cheers!

A Pen by Mihai Veronica on CodePen.

License.

Raw
index.html
<body>
<!-- Header -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="bottom-triangle">
</div>
<div class="intro-message">
<h1 class="animated bounceInDown">Veronica Mihai </h1>
<h3 class="animated lightSpeedIn">portfolio for my CSS master artist journey</h3>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading-a">Week 1</h2>
<p class="lead-a">*insert your thoughts* </p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a target='_blank' href="http://codepen.io/VeronicaM-1471082450/full/dNBJRz/" class="thumbnail">
<img src="https://content.screencast.com/users/VeraVeronica/folders/Jing/media/2ff9f397-d41d-41f5-945f-2a17d869c760/2017-02-21_0332.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<h2 class="section-heading-b">Week 2</h2>
<p class="lead-b">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading-a">Week 3</h2>
<p class="lead-a">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<h2 class="section-heading-b">Week 4</h2>
<p class="lead-b">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading-a">Week 5</h2>
<p class="lead-a">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<h2 class="section-heading-b">Week 6</h2>
<p class="lead-b">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading-a">Week 7</h2>
<p class="lead-a">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<h2 class="section-heading-b">Week 8</h2>
<p class="lead-b">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading-a">Week 9</h2>
<p class="lead-a">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<h2 class="section-heading-b">Week 10</h2>
<p class="lead-b">*insert your thoughts*</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
<div class="col-sm-2">
<a target='_blank' href="#" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Insert%20Photo%20Here.png" alt="...">
</a>
</div>
</div>
</div>
<!-- /.container -->
</div>
</body>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,500,700|Lato');
//colors
$primary: #84EDBE;
$primary-background: rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0);
$accent: #1D3156;
$accent2: #FDC167;
$accent3:#FF8A00;
$accent4: rgba(209, 247, 207, 0.71);
$neutral-white: #ffffff;
$neutral-gray: #28282B;
//fonts
$primary-font: "Lato";
$secondary-font: "Open Sans";
$large-font-size: 68px;
$small-font-size: 26px;
$extra-small-font-size: 16px;
$mobile-large-font-size: 38px;
$mobile-small-font-size: 8px;
$mobile-extra-small-font-size: 6px;
$thick-font-weight: 500;
$medium-font-weight: 300;
$uppercase-transform: uppercase;
//shapes
$triangle: polygon(50% 43%, 0% 100%, 100% 100%);
body,
html {
width: 100%;
height: 100%;
font-size:18px;
}
.icon{
margin-right: 10px;
color: white;
}
.icon-webpage{
position: absolute;
top: 25%;
left: 25%;
color: $accent;
}
.intro-header {
padding-top: 0px;
padding-bottom: 20px;
text-align: center;
background: linear-gradient(to right, rgba(46, 68, 78, 0.83) 1%, rgba(16, 81, 112, 0.95) 37%, rgba(28, 51, 87, 0.91) 91%, rgba(29, 49, 86, 0.93) 94%), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.26.36%20PM.png) no-repeat center center;
background-size: cover;
}
.bottom-triangle{
position: absolute;
bottom: -20px;
left: 25%;
height: 30%;
width: 50%;
background: $accent;
-webkit-clip-path: $triangle;
clip-path: $triangle;
}
.intro-message {
position: relative;
padding-top: 15%;
padding-bottom: 20%;
}
.intro-message > h1 {
color: $accent2;
font-weight: 100;
font-size: $large-font-size;
font-family: $primary-font;
}
#bold{
color: $accent;
font-weight: 700;
}
.intro-message > h3 {
color: $accent3;
font-size: $small-font-size;
font-family: $secondary-font;
margin-top: 20px;
}
#button-a{
color: $neutral-white;
font-size: $small-font-size;
font-family: $secondary-font;
margin-top: 30px;
border: solid 6px $neutral-white;
background: $accent;
padding: 15px;
text-transform: $uppercase-transform;
font-weight: $thick-font-weight;
}
#button-b{
color: $neutral-white;
font-size: $small-font-size;
font-family: $secondary-font;
margin-top: 10px;
float: left;
border: solid 6px $neutral-white;
background: $accent;
padding: 15px;
text-transform: $uppercase-transform;
font-weight: $thick-font-weight;
}
#button-two{
color: $neutral-white;
font-size: $small-font-size;
font-family: $secondary-font;
margin-top: 10px;
margin-bottom: 20px;
border: solid 6px $neutral-white;
background: none;
padding: 15px;
text-transform: $uppercase-transform;
font-weight: $thick-font-weight;
}
.section-heading-a, .lead-a{
text-align: left;
}
.section-heading-b, .lead-b{
text-align: right;
color: $accent2;
}
.content-section-a {
padding: 50px;
padding-bottom: 80px;
background: $accent;
text-align: center;
color: $accent4;
}
.content-section-b {
padding: 50px;
padding-bottom: 80px;
background: linear-gradient(to right, rgba(255,132,0,0.92) 1%,rgba(255,132,0,0.95) 37%,rgba(228,87,33,1) 91%,rgba(226,84,35,1) 94%);
text-align: center;
color: $neutral-white;
}
//mobile responsive
@media all and (max-width: 600px) {
.intro-message > h1 {
font-size: $mobile-large-font-size;
}
.section-heading-a, .lead-a{
text-align: center;
}
.section-heading-b, .lead-b{
text-align: center;
}
#button-b{
float: none;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment