Skip to content

Commit

Permalink
Restyling quotes, adding stylesheet
Browse files Browse the repository at this point in the history
  • Loading branch information
@melissachen2000
melissachen2000 committed Jul 10, 2024
1 parent 29b103d commit d6f6305
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 50 deletions.
65 changes: 15 additions & 50 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,7 @@
<title>Supporting students in accurately evaluating their programming abilities</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
h2 {
margin-top: 30px;
margin-bottom: 20px;
}

.speech-bubble {
min-height: 200px;
min-width: 100px;
border-radius: 20px;
padding: 25%;
position: relative;
margin-bottom: 20px;

}

.speech-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 25%;
height: 20px;
width: 20px;
box-sizing: border-box;
transform: rotate(45deg) translate(-75%);
background: inherit;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>

<body>
Expand Down Expand Up @@ -83,40 +56,32 @@ <h1 class="display-5 fw-bold">Do you teach intro CS classes? Do you want your st
heard things like this in our interviews:</p>

<div class="row">
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="speech-bubble text-dark" style="background-color: #f9f">
<p><i>"I felt like I was behind and other people wouldn't take [...]
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="speech-bubble-right text-dark" style="background-color: #f9f">
<p class="fs-5"><i>"I felt like I was behind and other people wouldn't take [...]
as long." </i></p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="speech-bubble text-dark" style="background-color: #99F">
<p><i>"Having to use an outside resource [...] maybe I shouldn't have
<div class="speech-bubble-left text-dark" style="background-color: #99F">
<p class="fs-5"><i>"Having to use an outside resource [...] maybe I shouldn't have
to use makes me feel like I could do better." </i></p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="speech-bubble text-dark" style="background-color: #09f">
<p><i>"If I'm really doing well, maybe I would just be able to figure
<div class="speech-bubble-center text-dark" style="background-color: #09f">
<p class="fs-5"><i>"If I'm really doing well, maybe I would just be able to figure
it out as I'm coding and not have to stop." </i></p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="speech-bubble text-dark" style="background-color: #09C">
<p><i>"I [think] that programmers need to know every single little
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="speech-bubble-center text-dark" style="background-color: #09C">
<p class="fs-5"><i>"I [think] that programmers need to know every single little
piece of syntax and every code and how to at least start doing everything."
</i></p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="speech-bubble text-dark" style="background-color: #096">
<p><i>"You think to yourself, 'oh, I should be understanding how to
<div class="speech-bubble-right text-dark" style="background-color: #096">
<p class="fs-5"><i>"You think to yourself, 'oh, I should be understanding how to
fix this. My friend would just do this right away.'" </i></p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="speech-bubble text-dark" style="background-color: #093">
<p><i>"When I don't know where to begin or what I should write down
<div class="speech-bubble-left text-dark" style="background-color: #093">
<p class="fs-5"><i>"When I don't know where to begin or what I should write down
first
or import some data, I just feel like, 'oh, I'm really bad on programing.'"</i></p>
</div>
Expand Down
61 changes: 61 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
h2 {
margin-top: 30px;
margin-bottom: 20px;
}

.speech-bubble-left {
border-radius: 20px;
padding: 5%;
position: relative;
margin-bottom: 20px;
}

.speech-bubble-left::after {
content: '';
position: absolute;
top: 100%;
left: 25%;
height: 20px;
width: 20px;
box-sizing: border-box;
transform: rotate(45deg) translate(-75%);
background: inherit;
}

.speech-bubble-center {
border-radius: 20px;
padding: 5%;
position: relative;
margin-bottom: 20px;
}

.speech-bubble-center::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
height: 20px;
width: 20px;
box-sizing: border-box;
transform: rotate(45deg) translate(-75%);
background: inherit;
}

.speech-bubble-right {
border-radius: 20px;
padding: 5%;
position: relative;
margin-bottom: 20px;
}

.speech-bubble-right::after {
content: '';
position: absolute;
top: 100%;
left: 75%;
height: 20px;
width: 20px;
box-sizing: border-box;
transform: rotate(45deg) translate(-75%);
background: inherit;
}

0 comments on commit d6f6305

Please sign in to comment.