diff --git a/homework/week-1-project/0-blank-page-setup/index.html b/homework/week-1-project/0-blank-page-setup/index.html index 7ab86ff..c65301f 100644 --- a/homework/week-1-project/0-blank-page-setup/index.html +++ b/homework/week-1-project/0-blank-page-setup/index.html @@ -1,15 +1,12 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/homework/week-1-project/0-blank-page-setup/style.css b/homework/week-1-project/0-blank-page-setup/style.css index e69de29..5155298 100644 --- a/homework/week-1-project/0-blank-page-setup/style.css +++ b/homework/week-1-project/0-blank-page-setup/style.css @@ -0,0 +1 @@ +blank \ No newline at end of file diff --git a/homework/week-1-project/1-head-and-header/index.html b/homework/week-1-project/1-head-and-header/index.html index e69de29..43605b5 100644 --- a/homework/week-1-project/1-head-and-header/index.html +++ b/homework/week-1-project/1-head-and-header/index.html @@ -0,0 +1,16 @@ + + + + + + + tictactoe board + + + +
+

Tic Tac Toe

+
+ + + \ No newline at end of file diff --git a/homework/week-1-project/1-head-and-header/style.css b/homework/week-1-project/1-head-and-header/style.css index e69de29..ac22852 100644 --- a/homework/week-1-project/1-head-and-header/style.css +++ b/homework/week-1-project/1-head-and-header/style.css @@ -0,0 +1,9 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: aqua; +} +.header h1 { + color: black; + font-size: 5rem; + text-align: center; +} \ No newline at end of file diff --git a/homework/week-1-project/2-rules-of-the-game/index.html b/homework/week-1-project/2-rules-of-the-game/index.html index e69de29..6e902f9 100644 --- a/homework/week-1-project/2-rules-of-the-game/index.html +++ b/homework/week-1-project/2-rules-of-the-game/index.html @@ -0,0 +1,21 @@ + + + + + + + tictactoe board + + + +
+

You can either choose to play X or O

+
+ X Player + O Player +
+ Rules of the game +
+ + + \ No newline at end of file diff --git a/homework/week-1-project/2-rules-of-the-game/style.css b/homework/week-1-project/2-rules-of-the-game/style.css index e69de29..b642ae9 100644 --- a/homework/week-1-project/2-rules-of-the-game/style.css +++ b/homework/week-1-project/2-rules-of-the-game/style.css @@ -0,0 +1,4 @@ +.rules { + margin: 0 auto; + text-align: center; +} \ No newline at end of file diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html index e69de29..b39f8ec 100644 --- a/homework/week-1-project/3-unplayable-board/index.html +++ b/homework/week-1-project/3-unplayable-board/index.html @@ -0,0 +1,45 @@ + + + + + + + tictactoe board + + + +
+

Tic Tac Toe

+
+ +
+
+ X Player + O Player +
+ Rules of the game +
+ + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/homework/week-1-project/3-unplayable-board/style.css b/homework/week-1-project/3-unplayable-board/style.css index e69de29..2ae1973 100644 --- a/homework/week-1-project/3-unplayable-board/style.css +++ b/homework/week-1-project/3-unplayable-board/style.css @@ -0,0 +1,29 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: aqua; +} +.header h1 { + color: black; + font-size: 5rem; + text-align: center; +} +.rules { + margin: 0 auto; + text-align: center; +} +table { + width: 100%; + border-collapse: collapse; +} +tr { + width: 33.333%; + border: 6px solid black; +} +td { +border: 6px solid black; +} +td::after { + content: ""; + display: block; + margin-top: 100%; +} \ No newline at end of file diff --git a/homework/week-2-project/0-blank-page-setup/index.html b/homework/week-2-project/0-blank-page-setup/index.html index 7ab86ff..35435e1 100644 --- a/homework/week-2-project/0-blank-page-setup/index.html +++ b/homework/week-2-project/0-blank-page-setup/index.html @@ -6,6 +6,7 @@ + My website diff --git a/homework/week-2-project/0-blank-page-setup/style.css b/homework/week-2-project/0-blank-page-setup/style.css index e69de29..1bfc3ac 100644 --- a/homework/week-2-project/0-blank-page-setup/style.css +++ b/homework/week-2-project/0-blank-page-setup/style.css @@ -0,0 +1,4 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: aqua; +} \ No newline at end of file diff --git a/homework/week-2-project/1-head and header/index.html b/homework/week-2-project/1-head and header/index.html new file mode 100644 index 0000000..82e653b --- /dev/null +++ b/homework/week-2-project/1-head and header/index.html @@ -0,0 +1,26 @@ + + + + + + + + My website + + +
+
+
+

