diff --git a/starter-code/styles/style.css b/starter-code/styles/style.css new file mode 100644 index 000000000..7c33d3be4 --- /dev/null +++ b/starter-code/styles/style.css @@ -0,0 +1,176 @@ +@import url(https://db.onlinewebfonts.com/c/0811affbbfd6cb65b2fc0ce8717ca846?family=Ascender+Sans+W01+Regular); + +:root { + --red-color: rgb(220, 96, 82); + --main-font-size: 0.8rem; +} + +.navbar-brand { + font-weight: bold; + margin-left: 4rem; + margin-right: 12rem; +} + +.nav-item { + font-size: var(--main-font-size); +} + +#home { + color: var(--red-color); +} + +.carousel-item.active { + overflow: hidden; + position: relative; +} + +.carousel-img { + filter: grayscale(100%); + transform: scale(1.3); + transform-origin: 60% 0; +} + +.carousel-header { + font-weight: 100; + font-size: 34px; +} + +.carousel-caption { + padding-top: 0; + bottom: 20%; +} + +.carousel-text { + font-size: var(--main-font-size); +} + +.carousel-control-prev, .carousel-control-next { + width: auto; + opacity: 1; +} + +.carousel-control-prev span, .carousel-control-next span { + background-color: var(--red-color); + height: 4rem; + width: 2rem; + background-size: 1rem; + display: flex; + align-items: center; + justify-content: center; +} + +.read-more { + text-decoration: none; + border: 1px solid white; + font-size: 11px; + padding: 5px 18px; +} + +.circle { + border: 2px solid white; + border-radius: 50%; + padding: 10px 12px; +} + +#red-section { + background-color: var(--red-color); +} + +.red-col { + margin-top: 1rem; +} + +.red-section-headers { + margin-top: 2rem; +} + +.red-section-text { + font-size: var(--main-font-size); +} + +#latest-projects-header, #latest-articles-header { + font-size: 16px; + font-weight: bold; +} + +#latest-projects-header { + padding-top: 0.75rem; +} + +#latest-projects-subheader, #latest-articles-subheader { + font-size: 11px; + padding-bottom: 1rem; +} + +#projects-div, #articles-div { + padding-top: 0.4rem; +} + +.figcaption-text { + font-size: var(--main-font-size); + padding-top: 0.75rem; +} + +.latest-articles-title { + padding-top: 0.75rem; + font-weight: bold; +} + +.latest-articles-subtitle { + font-weight: 500; +} + +.latest-articles-paragraph { + padding-bottom: 2rem; +} + +.articles-container { + font-size: var(--main-font-size); +} + +.span-articles-red { + color: var(--red-color); +} + +#first-footer-section { + background-color: rgb(59, 59, 59); + font-size: var(--main-font-size); +} + +.footer-title { + font-weight: 500; + padding-top: 2rem; +} + +.footer-first-item { + padding-bottom: 0.25rem; +} + +.footer-item, .footer-last-item { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.footer-last-item { + margin-bottom: 3rem; +} + +.footer-list { + list-style-type: none; + padding: 0; +} + +#last-section { + background-color: rgb(41, 41, 41); + font-size: var(--main-font-size); +} + +#footer-end { + padding-top: 1rem; + padding-bottom: 0.5rem; +} + +#copyright { + padding-bottom: 0.20rem; + margin-bottom: 0; +} diff --git a/starter-code/views/index.html b/starter-code/views/index.html new file mode 100644 index 000000000..f6f55a32f --- /dev/null +++ b/starter-code/views/index.html @@ -0,0 +1,439 @@ + + + + + + Document + + + + + + + +
+ + +
+
+
+
+ + + +
Web Design
+

+ Cum socis ratoque penaltibus et magris parturient + montes, nascelur ridiculus mus. Vestibulum vehicula erat + non conque cursus. Aenean auctor nulla quis augue + dictum, sed sagitis odio varius +

+
+
+ + + +
Web Development
+

+ Duis tempus leo vtae ipsum viverra, blandt condimentum + sapien portitor. Duis portitor sed metus eget motis. + Curabitur bibendum imperdiet tortor, ut pulvinar purus + elementum nspendisse at erat luctus. +

+
+
+ + + +
User interface
+

+ Cras afiquet veneratis portitor. Donec rutrum sapien et + sapien dignissim, eu dapibus mi moleste. Suspendisse + dictum convallis quan em sodaies. Praesent non enim et + magna congue gravida. +

+
+
+
+
+ +
+
+

LATEST PROJECTS

+

FEW OF THE LATEST PORTFOLIO ITEMS

+
+
+
+
+
+ +
+ Nunc libero elit, laculls nec augue non +
+
+
+
+
+ +
+ Phasellus atiquet laculls neque accumsan + aliquam +
+
+
+
+
+ +
+ Vivamus blandit Ipsum sed arcu euismod +
+
+
+
+
+ +
+ Curabitur auctor dolor risus, vitae + pelientesque arcu consequat +
+
+

+
+
+
+
+

LATEST ARTICLES

+

LATEST POSTS FROM THE BLOG

+
+
+
+
+ +

+ Etiam mauris tortor, pharetra quis + lobortis in, pharetra in diam +

+

POSTED ON AUGUST 19, 2013 BY ADMIN

+

+ Duis tempus leo vitae impsum viverra, blandit + condimentum sapien portitor. Duis portitor + sed metus eget molis. Curabitur bibendum + imperdiet tortor, ut pulvinar purus + elementum nec. Suspendisse at erat + luctus; hendrerit sapien sed, consectetur + erat. Maecenas dignissim suscipit orci at + moieste. Aenean fringilia dolor vitae lacus + lacinia eietend. Suspendisse et libero + nunc. Etiam mauris tortor, pharetra [...] +

+
+
+ +

+ Falauris sollicitudIn quis dolor + venenatis facilisis +

+

POSTED ON AUGUST 19, 2013 BY ADMIN

+

+ Donec sed dolor eu augue dignissim + pelientesque. Fusce semper tortor ornare, + luctus sem in, dictum leo. Ut at congue + quam! Maecenas luctus interdum odio, + eget volutpat velit hendrent eu? + Suspendisse at magna ut sem blandit + hendrerit nori ut magna. Cras quis porta + dolor. Aliquam erat volutpat. Phasellus + fringilia feugiat ibero nec volutpat. + Maecenas fermentum bibendum [...] +

+
+
+ +

+ Suspendisse ornare, fells feuglat + suscipit pharetra +

+

POSTED ON AUGUST 19, 2013 BY ADMIN

+

+ Quisque sit amet sagitis justo. + Suspendisse omare, fells feugiat suscipit + pharetra, lorem est viverra odio; tristique + tristique diam telius id telius. In consectetur + aliquet tristique. Curabitur imperdiet leo in + nisi consectetur mattis. Quisque bibendum, + mauris vitae suscipit ornare; est nibin + elementum mauris, eu malesuada nunc + magna at justo. Prom blandit id telius non + pelientesque. Mauris [...] +

+
+
+ +

+ Festibulum purus odio, ornare non + posuere +

+

POSTED ON AUGUST 19, 2013 BY ADMIN

+

+ Aenean, quis rhoncus nisi, eget, sollicitudIn + Ipsum. Curabitur a elementum purus. + Quisque vitae dul at arcu portitor lacreet + ac vitae nibh. Class aptent taciti sociosqu + ad litora torquent per conubia nostra, per + inceptos himenaeos. Nulla facilisi. Nulla + egestas at nunc at volutpat. Nullam + sociales at diam vel tempor. Sed pretium, + leo vei pelientesque dictum, ligula [...] +

+
+
+
+
+
+ + + + +