Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added a background color and some underlines

This commit is contained in:
Notoric 2024-03-09 17:08:09 +00:00
parent 86078cfafe
commit e78efd2f6d
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/styles.css
View File

@ -153,6 +153,10 @@ h3 {
text-align: center;
}
#table-heading {
margin-bottom: 25px;
}
.feature-showcase {
display: flex;
flex-direction: column;
@ -192,8 +196,8 @@ h3 {
width: calc(100% - 34px);
min-height: 100px;
margin: 12px;
border-radius: 55px;
border: 5px solid black;
border-radius: 52px;
border: 3px solid var(--bgColor);
overflow: hidden;
transition: width 1s ease, height 1s ease;
@ -279,7 +283,7 @@ h3 {
height: 800px;
width: 150px;
min-width: 150px;
border-radius: 80px;
border-radius: 74px;
}
.carousel-item .carousel-id {
@ -317,17 +321,13 @@ h3 {
padding: 30px;
}
#table-heading {
margin-bottom: 50px;
}
#responsive-design {
#interactive-ui {
grid-column: 1 / 2;
grid-row: 2 / 3;
border-right: 1px solid var(--bgColor);
}
#resize-support {
#responsive-design {
grid-column: 2 / 2;
grid-row: 2 / 3;
}

8
index.html
View File

@ -46,15 +46,15 @@
<section id="feature-showcase-1" class="content-column features">
<h2 id="table-heading" class="content-column">A Few Features</h2>
<div class="feature-showcase">
<div class="feature-showcase-item" id="responsive-design">
<h3>Responsive Design</h3>
<div class="feature-showcase-item" id="interactive-ui">
<h3>Interactive UI</h3>
<p>
This website has been designed to provide satisfying user feedback. From using javscript to expand the carousel, to using css to change the shape of the title on the landing page; the website has been designed to provide an outstanding user experience.
</p>
</div>
<div class="feature-showcase-item" id="resize-support">
<h3>Resize Support</h3>
<div class="feature-showcase-item" id="responsive-design">
<h3>Responsive Design</h3>
<p>
The website has been designed to support a variety of different devices and aspect ratios. The website will adapt to the size of the window and display the content in a way that is easy to read and navigate.
</p>