Sheraf Web Design

+
+ +
+
+ + \ No newline at end of file diff --git a/homework/week-2-project/1-head and header/style.css b/homework/week-2-project/1-head and header/style.css new file mode 100644 index 0000000..f56119d --- /dev/null +++ b/homework/week-2-project/1-head and header/style.css @@ -0,0 +1,54 @@ +body { + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.5; + background-color: aqua; +} +.container { + width: 80%; + margin: auto; + overflow: hidden; +} +header { + background-color: darkslategray; + color: white; + padding-top: 30px; + min-height: 70px; + border-top: red solid 3px; + border-bottom: red solid 3px; +} +header a { + color: white; + text-transform: uppercase; + text-decoration: none; + font-size: 16px; +} +header ul { + padding: 0; + margin: 0; +} +header li { + float: left; + display: inline; + padding: 0 20px 0 20px; +} +header #branding { +float:left; +} +#branding h1 { + margin: 0; +} +nav { + float: right; + margin: 10px; +} +header .highlight, header .current a { + color: red; + font-weight: bold; +} +header a:hover { + color: gray; + font-weight: bold; +} diff --git a/homework/week-2-project/2-showcase/index.html b/homework/week-2-project/2-showcase/index.html new file mode 100644 index 0000000..356bcf3 --- /dev/null +++ b/homework/week-2-project/2-showcase/index.html @@ -0,0 +1,18 @@ + + + + + + + + My website + + +
+
+

Affordable Professional Web Design

+

Contact me for your affordable professional web design,web maintenance,and all other web development issues. Also don't forget to subscribe to our weekly newsletter below!

+
+
+ + \ No newline at end of file diff --git a/homework/week-2-project/2-showcase/style.css b/homework/week-2-project/2-showcase/style.css new file mode 100644 index 0000000..1f4710a --- /dev/null +++ b/homework/week-2-project/2-showcase/style.css @@ -0,0 +1,26 @@ +body { + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.5; + background-color: aqua; +} +.container { + width: 80%; + margin: auto; + overflow: hidden; +} +#showcase { + min-height: 400px; + background:url("../img/showcase.jpg") no-repeat 0 -400px; + text-align: center; + color: white; +} +#showcase h1 { + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; +} +#showcase p { + font-size: 20px; \ No newline at end of file diff --git a/homework/week-2-project/3-newsletter/index.html b/homework/week-2-project/3-newsletter/index.html new file mode 100644 index 0000000..4e57581 --- /dev/null +++ b/homework/week-2-project/3-newsletter/index.html @@ -0,0 +1,21 @@ + + + + + + + + My website + + +
+
+

Subscribe To Our Newsletter

+
+ + +
+
+
+ + \ No newline at end of file diff --git a/homework/week-2-project/3-newsletter/style.css b/homework/week-2-project/3-newsletter/style.css new file mode 100644 index 0000000..94563a4 --- /dev/null +++ b/homework/week-2-project/3-newsletter/style.css @@ -0,0 +1,37 @@ +body { + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.5; + background-color: aqua; +} +.container { + width: 80%; + margin: auto; + overflow: hidden; +} +#newsletter { + padding: 15px; + color: white; + background-color: darkslategray; +} +#newsletter h1 { + float: left; +} +#newsletter form { + float: right; + margin-top: 20px; +} +#newsletter input[type="email"] { + padding: 4px; + height: 25px; + width: 250px; +} +.button { + height: 36px; + background: red; + color: white; + border: 0; + padding: 0 20px 0 20px; +} diff --git a/homework/week-2-project/4-boxes/index.html b/homework/week-2-project/4-boxes/index.html new file mode 100644 index 0000000..1241bd1 --- /dev/null +++ b/homework/week-2-project/4-boxes/index.html @@ -0,0 +1,31 @@ + + + + + + + + My website + + +
+
+
+ HTML5 logo +

