My Blog

diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 00000000..d208468d Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/blog-sketch-week-1.png b/blog-sketch-week-1.png deleted file mode 100644 index d1e19999..00000000 Binary files a/blog-sketch-week-1.png and /dev/null differ diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..15db53c0 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,87 @@ +/*** + The new CSS reset - version 1.7.2 (last updated 23.6.2022) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + */ +*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, +button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, +ul, +menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-width: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, +textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} diff --git a/css/style.css b/css/style.css index 75e9841e..619f74c4 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,289 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap"); +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Roboto", sans-serif; + line-height: 21px; + display: flex; + flex-direction: column; +} + +.header { + position: fixed; + width: 100%; + height: 5rem; + padding-left: 40px; + padding-right: 15px; + background-color: #3c3c3c; + border: 1px solid #939393; + color: #fff; + border-radius: 0; + outline: none; + font-size: 18px; + line-height: 1.6em; + font-family: swissra; +} + +.nav { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: flex-end; + margin-top: 1.5rem; +} + +.nav-right ul { + display: flex; + gap: 1.2rem; +} + +.nav-right ul li a:hover { + text-decoration: none; + color: rgb(199, 197, 197); + outline: none; +} +.nav-searchbox { + display: flex; + justify-content: space-between; + gap: 1.2rem; + border: 1px solid #939393; +} +.fa-solid { + position: relative; + top: 5px; + left: 10px; +} +.header-form { + width: 7rem; + position: relative; + left: 55px; + color: #939393; +} +.sun { + color: yellow; +} + +/* Main */ +/* .main { + margin-top: 9rem; + line-height: 1.6rem; + color: #000; +} + +.contaner p:first-child { + margin-top: 2rem; +} +.contaner p:last-child { + margin-bottom: 2rem; +} +.contaner { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.contaner article { + width: 60%; +} +h1 { + margin-left: 50px; + margin-bottom: 20px; + font-size: 1.5rem; + color: rgb(150, 149, 149); +} */ +/* .contaner:last-child { + margin-top: 6rem; +} */ + +/* Footer */ + +.footer { + width: 100%; + height: 9rem; + background-color: #000; + padding: 30px 60px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + color: rgb(218, 216, 216); +} +.footer-icon { + width: 20%; + border: 1px solid rgb(150, 149, 149); + padding: 6px; + border-radius: 25px; +} +.footer-icon ul { + display: flex; + justify-content: space-around; +} +/* .footer-icon ul li { + border-left: 1px solid rgb(150, 149, 149); + padding: 0 7px; +} */ +.footer-icon ul li:not(:last-child)::after { + content: "|"; + padding: 0 7px; +} +.footer-icon ul li i { + padding: 0 5px; + cursor: pointer; +} + +.footer-link { + margin-top: 15px; + font-family: swissra; +} +.footer-ul { + display: flex; + justify-content: center; + gap: 40px; +} +.footer-ul li a:hover { + text-decoration: none; + color: #f8163a; + outline: none; +} +.footer-copyright { + margin-top: 15px; + font-weight: 100; + color: #939393; + font-family: swissra; +} + +/* main with grid */ +/* main with grid */ +/* main with grid */ +/* main with grid */ /* main with grid */ +.main-contaner { + font-family: "Montserrat", sans-serif; + line-height: 1.5; + padding: 7%; +} + +/*Main styles*/ +.wraper-main { + display: grid; + gap: 5px; + margin-top: 30px; +} +.title { + text-align: center; + font-size: 1.8rem; +} +h2 { + font-size: 1.3rem; +} +.sec-1 { + grid-column: 1/2; + grid-row: 1/4; + /* background-color: antiquewhite; */ + -webkit-box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); + box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); +} + +.sec-2 { + grid-column: 2/3; + grid-row: 1/2; + /* background-color: aquamarine; */ + -webkit-box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); + box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); +} +.sec-3 { + grid-column: 2/3; + grid-row: 2/4; + /* background-color: azure; */ + -webkit-box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); + box-shadow: -6px -1px 14px -5px rgba(0, 0, 0, 0.74); +} + +/* */ +.all { + display: grid; + gap: 5px; + /* grid-gap: 1rem; */ + align-items: center; + justify-items: center; + margin: 1rem; + padding: 1rem; +} +h2 { + grid-column: 1/3; + grid-row: 1/2; + margin: auto; + margin-bottom: 10px; +} +img { + grid-column: 1/2; + grid-row: 2/5; + width: 100%; + height: 70%; + border-radius: 1rem; + margin: auto; +} + +p { + grid-column: 2/3; + grid-row: 2/4; + margin: auto; + padding-left: 10px; +} +.a { + grid-column: 2/3; + grid-row: 4/5; + /* margin: auto; */ + text-decoration: none; + border: none; + font-weight: 600; + padding: 1rem 2rem; + margin: 2rem; + border-radius: 8px; + background-color: rgb(216, 69, 69); + color: #fff; +} +hr { + margin-bottom: 20px; + border-top: 1px solid #939393; +} +/*box shadow */ +.sec-1:hover { + -webkit-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); +} +.sec-1:hover { + -webkit-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); +} +.sec-2:hover { + -webkit-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); +} +.sec-3:hover { + -webkit-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); +} + +img:hover { + -webkit-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + -moz-box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); + box-shadow: -5px -5px 15px -6px rgba(0, 0, 0, 0.74); +} +.a:hover { + background-color: rgba(216, 69, 69, 0.699); + transition: 0.3s ease-in-out; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 00000000..eb9095b8 Binary files /dev/null and b/favicon.ico differ diff --git a/img/brackfast.jpeg b/img/brackfast.jpeg new file mode 100644 index 00000000..9ad47397 Binary files /dev/null and b/img/brackfast.jpeg differ diff --git a/img/bridg.webp b/img/bridg.webp new file mode 100644 index 00000000..19c04daa Binary files /dev/null and b/img/bridg.webp differ diff --git a/img/col-1.jpg b/img/col-1.jpg new file mode 100644 index 00000000..f37d5bb3 Binary files /dev/null and b/img/col-1.jpg differ diff --git a/img/col-2.jpeg b/img/col-2.jpeg new file mode 100644 index 00000000..a9f8c54d Binary files /dev/null and b/img/col-2.jpeg differ diff --git a/img/col-3.webp b/img/col-3.webp new file mode 100644 index 00000000..73de79a5 Binary files /dev/null and b/img/col-3.webp differ diff --git a/img/img-1.jpeg b/img/img-1.jpeg new file mode 100644 index 00000000..9cefc804 Binary files /dev/null and b/img/img-1.jpeg differ diff --git a/img/img-2.jpeg b/img/img-2.jpeg new file mode 100644 index 00000000..74c764e9 Binary files /dev/null and b/img/img-2.jpeg differ diff --git a/img/img-3.jpeg b/img/img-3.jpeg new file mode 100644 index 00000000..a29dc760 Binary files /dev/null and b/img/img-3.jpeg differ diff --git a/img/juse.jpeg b/img/juse.jpeg new file mode 100644 index 00000000..75c88407 Binary files /dev/null and b/img/juse.jpeg differ diff --git a/img/sun.jpg b/img/sun.jpg new file mode 100644 index 00000000..8b4d92e3 Binary files /dev/null and b/img/sun.jpg differ diff --git a/img/tech.jpg b/img/tech.jpg new file mode 100644 index 00000000..b5e0e140 Binary files /dev/null and b/img/tech.jpg differ diff --git a/img/web-form-working1.png b/img/web-form-working1.png new file mode 100644 index 00000000..c3c7a31c Binary files /dev/null and b/img/web-form-working1.png differ diff --git a/index.html b/index.html index 67dfc7f5..00c38a64 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,237 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + HTML-CSS-Coursework-Week1 + + + + + + +

Dignissimos dolor mollitia facere

Lorem ipsum dolor-1

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos + dolor mollitia facere deserunt, in animi iste laudantium suscipit + obcaecati earum vitae atque eum fugiat ipsum? Explicabo nesciunt + reprehenderit saepe quae. +

+ Learn More +