HTML5 Markup

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, est?

+
+
+ CSS3 logo +

CSS3 Styling

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, fugiat!

+
+
+ brush logo +

Graphic Design

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, facere.

+
+
+
+ + \ No newline at end of file diff --git a/homework/week-2-project/4-boxes/style.css b/homework/week-2-project/4-boxes/style.css new file mode 100644 index 0000000..f94d0dd --- /dev/null +++ b/homework/week-2-project/4-boxes/style.css @@ -0,0 +1,28 @@ +body { + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.5; + background-color: aqua; +} +.container { + width: 80%; + margin: auto; + overflow: hidden; +} +/* Boxes */ +#boxes{ + margin-top:20px; + } + + #boxes .box{ + float:left; + text-align: center; + width:30%; + padding:10px; + } + + #boxes .box img{ + width:90px; + } \ No newline at end of file diff --git a/homework/week-2-project/5-footer/index.html b/homework/week-2-project/5-footer/index.html new file mode 100644 index 0000000..b6136b8 --- /dev/null +++ b/homework/week-2-project/5-footer/index.html @@ -0,0 +1,15 @@ + + + + + + + + My website + + + + + diff --git a/homework/week-2-project/5-footer/style.css b/homework/week-2-project/5-footer/style.css new file mode 100644 index 0000000..5fceda9 --- /dev/null +++ b/homework/week-2-project/5-footer/style.css @@ -0,0 +1,20 @@ +body { + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.5; + background-color: aqua; +} +.container { + width: 80%; + margin: auto; + overflow: hidden; +} + footer{ + padding:20px; + margin-top:20px; + color:#ffffff; + background-color:#e8491d; + text-align: center; + } \ No newline at end of file diff --git a/homework/week-2-project/about.html b/homework/week-2-project/about.html new file mode 100644 index 0000000..4ae05f8 --- /dev/null +++ b/homework/week-2-project/about.html @@ -0,0 +1,58 @@ + + + + + + + + My website + + +
+
+
+

Sheraf Web Design

+
+ +
+
+
+
+

Subscribe To Our Newsletter

+
+ + +
+
+
+
+
+
+

About Us

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus. +

+

+ Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque. +

+
+ + +
+
+ + + diff --git a/homework/week-2-project/img/Thumbs.db b/homework/week-2-project/img/Thumbs.db new file mode 100644 index 0000000..e665e4b Binary files /dev/null and b/homework/week-2-project/img/Thumbs.db differ diff --git a/homework/week-2-project/img/logo_brush.png b/homework/week-2-project/img/logo_brush.png new file mode 100644 index 0000000..dba35aa Binary files /dev/null and b/homework/week-2-project/img/logo_brush.png differ diff --git a/homework/week-2-project/img/logo_css.png b/homework/week-2-project/img/logo_css.png new file mode 100644 index 0000000..fb5477d Binary files /dev/null and b/homework/week-2-project/img/logo_css.png differ diff --git a/homework/week-2-project/img/logo_html.png b/homework/week-2-project/img/logo_html.png new file mode 100644 index 0000000..d7649c1 Binary files /dev/null and b/homework/week-2-project/img/logo_html.png differ diff --git a/homework/week-2-project/img/showcase.jpg b/homework/week-2-project/img/showcase.jpg new file mode 100644 index 0000000..a1b6dc5 Binary files /dev/null and b/homework/week-2-project/img/showcase.jpg differ diff --git a/homework/week-2-project/index.html b/homework/week-2-project/index.html index 879ec9b..7135d57 100644 --- a/homework/week-2-project/index.html +++ b/homework/week-2-project/index.html @@ -1,40 +1,63 @@ - - + - - - - HTML/CSS Week 2 Project Table + + + + + My website - -

Traversy Media: Build An HTML5 Website With A Responsive Layout

-

- -

- - - - - - - - - - - - - - - - - - - - - -
a user can ...index.htmlabout.htmlservices.htmlCSS
... open a website empty HTML template, requiring CSS file, title tag(doesn't exist yet!)(doesn't exist yet!)empty CSS file
+
+
+
+

Sheraf Web Design

+
+ +
+
+
+
+

Affordable Professional Web Design

+

Contact me for your affordable professional web design,web maintenance,and all other web development issues. Also don't forget to subscribe to our weekly newsletter below!

+
+
+
+
+

Subscribe To Our Newsletter

+
+ + +
+
+
+
+
+
+ HTML5 logo +

HTML5 Markup

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, est?

+
+
+ CSS3 logo +

CSS3 Styling

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, fugiat!

+
+
+ brush logo +

Graphic Design

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, facere.

+
+
+
+ - diff --git a/homework/week-2-project/services.html b/homework/week-2-project/services.html new file mode 100644 index 0000000..4dadb0b --- /dev/null +++ b/homework/week-2-project/services.html @@ -0,0 +1,83 @@ + + + + + + + + My website | Services + + +
+
+
+

Sheraf Web Design

+
+ +
+
+
+
+

Subscribe To Our Newsletter

+
+ + +
+
+
+
+
+
+

Services

+
    +
  • +

    Website Design

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies at, vulputate id lorem. Nulla facilisi.

    +

    Pricing: $1,000 - $3,000

    +
    • +
  • +

    Website Maintenance

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies at, vulputate id lorem. Nulla facilisi.

    +

    Pricing: $250 per month

    +
    • +
  • +

    Website Hosting

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies at, vulputate id lorem. Nulla facilisi.

    +

    Pricing: $25 per month

    +
    • +
+
+ + +
+
+ + + diff --git a/homework/week-2-project/style.css b/homework/week-2-project/style.css new file mode 100644 index 0000000..265ec77 --- /dev/null +++ b/homework/week-2-project/style.css @@ -0,0 +1,205 @@ +body{ + font: 15px/1.5 Arial, Helvetica,sans-serif; + padding:0; + margin:0; + background-color: aqua; + } + + /* Global */ + .container{ + width:80%; + margin:auto; + overflow:hidden; + } + + ul{ + margin:0; + padding:0; + } + + .button{ + height:38px; + background:red; + border:0; + padding-left: 20px; + padding-right:20px; + color:white; + } + + .dark{ + padding:15px; + background:#35424a; + color:#ffffff; + margin-top:10px; + margin-bottom:10px; + } + + /* Header **/ + header { + background-color: darkslategray; + color: white; + padding-top: 30px; + min-height: 70px; + border-top: red solid 3px; + border-bottom: red solid 3px; +} +header a { + color: white; + text-transform: uppercase; + text-decoration: none; + font-size: 16px; +} +header ul { + padding: 0; + margin: 0; +} +header li { + float: left; + display: inline; + padding: 0 20px 0 20px; +} +header #branding { +float:left; +} +#branding h1 { + margin: 0; +} +nav { + float: right; + margin: 10px; +} +header .highlight, header .current a { + color: red; + font-weight: bold; +} +header a:hover { + color: gray; + font-weight: bold; +} + + + /* Showcase */ + #showcase{ + min-height:400px; + background:url('../img/showcase.jpg') no-repeat 0 -400px; + text-align:center; + color: white; + } + + #showcase h1{ + margin-top:100px; + font-size:55px; + margin-bottom:10px; + } + + #showcase p{ + font-size:20px; + } + + /* Newsletter */ + #newsletter{ + padding:15px; + color: white; + background: darkslategray; + } + + #newsletter h1{ + float:left; + } + + #newsletter form { + float:right; + margin-top:15px; + } + + #newsletter input[type="email"]{ + padding:4px; + height:25px; + width:250px; + } + + /* Boxes */ + #boxes{ + margin-top:20px; + } + + #boxes .box{ + float:left; + text-align: center; + width:30%; + padding:10px; + } + + #boxes .box img{ + width:90px; + } + + /* Sidebar */ + aside#sidebar{ + float:right; + width:30%; + margin-top:10px; + } + + aside#sidebar .quote input, aside#sidebar .quote textarea{ + width:90%; + padding:5px; + } + + /* Main-col */ + article#main-col{ + float:left; + width:65%; + } + + /* Services */ + ul#services li{ + list-style: none; + padding:20px; + border: #cccccc solid 1px; + margin-bottom:5px; + background:#e6e6e6; + } + + footer{ + padding:20px; + margin-top:20px; + color: white; + background-color: red; + text-align: center; + } + + /* Media Queries */ + @media(max-width: 768px){ + header #branding, + header nav, + header nav li, + #newsletter h1, + #newsletter form, + #boxes .box, + article#main-col, + aside#sidebar{ + float:none; + text-align:center; + width:100%; + } + + header{ + padding-bottom:20px; + } + + #showcase h1{ + margin-top:40px; + } + + #newsletter button, .quote button{ + display:block; + width:100%; + } + + #newsletter form input[type="email"], .quote input, .quote textarea{ + width:100%; + margin-bottom:5px; + } + } + \ No newline at end of file diff --git a/homework/week-3-project/0-blankpage setup/index.html b/homework/week-3-project/0-blankpage setup/index.html new file mode 100644 index 0000000..1ac3ee9 --- /dev/null +++ b/homework/week-3-project/0-blankpage setup/index.html @@ -0,0 +1,13 @@ + + + + + + + + DuckDuckGo + + + + + \ No newline at end of file diff --git a/homework/week-3-project/0-blankpage setup/style.css b/homework/week-3-project/0-blankpage setup/style.css new file mode 100644 index 0000000..e69de29 diff --git a/homework/week-3-project/1-head and header/index.html b/homework/week-3-project/1-head and header/index.html new file mode 100644 index 0000000..6907145 --- /dev/null +++ b/homework/week-3-project/1-head and header/index.html @@ -0,0 +1,32 @@ + + + + + + + DuckDuckGo + + + + +
+
+
+
    + +
  • +
  • Privacy, simplified.
    • +
+
+
+
+
duck
+
DuckDuckGo
+
+ + +

The search engine that doesn't track you. Help Spread DuckDuckGo!

+
+
+ +
\ No newline at end of file diff --git a/homework/week-3-project/1-head and header/style.css b/homework/week-3-project/1-head and header/style.css new file mode 100644 index 0000000..62d6280 --- /dev/null +++ b/homework/week-3-project/1-head and header/style.css @@ -0,0 +1,129 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; +} +/* Header */ + +.nav { + display: block; + margin: 22px auto auto 16px; + margin-top: 22px; + height: 44px; + right: 7px; + position: absolute; + bottom: 0; + top: 0; + z-index: 199; + } +ul { + list-style-type: none; + align-items: center; + justify-content: end; + margin: 20px; +} + +li { + float: right; + margin-left: 20px; + font-size: 100%; + } +#privacy:hover, #privacy:focus { + + color: #6d6d6d; +} +#privacy { + + cursor: pointer; + font-size: 12px; + margin:3px 0 0 20px; +} +#menu { + background-image: url("img/Menu.png"); + background-repeat: no-repeat; + background-size: 40px; + margin-top: -10px; + width: 40px; + height: 40px; + background-color: aqua; +} +#menu:hover { + background-image: url("img/Menu_hover.png"); + border-radius: 3px; +} +#twitter { + background-image: url("img/Tweeter.png"); + background-repeat: no-repeat; + background-size: 40px; + margin-top: -10px; + width: 40px; + height: 40px; + background-color: aqua; +} +#twitter:hover { + background-image: url("img/Tweeter.png"); + border-radius: 3px; +} + + +.graypage { + background-color: #f7f7f7; + height: 563px; + width: auto; + color: #aaaaaa; + font-size: 18px; + line-height: 23.0333px; + +} + +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbutton { + height: 35px; + width: 20px; + padding-left: 20px; + padding-right: 20px; +} +.container { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} +#duck{ + font-size: 26px; + color: rgb(34, 34, 34); +} +#duckimage { + border: #e71f1f; +} +#spread { + color: #4fb6ad; +} +span a:hover { + color: #4fb6ad; + +} +span a:link { + color: #4fb6ad; + text-decoration: none; + +} +span a:visited, a:active { + color: #4fb6ad; + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/2-greenpage/index.html b/homework/week-3-project/2-greenpage/index.html new file mode 100644 index 0000000..edba2c9 --- /dev/null +++ b/homework/week-3-project/2-greenpage/index.html @@ -0,0 +1,28 @@ + + + + + + + DuckDuckGo + + + + +
+
+
+

We don’t store your personal information. Ever.

+

Our privacy policy is simple: we don’t collect
or share any of your + personal information.

+
+
+ +
woman +
+
+
+
+ + \ No newline at end of file diff --git a/homework/week-3-project/2-greenpage/style.css b/homework/week-3-project/2-greenpage/style.css new file mode 100644 index 0000000..0381c96 --- /dev/null +++ b/homework/week-3-project/2-greenpage/style.css @@ -0,0 +1,48 @@ +.greenpage { + background-color: rgb(88, 183, 146); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 14.4px; +} +.searchbuttongreen { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containergreen { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimagegreen { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textgreen{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/3-orangepage/index.html b/homework/week-3-project/3-orangepage/index.html new file mode 100644 index 0000000..5b52fe5 --- /dev/null +++ b/homework/week-3-project/3-orangepage/index.html @@ -0,0 +1,29 @@ + + + + + + + DuckDuckGo + + + + +
+
+
+

We don’t follow you around with ads.

+

We don’t store your search history. We therefore have nothing
+ to sell to advertisers that track you across the Internet. +

+
+
+ +
woman2 +
+
+
+
+ + \ No newline at end of file diff --git a/homework/week-3-project/3-orangepage/style.css b/homework/week-3-project/3-orangepage/style.css new file mode 100644 index 0000000..c8fb0ab --- /dev/null +++ b/homework/week-3-project/3-orangepage/style.css @@ -0,0 +1,34 @@ +.orangepage { + background-color: rgb(245, 163, 57); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} +.searchbuttonorange { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerorange { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageorange { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textorange{ + padding-top: 120px; + color: rgb(255, 255, 255); +} \ No newline at end of file diff --git a/homework/week-3-project/4-bluepage/index.html b/homework/week-3-project/4-bluepage/index.html new file mode 100644 index 0000000..75475b7 --- /dev/null +++ b/homework/week-3-project/4-bluepage/index.html @@ -0,0 +1,29 @@ + + + + + + + DuckDuckGo + + + + +
+
+
+

We don’t track you in or out of private browsing mode.

+

Other search engines track your searches even when you’re
+ in private browsing mode. We don’t track you — period. +

+
+
+ +
man +
+
+
+
+ + \ No newline at end of file diff --git a/homework/week-3-project/4-bluepage/style.css b/homework/week-3-project/4-bluepage/style.css new file mode 100644 index 0000000..55a7447 --- /dev/null +++ b/homework/week-3-project/4-bluepage/style.css @@ -0,0 +1,34 @@ +.bluepage { + background-color: rgb(95, 99, 189); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} +.searchbuttonblue { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerblue { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageblue { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textblue{ + padding-top: 120px; + color: rgb(255, 255, 255); +} \ No newline at end of file diff --git a/homework/week-3-project/5-lastpage/index.html b/homework/week-3-project/5-lastpage/index.html new file mode 100644 index 0000000..a17df3b --- /dev/null +++ b/homework/week-3-project/5-lastpage/index.html @@ -0,0 +1,27 @@ + + + + + + + DuckDuckGo + + + + +
+
+
+

Switch to DuckDuckGo and take back your privacy!

+

No tracking, no ad targeting, just searching.

+
+
+ +
man2 +
+
+
+
+ + \ No newline at end of file diff --git a/homework/week-3-project/5-lastpage/style.css b/homework/week-3-project/5-lastpage/style.css new file mode 100644 index 0000000..60dbebe --- /dev/null +++ b/homework/week-3-project/5-lastpage/style.css @@ -0,0 +1,39 @@ +.lastpage { + background-color: rgb(135, 206, 245); + height: 563px; + line-height: 23.0333px; + color: #365374; + font-size: 16px; +} + + +.search_button { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.lastcontainer { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimage { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.lasttext{ + padding-top: 120px; + color: #365374; +} + + + diff --git a/homework/week-3-project/img/DuckDuckGoLogo.png b/homework/week-3-project/img/DuckDuckGoLogo.png new file mode 100644 index 0000000..6505b21 Binary files /dev/null and b/homework/week-3-project/img/DuckDuckGoLogo.png differ diff --git a/homework/week-3-project/img/DuckLogo.png b/homework/week-3-project/img/DuckLogo.png new file mode 100644 index 0000000..d6dbd55 Binary files /dev/null and b/homework/week-3-project/img/DuckLogo.png differ diff --git a/homework/week-3-project/img/Menu.png b/homework/week-3-project/img/Menu.png new file mode 100644 index 0000000..bc39fc2 Binary files /dev/null and b/homework/week-3-project/img/Menu.png differ diff --git a/homework/week-3-project/img/Menu_hover.png b/homework/week-3-project/img/Menu_hover.png new file mode 100644 index 0000000..a0d9b10 Binary files /dev/null and b/homework/week-3-project/img/Menu_hover.png differ diff --git a/homework/week-3-project/img/Search_hover.png b/homework/week-3-project/img/Search_hover.png new file mode 100644 index 0000000..271eb27 Binary files /dev/null and b/homework/week-3-project/img/Search_hover.png differ diff --git a/homework/week-3-project/img/Search_icon.png b/homework/week-3-project/img/Search_icon.png new file mode 100644 index 0000000..b2a8f9a Binary files /dev/null and b/homework/week-3-project/img/Search_icon.png differ diff --git a/homework/week-3-project/img/Thumbs.db b/homework/week-3-project/img/Thumbs.db new file mode 100644 index 0000000..423a30c Binary files /dev/null and b/homework/week-3-project/img/Thumbs.db differ diff --git a/homework/week-3-project/img/Tweeter.png b/homework/week-3-project/img/Tweeter.png new file mode 100644 index 0000000..36b22e6 Binary files /dev/null and b/homework/week-3-project/img/Tweeter.png differ diff --git a/homework/week-3-project/index.html b/homework/week-3-project/index.html index 8c60329..b5b0216 100644 --- a/homework/week-3-project/index.html +++ b/homework/week-3-project/index.html @@ -1,70 +1,95 @@ - - + - - - - HTML/CSS Week 3 Project Table + + + + DuckDuckGo + + - - -

DuckDuckGo

-

- Replicate DuckDuckGo using just HTML & CSS. Users should be - able to type into the search bar, but nothing needs to happen when they hit "enter".

-

- -

Be sure to use the same colors, the same images, and the same - font as DuckDuckGo. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
a user can ...HTMLCSS
... open a website empty HTML template, requiring CSS file, title tagempty CSS file
... type into the search bara section structured like the top of DuckDuckGosome styling to make it visually match DuckDuckGo
... know DuckDuckGo doesn't store personal dataa section based off the second section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be targeted for adsa section based off the third section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be trackeda section based off the fourth section of DuckDuckGosome styling to make it visually match DuckDuckGo
... read the call to actiona section based off the fifth section of DuckDuckGosome styling to make it visually match DuckDuckGo
- - - + +
+
+
+
    + +
  • +
  • Privacy, simplified.
    • +
+
+
+
+
duck
+
DuckDuckGo
+
+ + +

The search engine that doesn't track you. Help Spread DuckDuckGo!

+
+
+ +
+
+
+
+

We don’t store your personal information. Ever.

+

Our privacy policy is simple: we don’t collect
or share any of your + personal information.

+
+
+ +
woman +
+
+
+
+
+
+
+

We don’t follow you around with ads.

+

We don’t store your search history. We therefore have nothing
+ to sell to advertisers that track you across the Internet. +

+
+
+ +
woman2 +
+
+
+
+
+
+
+

We don’t track you in or out of private browsing mode.

+

Other search engines track your searches even when you’re
+ in private browsing mode. We don’t track you — period. +

+
+
+ +
man +
+
+
+
+
+
+
+

Switch to DuckDuckGo and take back your privacy!

+

No tracking, no ad targeting, just searching.

+
+
+ +
man2 +
+
+
+
+ + \ No newline at end of file diff --git a/homework/week-3-project/style.css b/homework/week-3-project/style.css new file mode 100644 index 0000000..94fb118 --- /dev/null +++ b/homework/week-3-project/style.css @@ -0,0 +1,282 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; +} +/* Header */ + +.nav { + display: block; + margin: 22px auto auto 16px; + margin-top: 22px; + height: 44px; + right: 7px; + position: absolute; + bottom: 0; + top: 0; + z-index: 199; + } +ul { + list-style-type: none; + align-items: center; + justify-content: end; + margin: 20px; +} + +li { + float: right; + margin-left: 20px; + font-size: 100%; + } +#privacy:hover, #privacy:focus { + + color: #6d6d6d; +} +#privacy { + + cursor: pointer; + font-size: 12px; + margin:3px 0 0 20px; +} +#menu { + background-image: url("img/Menu.png"); + background-repeat: no-repeat; + background-size: 40px; + margin-top: -10px; + width: 40px; + height: 40px; + background-color: aqua; +} +#menu:hover { + background-image: url("img/Menu_hover.png"); + border-radius: 3px; +} +#twitter { + background-image: url("img/Tweeter.png"); + background-repeat: no-repeat; + background-size: 40px; + margin-top: -10px; + width: 40px; + height: 40px; + background-color: aqua; +} +#twitter:hover { + background-image: url("img/Tweeter.png"); + border-radius: 3px; +} + + +.graypage { + background-color: #f7f7f7; + height: 563px; + width: auto; + color: #aaaaaa; + font-size: 18px; + line-height: 23.0333px; + +} + +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbutton { + height: 35px; + width: 20px; + padding-left: 20px; + padding-right: 20px; +} +.container { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} +#duck{ + font-size: 26px; + color: rgb(34, 34, 34); +} +#duckimage { + border: #e71f1f; +} +#spread { + color: #4fb6ad; +} +span a:hover { + color: #4fb6ad; + +} +span a:link { + color: #4fb6ad; + text-decoration: none; + +} +span a:visited, a:active { + color: #4fb6ad; + text-decoration: none; + +} + +.greenpage { + background-color: rgb(88, 183, 146); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 14.4px; +} +.searchbuttongreen { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containergreen { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimagegreen { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textgreen{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} +.orangepage { + background-color: rgb(245, 163, 57); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} +.searchbuttonorange { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerorange { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageorange { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textorange{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +.bluepage { + background-color: rgb(95, 99, 189); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} +.searchbuttonblue { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerblue { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageblue { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textblue{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +.lastpage { + background-color: rgb(135, 206, 245); + height: 563px; + line-height: 23.0333px; + color: #365374; + font-size: 16px; +} + + +.search_button { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.lastcontainer { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimage { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.lasttext{ + padding-top: 120px; + color: #365374; +}